SVG Column Chart

Column Chart using SVG, HTML5, JavaScript

In this post, have tried to create a column chart using SVG,HTML5 & Javascript.
NO external libraries has been used for this Proof of Concept.

Taking the inspiration from d3js, have created a simple prototype that generates a simple column chart without using any external libraries (charting or javascript).

The prototype can be modified to read the data from a JSON datasource. (use JQuery-getJSON)

Final Output

SVG_ColumnChart1

SVG Column Chart (No hover)

Image 1: Final output of the Column Chart code snippet

SVG_ColumnChart2

SVG Column Chart (ON hover)

Image 2: Hover on individual column changes color highlight

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      .bar:hover {
           fill: brown;
           }
</style>
<script type="text/javascript">
   var svgns = "http://www.w3.org/2000/svg";
   function drawColumnChart()
   {
      //Begin X Axis
      var xAxis = document.createElementNS(svgns, 'line');
      xAxis.setAttributeNS(null,'x1','40');
      xAxis.setAttributeNS(null,'y1','800');
      xAxis.setAttributeNS(null,'x2','1200');
      xAxis.setAttributeNS(null,'y2','800');
      xAxis.setAttributeNS(null,'style','stroke:rgb(0,0,0);stroke-width:2');
      document.getElementById('myMainElement').appendChild(xAxis);

      //Begin Y Axis
      var yAxis = document.createElementNS(svgns, 'line');
      yAxis.setAttributeNS(null,'x1','40');
      yAxis.setAttributeNS(null,'y1','0');
      yAxis.setAttributeNS(null,'x2','40');
      yAxis.setAttributeNS(null,'y2','800');
      yAxis.setAttributeNS(null,'style','stroke:rgb(0,0,0);stroke-width:2');
      document.getElementById('myMainElement').appendChild(yAxis);

      for (var i=0; i<800;)
      {
          //Begin Drawing Horizontal Inner Grids	
           i = i+ 200;
           var xAxis = document.createElementNS(svgns, 'line');
    	   xAxis.setAttributeNS(null,'x1','40');
	   xAxis.setAttributeNS(null,'y1',i);
	   xAxis.setAttributeNS(null,'x2','1200');
	   xAxis.setAttributeNS(null,'y2',i);
	   xAxis.setAttributeNS(null,'style','stroke:rgb(20,20,20);stroke-width:0.5;stroke-dasharray:15,5');
	   document.getElementById('myMainElement').appendChild(xAxis);

	   //Begin Putting Y Axis Grid Labels
           var data = document.createTextNode(i);
           var text = document.createElementNS(svgns, 'text');
	   text.appendChild(data);
           text.setAttributeNS(null,'x',0);
           text.setAttributeNS(null,'y',800-i);
           text.setAttributeNS(null,'fill','#808080');
           document.getElementById('myMainElement').appendChild(text);
      }

      var x=40;
      var padding = 30;
      for (var i = 0; i < 26; i++) 
     {
         var barHeight = Math.random()*600;
         var barWidth = 20;
         x = x+padding;
         var y = -800;

        //Begin Creating Rectangle for each plotting point
         var rect = document.createElementNS(svgns, 'rect');
         rect.setAttributeNS(null,'class','bar');
         rect.setAttributeNS(null, 'x', x);
         rect.setAttributeNS(null, 'y', y);
         rect.setAttributeNS(null, 'height', barHeight);
         rect.setAttributeNS(null, 'width', barWidth);
         rect.setAttributeNS(null, 'fill', '#275070');
         rect.setAttributeNS(null, 'transform', 'translate(0,800)');
         rect.setAttributeNS(null, 'transform', 'scale(1,-1)');
         document.getElementById('myMainElement').appendChild(rect);

        //Begin Value labels above each column
	 var data = document.createTextNode(Math.round(barHeight));
         var tooltip = document.createElementNS(svgns, 'text');
         tooltip.appendChild(data);
         tooltip.setAttributeNS(null,'x',x);
         tooltip.setAttributeNS(null,'y',800-barHeight-5);
         tooltip.setAttributeNS(null,'fill','#808080');
         tooltip.setAttributeNS(null,'visibility','visible');
         document.getElementById('myMainElement').appendChild(tooltip);

        //Begin X Axis Labels
         var data = document.createTextNode(i);
         var text = document.createElementNS(svgns, 'text');
         text.appendChild(data);
         text.setAttributeNS(null,'x',x+3);
         text.setAttributeNS(null,'y',850);
         text.setAttributeNS(null,'fill','#808080');
         document.getElementById('myMainElement').appendChild(text);
    }
   }
</script>
</head>
<body onload="drawColumnChart();">
   <svg id="myMainElement" xmlns="http://www.w3.org/2000/svg" width="1200" height="1000" transform="matrix(0 0 0 -1 -1 -1)">  
   </svg>
</body>
</html>

The artifact can be further improved for the following

  • Reading the data from a JSON, XML or CSV
  • Modifying the plot options for automatic Y axis value calculation
  • Scaling the plotting area to cover the entire real estate of the SVG
  • Reading the X-Axis label from the datasource
  • Hidding, Un-hiding the plot labels on hover

Also Read the SVG Guide 

Also Read the HTML5 Canvas Column Chart

Posted in CSS, HTML5, Web Technology Tagged with: , , , , ,
0 comments on “SVG Column Chart
2 Pings/Trackbacks for "SVG Column Chart"
  1. […] See the Complete SVG Guide and SVG Demo at the following link or click on the image given below http://www.knowstack.com/webtech/svg.html Also Read Column Chart in SVG, HTML5, JavaScript […]

  2. […] Also Read the SVG Column Chart […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news