Sunday, December 1, 2013

Javascript Pie Charts using jQPlot

This article provides a sample implementation to draw charts using JavaScript solutions. jqPlot 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>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <link href="" type="text/css" rel="stylesheet"/>
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' }
    <h2>Top Mobile OS - 2013</h2>
    <div style="width:500px; height:300px;" id="mobile"/>

Contact Form


Email *

Message *

Back to Top