Hi,
If your day job is to build reports, I am pretty sure you must have at least once gotten comments similar to “Oh, can we move the tool tip inside the bar in the bar chart?” or “Can you also add a trend line to a Stacked Bar Chart?” and then you rush back to Excel, Tableau, BO, Cognos etc., and go check the chart’s options to see if that is available. Recently while learning JavaScript I came to learn an awesome concept called Scalable Vector Graphic. I found that JavaScript + HTML + CSS which is already an awesome combo works very well with SVG. So I set about my all time to-do task i.e., to build a chart from scratch which could be tweaked easily and plugged over data. So, without further ado…
Now, I can play around with anything here., let’s go crazy.
Now, for the Code….
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<style>
</style>
</head>
<body>
<script type='text/javascript'>
//console.log('Initializing....');
var barWidth = 30, canvasHeight = 300, canvasWidth = 800, barSpacing=20,toolTipPos = -25;
var data = [['India',200],['USA',60],['Africa',120],['Europe',95],['Australia',45],['Asia',20]];
var svgBase = document.createElementNS('http://www.w3.org/2000/svg','svg');
svgBase.setAttribute('height',canvasHeight);
svgBase.setAttribute('width',canvasWidth);
document.body.appendChild(svgBase);
//Function for Rendering Line
var drawLine = function(x1,y1,x2,y2){
var tempLine = document.createElementNS('http://www.w3.org/2000/svg','line');
tempLine.setAttribute('x1',x1);
tempLine.setAttribute('y1',y1);
tempLine.setAttribute('x2',x2);
tempLine.setAttribute('y2',y2);
tempLine.setAttribute('style','stroke:rgb(0,255,0);stroke-width:1');
svgBase.appendChild(tempLine);
};
//Rendering Y axis
drawLine(barWidth,10,barWidth,canvasHeight);
//Rendering X axis
drawLine(0,(canvasHeight-40),barWidth*data.length*2.2,(canvasHeight-40));
for(var i=0; i<data.length; i++){
//Rendering Bars
var tempRect = document.createElementNS('http://www.w3.org/2000/svg','rect');
tempRect.setAttribute('x',(barWidth+barSpacing)*(i+1));
tempRect.setAttribute('y',(canvasHeight-50)-data[i][1]);
tempRect.setAttribute('height',data[i][1]);
tempRect.setAttribute('width',barWidth);
tempRect.setAttribute('id','Rect'+i);
tempRect.setAttribute('fill','blue');
svgBase.appendChild(tempRect);
//Rendering Tooltips
var toolTip = document.createElementNS('http://www.w3.org/2000/svg','text');
toolTip.setAttribute('x',(barWidth+barSpacing)*(i+1)+4.5);
toolTip.setAttribute('y',(canvasHeight-45)-data[i][1]+toolTipPos);
toolTip.setAttribute('fill','black');
toolTip.textContent = data[i][1];
svgBase.appendChild(toolTip);
//Rendering X-Axis Labels
var seriesName = document.createElementNS('http://www.w3.org/2000/svg','text');
seriesName.setAttribute('x',(barWidth+barSpacing)*(i+1)-2);
seriesName.setAttribute('y',(canvasHeight-20));
seriesName.setAttribute('fill','red');
seriesName.setAttribute('id','xlabel'+i);
seriesName.textContent = data[i][0]
svgBase.appendChild(seriesName);
//console.log(i+' th element done!')
};
/*var toolTip = document.createElementNS('http://www.w3.org/2000/svg','text');
toolTip.setAttribute('x',30);
toolTip.setAttribute('y',50);
toolTip.setAttribute('fill','black');
toolTip.setAttribute('transform','rotate(30 50, 45)');
toolTip.textContent = 'Junk';
svgBase.appendChild(toolTip);*/
</script>
</body>
</html>
I haven’t spent much time on making this code leaner, but it is possible to define functions and objects and then
be able to switch between different charts on the fly.
BIdesi 