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 https://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 https://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 https://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 renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
jqPlot Charts

Last accessed pages

  1. Using fadeIn and fadeOut (1284)
  2. JavaScript code and PHP (20343)
  3. Bind Tool and Control Points (2776)
  4. SHA1 Encrypt data in JavaScript (8116)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (52434)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (397)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (316)
  3. Register and show online users and visitors (292)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (276)
  5. Insert, Select and Update NULL value in MySQL (182)