• 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:
• 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:
• 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:
• 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:
• 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:
• The jqPlot home page is at: http://www.jqplot.com/