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 Bar charts

The BarChart.js is included using this:

<script type="text/javascript" src="BarChart.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.

The canvas tag for this is:

<canvas width="600" height="250" id="myBarChart">
    <span style="color: red">
        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.
    </span>
</canvas>


And the Javascript is:

<script type="text/javascript">
<!--
    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];
    bar = new BarChart(document.getElementById("myBarChart"), data);

    gradient = bar.context.createLinearGradient(0,0,0,450);
    gradient.addColorStop(0, '#f66');
    gradient.addColorStop(0.5, '#ff0');

    bar.ShowGrid(1);
    bar.SetGridColor('#fee');
    bar.SetBarColor(gradient); // The actual bars
    bar.SetBarColors('#fdd', '#fcc'); // The background bars
    bar.SetYTickGap(20);
    bar.SetSmallYTickSize(3);
    bar.SetLargeYTickSize(5);
    bar.SetMargin(3);
    bar.SetBarColor(gradient);
    bar.SetOutlineColor('#666');
    bar.ShowLine(false);
    bar.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.

The canvas tag for this is the same:

<canvas width="600" height="250" id="myBarChart2">
    <span style="color: red">
        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.
    </span>
</canvas>


The Javascript is similar:

<script type="text/javascript">
<!--
    data2 = [45,31,33,63,56,74,15,52,41,46,78,86,32,12];
    bar2 = new BarChart(document.getElementById("myBarChart2"), data2);
    bar2.SetBarColors('#eee', '#eee');
    bar2.SetBarColor('#ccc');
    bar2.SetOutlineColor('#333');
    bar2.ShowGrid(false);
    bar2.ShowLine(true);
    bar2.Draw();
// -->
</script>

Similar graph types

I might also create a "stacked bar". Similar to a pie chart, but a bar. Like a pie chart it would be best for showing something as a part of a whole, ie percentages.

Download

If you want the source, it's all Javascript so you can view source to get the code, along with downloading the actual bar cart class here.