Visual Graphing in JavaScript Continued (Part II)

John Resig released his project, Processing.js, earlier this week. This project aims to bring Flash like graphics and visual effects to JavaScript using the Canvas tag and a JavaScript compiler for Processing Language. The demos are amazing and causing quite a lot of buzz. Processing.js also provides an opportunity to improve the JavaScript Graphing system that I have been working on. However, that is a project for another day.

For today, lets take a look at the improvements I have made on the code for Visual Graphing in JavaScript. You can play with the new code at the Grapher Beta Test Page. You will immediately notice that there is now a title and legend for the graph, and extra buttons beneath the graph. The legend and title can be controlled by setting additional configuration properties:

Example 1: New Configuration Properties

config.title = config.title || ;
config.defaultColor = config.defaultColor || #000;
config.defaultLabel = config.defaultLabel || Line 1;
config.hasLegend |= false;

If you want your graph to have a title, you simply need to set the title property, and it will be automatically rendered. You can update the title, by calling the new global method, updateTitle on an instance of the Grapher object. I have also introduce line coloring and labeling; set the defaultColor and defaultLabel to override the initial values. For the legend and line labels to appear, you need to set the hasLegend property to true, automatically rendering the legend.

The Grapher object now also allows one to draw any number of lines on the same graph. The internal points Array has been converted to a pointSet Array, which is a collection of Objects containing the configuration and collection of points for each line. The public exec method has been updated to support the legend, line coloring, and multiple lines:

Example 2: Changes to exec

exec: function(eq, isNew, color, label) {
    if (! isNew) {
        clearPoints();
        clearLegend();
    }

    var o = {color: color || config.defaultColor, equation:eq, label: label || Line  + (pointSet.length + 1), points: []};
    pointSet[pointSet.length] = o;
    drawLine(eq, o.points, color);

    if (config.hasLegend) {
        addLegendLabel(o.label, o.color);
    }
},

In addition to the eq parameter, there is now 3 others: isNew should be set to true when this should be added to the existing graph, otherwise the existing graph will be replaced with the provided equation and only that equation; color is the color you would like the new line to be set to; and label is the label to add to the legend for the line, assuming the configuration hasLegend is true.

The new Grapher Beta Test Page has 3 new buttons in order to test some of the new features. The first button, now Draw 1 Line, behaves as the old demo page did. The second button, Add new Line, adds a new line to the current graph (I have set it to generate a random color). The third button, Redraw, calls the public redraw method, and is used to test that the graph is properly redrawn. The last button, Reset, returns the graph to its initialized state.

As I see it, there are three improvements still required before I can call this project complete: 1) validating the equation before eval to prevent hacking attempts and broken logic, 2) additional configuration properties so that one has greater control over graph, and 3) experiment with using Processing.js to handle the graph rendering.