Available for new consulting projects — Get in touch

Charts in jQuery

1 min read 140 words

Table of Contents

Introducing Flotr, a new plugin for jQuery that will simplify adding charts to your pages. Unlike the Google Chart API, this plugin creates and manipulates charts on the fly.

This plugin was born from the author’s frustration, Ole Laursen, since other plugins weren’t smart enough. The advantage of this plugin over others is that it automatically adjusts the limits and scales according to the input values. An equivalent plugin, but for Prototype, is Plotr. This competition between Prototype and jQuery only benefits users.

$(function () {
   var d1 = [];
   for (var i = 0; i < 12; i += 1)
       d1.push([i, Math.round(20*Math.random()) + 1]);

   $.plot($("#placeholder"),
       [{
           data: d1,
           bars: { show: true }
       }]
   );
});

Bar Chart. The code needed to create it.

Scatter Plot with legend.

  * [**Official blog**](https://ole-laursen.blogspot.com/2007/12/flot-01-released.html)[****](https://people.iola.dk/olau/flot/examples/)
  * [**More examples**](https://people.iola.dk/olau/flot/examples/) - including real-time chart manipulation:
← Magic Objects CakePHP Plugins →