Scripting Graphs in Browser

Few would have encountered situations where a graph based on dynamic data needs to be part of a web page. In these cases, we either opt for some open source or commercial graph generating tools. We can also use Canvas HTML element to create graphs, if we can put some effort in learning. In this blog, i will describe how i used Canvas HTML element to generate graphs.

Canvas HTML element is used to create graph. Canvas HTML element is part of HTML 5 Specification. Hence, any browser that confirms to HTML 5 specification should be able to properly render the Canvas element. As of now Firefox(above 1.5v) and Opera supports this. IE doesn’t support this tag, but there is a workaround.

A snapshot of the line graph. Since, i have used random number generator for generating the values, the graph is more random.

This is the JavaScript source code, which generated the graph.

var graphArray;
function populateGraphArray() {
        //value can be anything from 0 to 100
 graphArray = new Array();
 var randomnumber;
 for (var i=0; i< 200 ; i++){
 	graphArray[i] = Math.floor(Math.random()*101);
 }
}

function drawGraph() {
      var canvas = document.getElementById("graphCanvas");
      var graphWidth = canvas.width;
      var graphHeight = canvas.height;
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 ctx.beginPath();
 //Draw the x and y axis
 ctx.lineWidth = 5;
 ctx.lineTo(0, 0);
 ctx.lineTo(0, graphHeight);
 ctx.lineTo(graphWidth, graphHeight);
 ctx.stroke();
 //Draw the Graph
 ctx.lineWidth = 1;
 ctx.strokeStyle='rgb(114, 172, 216)';
 var unitX;
 var unitY;
 if (graphHeight > 100)
 	unitY = Math.floor(graphHeight/100);
 else
 	unitY = Math.floor(100/graphHeight);
 if ( graphWidth > graphArray.length)
 	unitX = Math.floor(graphWidth/graphArray.length);
 else
 	unitX = Math.floor(graphArray.length/graphWidth);
 for (var i=0; i < graphArray.length; i++){
 	if (i==0)
 		ctx.moveTo(unitX*i, (graphHeight - (graphArray[i]*unitY)));
 	ctx.lineTo(unitX*i, (graphHeight - (graphArray[i]*unitY)));
 }
 ctx.stroke();
      }
}

“graphCanvas” is the Canvas element in the HTML page. The code is pretty simple if you go through the documentation on Canvas at Mozilla Developer Center.

Our logic just boils down to generate the x and y coordinate values, which usually will be a small algorithm.

You can also create a bar graph with just 2 lines of code change. The bar graph generated is..

The javascript code is

    function drawGraph() {
      var canvas = document.getElementById("graphCanvas");
   var graphWidth = canvas.width;
   var graphHeight = canvas.height;
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 	ctx.beginPath();
 	//Draw the x and y axis
 	ctx.lineWidth = 5;
 	ctx.lineTo(0, 0);
 	ctx.lineTo(0, graphHeight);
 	ctx.lineTo(graphWidth, graphHeight);
 	ctx.stroke();
 	//Draw the Graph
 	ctx.lineWidth = 1;
 	ctx.strokeStyle='rgb(80, 45, 46)';
 	var unitX;
 	var unitY;
 	if (graphHeight > 100)
 		unitY = Math.floor(graphHeight/100);
 	else
 		unitY = Math.floor(100/graphHeight);
 	if ( graphWidth > graphArray.length)
 		unitX = Math.floor(graphWidth/graphArray.length);
 	else
 		unitX = Math.floor(graphArray.length/graphWidth);
 	ctx.lineWidth = unitY;
 	for (var i=0; i < graphArray.length; i++){
 		ctx.moveTo(unitX*i, graphHeight);
 		ctx.lineTo(unitX*i, (graphHeight - (graphArray[i]*unitY)));
 	}
 	ctx.stroke();
      }
    }

References

• Mozilla Developer Center

Source Code Download

• Link