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.

jQuery Sparkline Plugin - Web Design and Development

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.

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.sparkline.js"></script>

Now you can fire off the plugin using:

<script type="text/javascript">
    $(function() {
        /** This code runs when everything has been loaded on the page */
        /* Inline sparklines take their values from the contents of the tag */
        $('.sparkline).sparkline();
    });
</script>

We’ve setup Sparkline to use the HTML element content as the values for the graph, so you can load your graphs using:

<span class="sparkline">1,1,2,3,5,8,13,21,34</span>

Once your page has loaded, you’ll get the following line chart:

jQuery Sparkline Plugin

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’:

<script type="text/javascript">
    $(function() {
        var values = [10,8,5,7,4,4,1];
        /* The second argument gives options such as chart type */
        $('.dynamicbar').sparkline(values, {
             type: 'bar',
             barWidth: 5, 
             barColor: '#108e0e'
        });
        /* Use 'html' instead of an array of values to pass options 
        to a sparkline with data in the tag */
        $('.inlinebar').sparkline('html', {
             type: 'bar', 
             barColor: '#f04040'
        });
    });
</script>

The above code will produce the following

jQuery Sparkline Web Design Plugin

For a complete list of options you can pass through, view the official documentation here: http://omnipotent.net/jquery.sparkline/#s-docs

0
Ignite your brand, utilise user-generated content no matter where you or your audience are ›