You Don’t Need Flash for Rich Graphs on a Web Page

Next, we’ll need some JavaScript to do the work of creating the actual graph display. First, we’ll need to get a reference to the canvas DOM element and then ask it for it’s 2D drawing context:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Rich Graph Example using HTML5's Canvas Element</title>
  </head>
  <body>
    <h1>Rich Graph Example using HTML5's Canvas Element</h1>
    <canvas id="graph1" width="500" height="200">
      This text is displayed if your browser sucks.
    </canvas>
  </body>
</html>

Next, we’ll need to define the raw data used to display the graph. We’re going to assume a set of CPU processor time measurements with 5-minute measurement intervals, much like you would see in Zenoss or other systems management application.

    // Raw data, such as what might come back from a server query.
    data = [
      { value: 9.9430, time: new Date(2010, 4, 9, 7, 50, 0, 0) },
      { value: 0.0000, time: new Date(2010, 4, 9, 7, 55, 0, 0) },
      { value: 0.0000, time: new Date(2010, 4, 9, 8, 00, 0, 0) },
      { value: 0.0000, time: new Date(2010, 4, 9, 8, 05, 0, 0) },
      { value: 5.5828, time: new Date(2010, 4, 9, 8, 10, 0, 0) },
      { value: 1.0000, time: new Date(2010, 4, 9, 8, 15, 0, 0) },
      { value: 25.3120, time: new Date(2010, 4, 9, 8, 20, 0, 0) },
      { value: 45.8210, time: new Date(2010, 4, 9, 8, 25, 0, 0) },
      { value: 98.3211, time: new Date(2010, 4, 9, 8, 30, 0, 0) },
      { value: 96.1290, time: new Date(2010, 4, 9, 8, 35, 0, 0) },
      { value: 94.9128, time: new Date(2010, 4, 9, 8, 40, 0, 0) },
      { value: 98.3219, time: new Date(2010, 4, 9, 8, 45, 0, 0) },
      { value: 32.4912, time: new Date(2010, 4, 9, 8, 50, 0, 0) },
    ];
 
    // Calculate the maximums in the provided data.
    var maxY = 0.0;
    for (var i = 0; i < data.length; i++) {
      maxY = Math.max(data[i].value, maxY);
    }
    var dataMaxY = Math.ceil(maxY);
    var dataMaxX = data.length;

Published by

chadwick

Chad is a software developer from Colorado, USA. He's been working in the software industry since the 1980s and presently works for Alert Logic, a provider of managed security-as-a-service solutions for the Cloud. He spends way too much time bicycling or playing with cars.

2 thoughts on “You Don’t Need Flash for Rich Graphs on a Web Page”

  1. A lot of the places talking about the various HTML5 elements talk about the various state of the browsers. The canvas tag is supported well by Firefox, so that’s the important thing for now 🙂

    @MIke Lunt

Leave a Reply

Your email address will not be published. Required fields are marked *