About the script
This page gives examples with code of various different configurations that the MultiGraph script can accept. See also my graphical calculator for an example of what awesome things you can do with this script.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
What it does
This graphing tool uses JavaScript to produce basic HTML and CSS1/2, nothing more. No images are required. Due to the limitations of HTML and CSS, only basic rectangular shapes can be made (without significant work reproducing a display pixel by pixel). Using these basic shapes, I have produced bar / column graphs and scatter graph points, as well as the scale markings. Producing graphs requires a lot of mathematics to calculate positions of bars, scales, scale markings, dots and headings, making this JavaScript header file one of the largest I have written. Even so, it is only about 20 KB, and can produce over five complex graphs per second, even on a slow computer. About ¼ of the script is devoted to detecting mistakes in the way that you specify the graph, and providing helpful warnings, without bombarding viewers with message popups.
Why should you use it
Many sites require the ability to display graphs. The usual way to do this is to create the graph using a package such as Microsoft Excel, and then save the graph as a GIF or worse, a JPEG image. Sometimes, complex server programs are used that dynamically interpret data and create an image of the graph. Although using optimised PNG images can reduce the size of a graph to about 2.5 KB, these techniques are somewhat restricted. They rely on each graph being created by hand, or for the server-side processing to be available. Although GIF and PNG images are significantly smaller than this script, images are a cumbersome way to create graphs, as they need to be re-created for even the slightest change. Also, once a number of graphs have been used, the total file size of the images becomes much greater than this script.
Using this script, virtually no load is placed on the server, and the graphs can be viewed in almost all modern browsers, even in many browsers for the blind, where the title attributes convert the graph into useable information, something that is very hard to do with images. Updating the graphs becomes easy with changes made possible using simple changes to the graph definition. Although not a fool-proof way (script support is required), the ease of use makes this script ideal for most online graphing needs.
What do you need to do to use it
All you need to do is to specify the parameters of the required graph, and the script will draw it for you. I have provided several examples, walking you through what you need to do to create a graph that suits your needs. New code in each example is marked in bold in modern browsers.
Note that in modern browsers, hanging the mouse cursor over the bars / dots on the graph shows the data that the bar / dot represents in a tooltip or in the status bar. In most modern browsers (not Netscape 4), you can also click the graph bars / dots to show the same information in a message box.
Note; if you want to print the graphs, you will probably need to enable printing of backgrounds in your browser.
Document HTML configuration
The document head contains:
<head>
<style style="text/css">
/* this is ignored by Netscape 4 */
table.mwjgraph { border: 2px solid #000; }
</style>
<title>
Document title
</title>
<script src="multigraph.js" type="text/javascript" language="javascript1.2"></script>
</head>The body contains the following wherever a graph is required:
<script type="text/javascript">
... Graph configurations go in here - see the script provided with each example ...
</script>Basic bar chart configuration scripts
Basic bar graph
Firstly create a new object of type MWJ_graph. Set the width of the graph area to 400 pixels. Set the height of the graph area to 300 pixels.
Set the graph type to MWJ_bar and accept defaults for other options. It is VERY important to use
var variableName = new MWJ_graph( ...etc... );
and not
var variableName = MWJ_graph( ...etc... );
Then provide one dataset, making the bars blue. Make the label for that dataset (used if a legend is shown) 'Blue title' - 'Untitled' will be used if no title is provided. The data is provided as an array [10,2,15,37]. As with the scatter graph, this type of graph also accepts negative numbers.
Finally, tell the script to draw the graph.
var g = new MWJ_graph(400,300,MWJ_bar,false,false);
g.addDataSet('#000099','Blue title',[10,2,15,37]);
g.buildGraph();Bar graph with several data sets
var g = new MWJ_graph(400,300,MWJ_bar,false,false);
g.addDataSet('#000099','Blue title',[10,2,15,37]);
g.addDataSet('#009900','Green title',[-51,2,-36,-22]);
g.addDataSet('#990099','Purple title',[14,4,23,-34]);
g.addDataSet('#990000','Red title',[22,-46,44,-2]);
g.buildGraph();Add a legend to say what's what
var g = new MWJ_graph(400,300,MWJ_bar,true,false);
g.addDataSet('#000099','Blue title',[10,2,15,37]);
g.addDataSet('#009900','Green title',[-51,2,-36,-22]);
g.addDataSet('#990099','Purple title',[14,4,23,-34]);
g.addDataSet('#990000','Red title',[22,-46,44,-2]);
g.buildGraph();Label the axis and the graph
var g = new MWJ_graph(400,300,MWJ_bar,true,false);
g.addDataSet('#000099','Blue title',[10,2,15,37]);
g.addDataSet('#009900','Green title',[-51,2,-36,-22]);
g.addDataSet('#990099','Purple title',[14,4,23,-34]);
g.addDataSet('#990000','Red title',[22,-46,44,-2]);
g.setTitles('Graph Title','X axis title','Y axis title');
g.buildGraph();Label the columns
var g = new MWJ_graph(400,300,MWJ_bar,true,false);
g.addDataSet('#000099','Blue title',[10,2,15,37]);
g.addDataSet('#009900','Green title',[-51,2,-36,-22]);
g.addDataSet('#990099','Purple title',[14,4,23,-34]);
g.addDataSet('#990000','Red title',[22,-46,44,-2]);
g.setTitles('Graph Title','X axis title','Y axis title');
g.setXAxis('January','February','March','April');
g.buildGraph();Set the scale stepping
var g = new MWJ_graph(400,300,MWJ_bar,true,false);
g.addDataSet('#000099','Blue title',[10,2,15,37]);
g.addDataSet('#009900','Green title',[-51,2,-36,-22]);
g.addDataSet('#990099','Purple title',[14,4,23,-34]);
g.addDataSet('#990000','Red title',[22,-46,44,-2]);
g.setTitles('Graph Title','X axis title','Y axis title');
g.setXAxis('January','February','March','April');
g.setYAxis(15);
g.buildGraph();Rotate the axis by 90 degrees
var g = new MWJ_graph(400,300,MWJ_bar,true,true);
g.addDataSet('#000099','Blue title',[10,2,15,37]);
g.addDataSet('#009900','Green title',[-51,2,-36,-22]);
g.addDataSet('#990099','Purple title',[14,4,23,-34]);
g.addDataSet('#990000','Red title',[22,-46,44,-2]);
g.setTitles('Graph Title','X axis title','Y axis title');
g.setXAxis('January','February','March','April');
g.setYAxis(15);
g.buildGraph();Colour the graph background
var g = new MWJ_graph(400,300,MWJ_bar,true,true,'#ffee99');
g.addDataSet('#000099','Blue title',[10,2,15,37]);
g.addDataSet('#009900','Green title',[-51,2,-36,-22]);
g.addDataSet('#990099','Purple title',[14,4,23,-34]);
g.addDataSet('#990000','Red title',[22,-46,44,-2]);
g.setTitles('Graph Title','X axis title','Y axis title');
g.setXAxis('January','February','March','April');
g.setYAxis(15);
g.buildGraph();Stacked bar chart configuration scripts
The stacked bar chart accepts the same configuration options as the basic bar chart. A minimum of two datasets are required. It stacks these on top of each other so that the total can easily be seen.
Unlike the basic bar chart, the stacked bar chart cannot accept negative values.
Full stacked bar chart example
var g = new MWJ_graph(400,300,MWJ_stacked,true,false);
g.addDataSet('#000099','Blue title',[10,2,15,37]);
g.addDataSet('#009900','Green title',[51,2,36,22]);
g.addDataSet('#990099','Purple title',[14,4,23,34]);
g.addDataSet('#990000','Red title',[22,46,44,2]);
g.setTitles('Graph Title','X axis title','Y axis title');
g.setXAxis('January','February','March','April');
g.setYAxis(15);
g.buildGraph();Relative percentage bar chart configuration scripts
The relative percentage bar chart accepts the same configuration options as the basic bar chart except that setYAxis must not be used (the Y axis always displays 0% to 100%). It displays all values as a percentage of the total value of all datasets for that column, with the bars stacked on top of each other. A minimum of two datasets are required.
Unlike the basic bar chart, the relative percentage bar chart cannot accept negative values.
Full relative percentage bar chart example
var g = new MWJ_graph(400,300,MWJ_relative,true,false);
g.addDataSet('#000099','Blue title',[10,2,15,37]);
g.addDataSet('#009900','Green title',[51,2,36,22]);
g.addDataSet('#990099','Purple title',[14,4,23,34]);
g.addDataSet('#990000','Red title',[22,46,44,2]);
g.setTitles('Graph Title','X axis title','Y axis title');
g.setXAxis('January','February','March','April');
g.buildGraph();Scatter graph configuration scripts
The scatter graph accepts the same configuration options as the basic bar chart, except that setXAxis now accepts a scale stepping value, just like setYAxis. Also, the axis cannot be rotated. It displays all values as dots on a two dimensional graph.
Because the scatter graph requires both X and Y values for each dataset entry, the array entries in the addDataSet instruction must now contain an array of X,Y values. Unlike the other types of graph, the scatter graph does not require the same number of entries in each dataset array (in this example, I have added in two extra x,y pairs in the blue dataset).
The scatter graph accepts negative values on both axis.
Full scatter graph example
var g = new MWJ_graph(400,300,MWJ_scatter,true,false);
g.addDataSet('#000099','Blue title',[[50,42],[2,-36],[15,20],[37,30],[7,-14],[65,49]]);
g.addDataSet('#009900','Green title',[[-31,-20],[2,5],[-36,-10],[-22,-15]]);
g.addDataSet('#990099','Purple title',[[ -14,12],[4,-5],[23,-10],[-34,10]]);
g.addDataSet('#990000','Red title',[[72,22],[-26,37],[44,27],[-2,37]]);
g.setTitles('Graph Title','X axis title','Y axis title');
g.setXAxis(20);
g.setYAxis(15);
g.buildGraph();Full example
<html>
<head>
<style style="text/css">
table.mwjgraph { border: 1px dashed #009; }
</style>
<title>
Test results
</title>
<script src="multigraph.js" type="text/javascript" language="javascript1.2"></script>
</head>
<body>
<h1>
Test results
</h1>
<script type="text/javascript" language="javascript1.2">
var myGraph = new MWJ_graph(350,220,MWJ_bar,true,false,'#ddeeff');
myGraph.addDataSet('#dd7700','Pellway River',[26,18,15,9]);
myGraph.addDataSet('#00aacc','Knotrum River',[7,8,10,15]);
myGraph.addDataSet('#773311','Dovedip Lake',[14,13,10,11]);
myGraph.addDataSet('#00cc44','Trapper Canal',[6,6,7,8]);
myGraph.setTitles('Trout fishing results','Year','Number caught');
myGraph.setXAxis('1998','1999','2000','2001');
myGraph.setYAxis(5);
myGraph.buildGraph();
</script>
</body>
</html>This produces:
Test results