Sunday, December 1, 2013

Javascript Pie Charts using jQPlot

This article provides a sample implementation to draw charts using JavaScript solutions. jqPlot http://www.jqplot.com/ is a versatile and expandable jQuery plotting plugin and supports pure client side Javascript charts. jqPlot support numerous chart style and options. It is free and open sourced under GPL/ MIT license.
Pie chart demo

HTML implementation

<!DOCTYPE html>
<html>
  <head>
    <script src="https://sites.google.com/site/sourcetricksexamples/downloads/jquery.min.js"></script>
    <script src="https://sites.google.com/site/sourcetricksexamples/downloads/jquery.jqplot.min.js"></script>
    <script src="https://sites.google.com/site/sourcetricksexamples/downloads/jqplot.pieRenderer.min.js"></script>
    <link href="https://sites.google.com/site/sourcetricksexamples/downloads/jquery.jqplot.min.css" type="text/css" rel="stylesheet"/>
    <script>
$(document).ready(function(){
var data = [
    ['Android', 75],['iOS', 15],['Windows Phone', 2], 
    ['BlackBerry', 4],['Others', 4]
  ];
  var plot1 = jQuery.jqplot ('mobile', [data], 
    { 
      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true
        }
      }, 
      legend: { show:true, location: 'e' }
    }
  );
});
    </script>
  </head>
  <body>
    <h2>Top Mobile OS - 2013</h2>
    <div style="width:500px; height:300px;" id="mobile"/>
  </body>
</html>

Contact Form

Name

Email *

Message *

Back to Top