HTML5 Goodies

CanvasText :: Bar graph :: Line graph :: Pie chart :: Scatter graph :: CanvasTag
Canvases and text :: A radar chart :: A donut chart:: A dual bar graph

Warning: The only browser these examples seem to work fully on is Firefox.

HTML5 canvas Line charts

Similar to the bar chart, but a line as opposed to bars. Simple really. Can be used to better illustrate trends for some sets of data.

For some reason this doesn't seem to work in IE7 even with the compatibility script, so you'll need to use either Firefox, Opera or Safari.

The LineChart.js is dragged in using this:

<script type="text/javascript" src="LineChart.js"></script> This is the fallback HTML that is shown if the browser doesn't support the canvas tag. If you're seeing this, then you're probably using IE7. You need to use something else.

This rather nice curve is produced with the following Javascript:

<script type="text/javascript">
<!--
    // This dataset results in what looks like a nice curved line
    data = [0,1,3,6,10,15,21,28,36,45,55,66,78,91,105,120,136,153,171,190,210,231,253,276,300];
    line = new LineChart(document.getElementById("myLineChart"), data);
    line.tickMarks = 'circle';
    line.Draw();
// -->
</script>

This graph is produced with the following code. The text (since canvii don't do text) is produced using CSS positioning.

<script type="text/javascript">
<!--
    data2 = [56,45,78,32,35,65,66,41,54,23,29,38];
    line2 = new LineChart(document.getElementById("myLineChart2"), data2);
    line2.tickMarks = 'endcircle';
    line2.barColor1 = '#fff';
    line2.barColor2 = '#fff';
    line2.lineColor = '#f00';
    line2.backgroundGrid = 0;
    line2.Draw();
// -->
</script>

<div style="position: relative">
    <canvas width="600" height="250" id="myLineChart2">
        This is the fallback HTML that is shown if the browser doesn't support the canvas tag.
    </canvas>

    <div style="position: absolute; top: 220; left: 160px; font-family: Arial; font-weight: bold">
        This is some text positioned using CSS
    </div>
</div>

This is the fallback HTML that is shown if the browser doesn't support the canvas tag. If you're seeing this, then you're probably using IE7. You need to use something else.

A blue line graph. How wonderful.

<script type="text/javascript">
<!--
    data3 = [90,70,90,89,78,99,77,22,0,0];
    line3 = new LineChart(document.getElementById("myLineChart3"), data3);
    line3.tickMarks = 'endsquare';
    line3.barColor1 = '#fff';
    line3.barColor2 = '#fff';
    line3.lineWidth = 2;
    line3.lineColor = '#00f';
    line3.backgroundGrid = true;
    line3.gridColor = '#efefef';
    line3.Draw();
// -->
</script>

This is the fallback HTML that is shown if the browser doesn't support the canvas tag. If you're seeing this, then you're probably using IE7. You need to use something else.

<script type="text/javascript">
<!--
    data4 = [70, 95];
    line4 = new LineChart(document.getElementById("myLineChart4"), data4);
    line4.tickMarks = 'endcircle';
    line4.barColor1 = '#fff';
    line4.barColor2 = '#fdd';
    line4.lineWidth = 2;
    line4.lineColor = '#f00';
    line4.backgroundGrid = false;
    line4.Draw();
// -->
</script>

Download

You can download the Javascript file from the downloads area.