jQuery chart creation

Hi guys ,

Currently i am working with jQuery, the topic i didn't like at all. But i started working and find it intresting. Here i am going to show how to create Pie charts and Donut charts using jQuery. I hav created charts of my skills.

 

Jquery Code to create the Pie Chart:

<script type="text/javascript">

       $(document).ready(function () {

           var data = [['.NET', 100], ['EpiServer', 70], ['jQuery', 30], ['MVC', 50]];

           var s2 = [['A', 8], ['B', 12], ['C', 6], ['D', 9]];

           var s1 = [['a', 18], ['b', 12], ['c', 16], ['d', 19]];

           var options = {

               title: 'Technical Skills in Pie Chart',

               seriesDefaults: {

                   renderer: jQuery.jqplot.PieRenderer,

                   rendererOptions: {

                       showDataLabels: true,

                       dataLabels: 'label',

                       fill: true,

                       highlightMouseOver: true,

                       dataLabelThreshold: 10,  

                       sliceMargin:7,                  

                       dataLabelPositionFactor: 1             // To controls position of label on slice 

                       // dataLabelNudge :90                       To keep the labels away from the center in pixels                

                   }

               },

               legend: { show: true, location: 'ns' }

           };

           $.jqplot('chartDivId', [data], options);         // Pie Chart          

       });    

    </script>

• Similarly you can create Donut Chart just replace the rendered tag in above code with :                      renderer: $.jqplot.DonutRenderer

            To create these charts  First of all download the plugin for the jqPlot library from http://www.jqplot.com/index.php, its a free available library. You can see the examples also for some other type of charts from this following link:
                                                       http://www.jqplot.com/tests/


Thanx & Regards,
Pooja Dhingra