JavaScript Charts

by Joe Gillespie — Mar 1, 2000

Charts don't have to be static GIF files, here are some ideas for manipulating graphics using JavaScript to produce dynamic and stunning charts and graphs. You feed them the raw data, and they draw themselves.

By manipulating the height value of an image, it is possible to produce graphs and charts dynamically. This function takes the Y-axis value (h), scales it to fit a given height, and document.writes it into a table cell in the specified color (c).

function drawBar(h,c)
{
h=10+(h*168/700);
var graph="<img src='rollover/" +c+ ".gif' width='20'
height='"+h+"'>"
document.write(graph);
}
It is called from within the cell like this drawBar(450,"red");

The individual bars are small GIF files in various colors. The next page shows a very basic application of the technique that only draws the bars. With a little more work, it would be possible to draw the whole graph including the title, the axis values and to vary the bar widths and spacing You could also do horizontal bars by varying the width of the GIFs instead of the height. See this in action on the survey stats page.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float