Recently, we’ve had a lot of clients asking us for more ways to visually represent their data on their website, and that got us looking into different reporting and graph options out there.
We stumbled across jQuery.Sparkline, a fantastic plugin that allows you to represent micro-bursts of data in small graphs on your website. The plugin is highly customisable and very simple to get setup on any pages with a variety of different data.
The graphs produced are dynamically generated using jQuery through just a single line of code, well, for a typical setup anyway. To get started, you will need to include jQuery and the Sparkline JS file.
Now you can fire off the plugin using:
We’ve setup Sparkline to use the HTML element content as the values for the graph, so you can load your graphs using:
Once your page has loaded, you’ll get the following line chart:
If you want to change the graph type, you can pass through custom options as the second parameter. The first parameter is the ‘values’ that you want to use to produce the graphs. If you want to keep it using the HTML values, you can pass in the value ‘html’:
The above code will produce the following
For a complete list of options you can pass through, view the official documentation here: http://omnipotent.net/jquery.sparkline/#s-docs