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
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
jqPlot Charts

Last accessed pages

  1. A simple script ActionScript 3 (4329)
  2. Read Excel file data in PHP - PhpExcelReader (96689)
  3. Register and show online users and visitors (39376)
  4. AJAX Course, free Lessons (19760)
  5. Sending data with GET and POST in the same request (7982)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (250)
  2. Read Excel file data in PHP - PhpExcelReader (90)
  3. PHP Unzipper - Extract Zip, Rar Archives (75)
  4. The Four Agreements (73)
  5. The Mastery of Love (66)