Area Plot with Legend
Bar chart
Simple Pie chart
Meter Gauge chart

jqPlot is a Free and Open Source plotting plugin for the jQuery framework. jqPlot generates pure client-side javascript charts and graphs in web page, with many features including:
Line charts, Bar charts, Pie charts, Area Charts, Pyramid Charts, Bubble Charts, Rotated axis text, Candlestick charts; with customize colors, animation, shadows, markers, ticks, tooltips and data point highlighting.
- jqPlot contains a very good API and Usage Documentation,winth Examples and Source Code (some codes has errors). jQuery is included in the distribution.


• To DOWNLOAD this script, click: (1.7 MB).

Examples jqPlot Charts

Here is a few examples of charts created with jqPlot.

1. First, to use jqPlot, include these files in your web page: jquery library, the jqPlot jQuery plugin, jqPlot css file and optionally the excanvas script for IE versions below 9 (IE 9+ includes native support for the canvas element and does not require excanvas).
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
2. Add an empty container (html tag) in your web page where you want the chart to show up, defining a width and a height.
<div id="chartdiv" style="height:400px;width:300px; ">Here the chart is dislayed.</div>
3. Then, create the script with the plot by calling the $.jqplot() function with the ID of your container and some data. You can customize the plot by passing options to the $.jqplot() function (options are described in the Usage Documentation).
- The first parameter of the $.jqplot() function is the ID of the HTML element in which the chart is dislayed. The second argument is a multi-dimensional array with chart data /values (in JSON format). The third parameter is a JSON object with additional options.
<script>
$(document).ready(function() {
  var chart_data = [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]];
  var chart_opt = {
    title:'Exponential Line',
    axes:{yaxis:{min:-10, max:240}},
    series:[{color:'#5FAB78'}]
  };
  $.jqplot('chartdiv', chart_data, chart_opt);
});
</script>
Will produce a chart like this:
Line Chart

Area Plot with Legend, Stroked Line and Fill Transparency.
<div id="chart1" style="width:360px;height:270px;"></div>
<script>
$(document).ready(function() {
  var chart_data = [
    [[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[19,200.9]],
    [[2, 12],[8,15.16],[1,8.1],[13,38.6],[15,75.9],[19,110],[22,88]]
  ];
  var labels = ['Rural', 'Urban'];
  var chart_opt = {
    title:'Area Chart with Transparency',
    seriesDefaults:{
      fill: true,
      fillAndStroke: true,
      fillAlpha: 0.5,
      shadow: false
    },
    legend: {
      show: true,
      placement: 'outside',
      labels: labels,
      location: 'ne'
    },
    axes:{yaxis:{min:-10, max:240}, xaxis:{min:0, max:24}},
  };
  $.jqplot('chart1', chart_data, chart_opt);
});
</script>
Results a chart like this:
Area Chart

Bar chart, with legend to bottom of the chart. This plot requires these additionals files (located in "plugins/" directory): jqplot.barRenderer.min.js, jqplot.categoryAxisRenderer.min.js, and jqplot.pointLabels.min.js.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jqPlot Charts - Bar</title>
<meta name="description" content="Resource from http://CoursesWeb.net/ , web programming, development courses" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
</head>
<body>
<div id="chart2" style="width:360px;height:300px;"></div>
<script>
$(document).ready(function() {
  var chart_data = [ [2, 6, 7, 10], [7, 5, 3, 2] ];
  var ticks = ['a', 'b', 'c', 'd'];
  var labels = ['MarPlo.net', 'CoursesWeb.net'];
  var chart_opt = {
    title:'Bar Chart',
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      pointLabels: { show: true }
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ticks
      }
    },
    legend: {
      show: true,
      placement: 'outsideGrid',
      labels: labels,
      location: 's'
    },
  };

$('#chart2').bind('jqplotDataHighlight',
  function (ev, seriesIndex, pointIndex, data) {
    $('#info2').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
  }
);
   
$('#chart2').bind('jqplotDataUnhighlight',
  function (ev) {
    $('#info2').html('Nothing');
  });
  $.jqplot('chart2', chart_data, chart_opt);
});
</script>
</body>
</html>
Results a chart like this:
Bar Chart

Simple Pie chart, with legend. This plot requires the additional "jqplot.pieRenderer.min.js" file (located in "plugins/" directory).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jqPlot Charts - Pie</title>
<meta name="description" content="Resource from http://CoursesWeb.net/ , web programming, development courses" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
</head>
<body>
<div id="chart3" style="width:360px;height:300px;"></div>
<script>
$(document).ready(function() {
  var chart_data = [
    [['Verwerkende', 7], ['Consument', 5], ['Retail', 0], ['Bewerkende', 3]]
  ];
  var chart_opt = {
    title:'Pie Chart',
    seriesDefaults:{
      renderer:$.jqplot.PieRenderer,
       rendererOptions: {
      startAngle: 180,
      sliceMargin: 4,
      showDataLabels: true } 
    },
    legend: {
      show: true,
      location: 'e'
    },
  };

  $.jqplot('chart3', chart_data, chart_opt);
});
</script>
</body>
</html>
Results a chart like this:
Pie Chart

Meter Gauge chart, with custom colors. This plot requires the additional "jqplot.MeterGaugeRenderer.min.js" file (located in "plugins/" directory).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jqPlot Charts - Meter Gauge</title>
<meta name="description" content="Resource from http://CoursesWeb.net/ , web programming, development courses" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.MeterGaugeRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
</head>
<body>
<div id="chart4" style="width:360px;height:300px;"></div>
<script>
$(document).ready(function() {
  var chart_data = [ [320] ];
  var chart_opt = {
    title:'Meter Gauge Chart',
    seriesDefaults:{
      renderer:$.jqplot.MeterGaugeRenderer,
       rendererOptions: {
         min: 100,
         max: 500,
         intervals:[200, 300, 400, 500],
         intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666']
       }
    }
  };

  $.jqplot('chart4', chart_data, chart_opt);
});
</script>
</body>
</html>
Results a chart like this:
Meter Gauge Chart

• The jqPlot home page is at: http://www.jqplot.com/

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
jqPlot Charts

Last accessed pages

  1. The Rise Of Atlantis (12132)
  2. JavaScript code and PHP (19892)
  3. Insert, Select and Update NULL value in MySQL (25324)
  4. innerHTML in PHP (6400)
  5. Bubbles3 (52204)

Popular pages this month

  1. Flash Games - Free online Games (1930)
  2. Qwop (1474)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1331)
  4. Tunnel Rush (1259)
  5. Drag Racer V3 (979)