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 a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
jqPlot Charts

Last accessed pages

  1. Select in MySQL, Output results in HTML Table (1419)
  2. Golf Putt It In (739)
  3. Disable button and Enable it after specified time (5129)
  4. Flash Games - Free online Games (22975)
  5. Move image from an element /tag to another (1637)

Popular pages this month

  1. Qwop (3219)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2547)
  3. Get the value of the selected /checked checkboxes in a form (1608)
  4. Insert, Select and Update NULL value in MySQL (1423)
  5. Add, Change, and Remove Attributes with jQuery (1301)