Create Bar Graph, Line Plot and Pie Chart using jqPlot

jqPlot is a jQuery plugin to create eye catching charts in your web sites. It’s versatile and expandable. You can create very nice line plotting, bar graphs or pie charts easily. You can choose from various styles and options as per your requirements. It uses client-side JavaScript so you don’t have to install anything extra on the server. Moreover, it’s free and open source.

Here I’m testing an example with Bar Graph.

Bar Chart

Graph container:

<div id="chart1" style="margin-top: 20px; margin-left: 20px; width: 300px; height: 300px;"></div>

The height and width of the graph can be adjusted from style options.

jQuery script:

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){         $.jqplot.config.enablePlugins = true;         var s1 = [26, 35];         var ticks = ['Grade IX', 'Grade X'];         plot1 = $.jqplot('chart1', [s1], {             // Only animate if we're not using excanvas (not in IE 7 or IE 8)             animate: !$.jqplot.use_excanvas,             seriesDefaults:{                 renderer:$.jqplot.BarRenderer,                 pointLabels: { show: true }             },             axes: {                 xaxis: {                     renderer: $.jqplot.CategoryAxisRenderer,                     ticks: ticks                 }             }, 			seriesColors: [ "#8E73B2"],   			title: 'Student Chart',      // Title for the plot.               highlighter: { show: false }         });     });
// ]]></script>

Click the link below to check my example on bar graph.

Click here to visit the jqPlot website where you can get all types of examples and files.

Be Sociable, Share!
You can leave a response, or trackback from your own site.

Leave a Reply

CommentLuv badge

Powered by WordPress