Below is a demo of an early version of my JavaScript graphing engine. The graphs are drawn using the proposed HTML5 canvas functionality. Text, which could not be drawn into early releases of the canvas functionality in most browsers, is placed as needed using absolutely positioned div elements. canvas functionality is brought to Internet Explorer (which otherwise doesn't support it) using the excanvas script which emulates the canvas functionality using a combination of JavaScript and Microsoft's Vector Markup Language (VML). Note that various elements of the graphing engine (such as labeling the axis on line graphs) have not been implemented yet.
Im also still trying to determine what the most convient way (or ways) is (or are) for setting up the graph data. It seems the graphing engine would be of the most use in cases where the graph data is dynamic. I was thinking of making it easy to populate graph data through JSON, but for the moment data is just added using the graph methods as shown in the examples.
The script to set up the line graph in this example is as follows:
var lineGraph = new LineGraph("Sample Line Graph");
var group1 = new Group("Data1",Color.BLUE);
group1.addPoints([[0,-5],[1,-1.5],[2,0.5],[3,4],[4,5],[5,7.5]]);
var group2 = new Group("Data2",Color.GREEN);
group2.addPoints([[0,-1],[1,3],[2,3.5],[3,3.5],[4,4],[5,5.5]]);
lineGraph.addGroup(group1);
lineGraph.addGroup(group2);
var renderer1 = new LineGraphRenderer(lineGraph,"c1"); // "c1" is the id of the canvas tag
Some other methods of interest, some of which are used when clicking the checkboxes and buttons below, include:
lineGraph.setShowPoints(boolean); lineGraph.setShowLines(boolean); lineGraph.setFillAreaUnderLine(boolean); // only has effect if showing lines also renderer1.drawBase(); // clears canvas and draws axis and grid lines (if enabled) renderer1.plot(groupIndex); // draw only the group with given groupIndex renderer1.draw(); // draw everything renderer1.initialize(); // should be called if graph points change; called automatically in most cases
The script to set up the line graph in this example is as follows:
var pieGraph = new PieGraph("Sample Pie");
pieGraph.addPiece("Data 1",124,Color.RED);
pieGraph.addPiece("Data 2", 55,Color.GREEN);
pieGraph.addPiece("Data 3",215,Color.BLUE);
var renderer2 = new PieGraphRenderer(pieGraph,"c2"); // "c2" is the id of the canvas tag
Some other methods of interest include:
pieGraph.setShowLabels(boolean); // false by default pieGraph.setShowPercentages(boolean); // true by default renderer2.draw(); // draw everything