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

At this stage, we can render a simple line-graph using JavaScript and an HTML5 canvas element. Now about making it rich and interactive? We’ll need to add some mouse event handling. We’ll do something simple here: as the mouse moves along the x-axis of the graph we’ll find the current data point based solely on its x-position. This technique is more useful to an end-user and saves the calculation of finding how close a point is to a line segment.

Mouse events are still rather browser specific, so the calculations presented here to determine the offset of the mouse inside of the canvas are simplified and will not work in all scenarios.

<!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>

Published by

chadwick

Chad is a software developer from the Houston, Texas, 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 *