Jquery Course

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
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
jqPlot Charts

Last accessed pages

  1. Update and Delete in MySQL Table (1224)
  2. querySelector and querySelectorAll (26418)
  3. Constants and Operators (1124)
  4. SHA1 Encrypt data in JavaScript (28962)
  5. Multiple Select Dropdown List with JavaScript (12549)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (97)
  2. Read Excel file data in PHP - PhpExcelReader (80)
  3. SHA256 Encrypt hash in JavaScript (67)
  4. querySelector and querySelectorAll (49)
  5. SHA1 Encrypt data in JavaScript (49)