Learning jQuery

Creating charts has always been a difficult and time taking task. But today I will show you how to create charts with ease using jQuery?. Yes, this is possible by using a jQuery plugin named "Sparklines" which allows to create/generate charts without any hassle.

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7, 8 & 9 as well as iOS and Android.

Basic syntax of plugin is,

//Code Starts
$(selector).sparkline(values, options);
//Code Ends

A very basic example will be,

//Code Starts
<span class="sparklines">1,2,3,4,5,4,3,2,1</span>
<span id="ticker">Loading..</span>

<script type="text/javascript">
    $('.sparklines').sparkline('html');
    $('#ticker').sparkline([1,2,3,4,5,4,3,2,1]);
</script>
//Code Ends

To create charts using this plugin, you need to take care of following things,

• The jQuery javascript library loaded into the page - At least version 1.4.3 or higher
• A copy of jquery.sparkline.js loaded into the page which you can download from this site
• An inline tag on the page within which to display the sparkline (eg. <span> )
• A call to the sparkline() function to actually display the sparkline.

Feel free to contact me for any help related to jQuery, I will gladly help you.