JavaScript Graphing Engine

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.


Line Graphs

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
Show Points
Show Lines
Fill Area Under Lines


Pie Charts

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