Bluff - JavaScript Graphs

If you want to display data in a graph dynamically in a web page, you have a few options. You can create your own library to create the Graph or use an existing one. If you decide against using the Google Chart API you may want to look into Bluff. Bluff is a JavaScript library that uses canvas (Google’s ExCanvas is used to allow Internet Explorer support) to create a graph on a web page.

Below is an example of a graph and the code that is used to create it.

        <canvas id="example"></canvas>
        
        <script type="text/javascript">
          var g = new Bluff.Line('example', 400);
          g.theme_37signals();
          g.title = 'My Graph';
        
          g.data('Apples', [1, 2, 3, 4, 4, 3]);
          g.data('Oranges', [4, 8, 7, 9, 8, 9]);
          g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
          g.data('Peaches', [9, 9, 10, 8, 7, 9]);
        
          g.labels = {0: '2003', 2: '2004', 4: '2005'};
        
          g.draw();
        </script>

You can download Bluff here.

You can read more about Bluff here.