{"id":1610,"date":"2012-06-27T09:01:27","date_gmt":"2012-06-27T16:01:27","guid":{"rendered":"http:\/\/juixe.com\/techknow\/?p=1610"},"modified":"2012-06-27T09:25:42","modified_gmt":"2012-06-27T16:25:42","slug":"javascript-charting-library-jqplot-bar-graph","status":"publish","type":"post","link":"http:\/\/juixe.com\/techknow\/index.php\/2012\/06\/27\/javascript-charting-library-jqplot-bar-graph\/","title":{"rendered":"Using JavaScript Charting Library jqPlot with Bar Charts"},"content":{"rendered":"

jqPlot<\/a> is a plugin for the jQuery JavaScript framework used to generate awesome looking charts and graphs. Even though it has a lot of features and supports many chart types it is incredibly easy to use. To create a simple chart you will use will use something like the following template.<\/p>\n

\r\n$.jqplot(divId, dataArray, optionsObject);\r\n<\/pre>\n
In the above example, divId is the String object containing the name of the div on which to draw the chart.  The dataArray variable will hold the data for the chart and the optionsObject will have configuration properties used to display the chart.<\/p>\n
Getting Started<\/strong>
\nTo get started with jqPlot, you will need to download the latest release.  Because jqPlot offers a wide selection of chart types, it is broken down into different JavaScript files.  You’ll only need to load the JavaScript files for the chart type you will be working with.  For example, to display a bar chart you will need to include the following JavaScript source files.<\/p>\n
\r\n<link rel="stylesheet" type="text\/css" href="jqplot\/jquery.jqplot.min.css" \/>\r\n<script src="jqplot\/jquery.min.js" ><\/script>\r\n<script src="jqplot\/jquery.jqplot.min.js" ><\/script>    \r\n<script src="jqplot\/plugins\/jqplot.barRenderer.min.js"><\/script>\r\n<script src="jqplot\/plugins\/jqplot.categoryAxisRenderer.min.js"><\/script>\r\n<\/pre>\n
For the purpose of this tutorial, assume that I have a div tag that will be used to draw the chart when the the page loads.  On the page load event, a JavaScript function will fire which has the jqPlot code to draw the chart.  Here is an example of the what the div tag looks.<\/p>\n
\r\n<body onload='drawChart()'>\r\n   <div id="chartDivId" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"><\/div>\r\n<\/body>\r\n<\/pre>\n
The following code for drawChart will hard code the values for a bar chart with three series for Jan, Feb, and Mar.  This could be used to track the sales of three different items over that month or other similar data.  Here is the jqPlot JavaScript code to draw a bar chart inside the chartDivId div.<\/p>\n
\r\nfunction drawChart() {\r\n  var s1 = [2, 6, 7];\r\n  var s2 = [7, 5, 3];\r\n  var s3 = [2, 3, 5];\r\n  var s4 = [1, 7, 2];\r\n  \r\n  \/\/ chart data\r\n  var dataArray = [s1, s2, s3, 24];\r\n  \r\n  \/\/ x-axis ticks\r\n  var ticks = ['Jan', 'Feb', 'Mar'];\r\n  \r\n  \/\/ chart rendering options\r\n  var options = {\r\n    seriesDefaults: {\r\n      renderer:$.jqplot.BarRenderer\r\n    },\r\n    axes: {\r\n      xaxis: {\r\n        renderer: $.jqplot.CategoryAxisRenderer,\r\n        ticks: ticks\r\n      }\r\n    }\r\n  };\r\n\r\n  \/\/ draw the chart\r\n  $.jqplot('chartDivId', dataArray, options);\r\n}\r\n<\/pre>\n
For a bar chart, the chart data is an array of nested arrays holding the values each tick along the x-axis.  In the above example, we are tracking three points along the x-axis so our we have three data points for each series.  The options object is used to configure how the rendering of the chart, it specifies that this should be a bar chart and sets the x-axis.<\/p>\n
\"jqPlot<\/span><\/span><\/span><\/span><\/span>
jqPlot Bar Graph<\/p><\/div>\n
jqPlot Bar Chart Options<\/strong>
\nWe can easily change this from a bar chart to a bar stacking chart by adding one property to the the options object (stackSeries: true).  By adding one line of code we can drastically change the chart we generate.  Another options you may want to set is the title, to add a title to your graph setht the title poperty.<\/p>\n
\r\n\/\/ chart rendering options\r\nvar options = {\r\n  stackSeries: true,\r\n  title: 'Q1 Sales',\r\n  seriesDefaults: {\r\n    renderer:$.jqplot.BarRenderer\r\n  },\r\n  axes: {\r\n    xaxis: {\r\n      renderer: $.jqplot.CategoryAxisRenderer,\r\n      ticks: ticks\r\n    }\r\n  }\r\n};\r\n<\/pre>\n
Another quick options you might consider enabling is the legend.  You can position the location of the legend by using the following compass directions: nw, n, ne, e, se, s, sw, w<\/p>\n
\r\n\/\/ chart rendering options\r\nvar options = {\r\n  stackSeries: true,\r\n  title: 'Q1 Sales',\r\n  legend: {\r\n    show: true,\r\n    location: 'ne'\r\n  },\r\n  seriesDefaults: {\r\n    renderer:$.jqplot.BarRenderer\r\n  },\r\n  axes: {\r\n    xaxis: {\r\n      renderer: $.jqplot.CategoryAxisRenderer,\r\n      ticks: ticks\r\n    }\r\n  }\r\n};\r\n<\/pre>\n
You can further customize the label for each of your series by adding the series option object.<\/p>\n
\r\n\/\/ chart rendering options\r\nvar options = {\r\n  stackSeries: true,\r\n  title: 'Q1 Sales',\r\n  legend: {\r\n    show: true,\r\n    location: 'ne'\r\n  },\r\n  series: [\r\n    {label: 'Memberships'},\r\n    {label: 'eBooks'},\r\n    {label: 'Conference Tickets'},\r\n    {label: 'Support'}\r\n  ],\r\n  seriesDefaults: {\r\n    renderer:$.jqplot.BarRenderer\r\n  },\r\n  axes: {\r\n    xaxis: {\r\n      renderer: $.jqplot.CategoryAxisRenderer,\r\n      ticks: ticks\r\n    }\r\n  }\r\n};\r\n<\/pre>\n
\"jqPlot<\/span><\/span><\/span><\/span><\/span>
jqPlot Stacking Bar Graph<\/p><\/div>\n
There is a lot more that can be done with jqPlot.  As a jQuery plugin, jqPlot will easily fit into any web developer’s toolbox as the go to JavaScript charting library.<\/p>\n","protected":false},"excerpt":{"rendered":"
jqPlot is a plugin for the jQuery JavaScript framework used to generate awesome looking charts and graphs. Even though it has a lot of features and supports many chart types it is incredibly easy to use. To create a simple chart you will use will use something like the following template. $.jqplot(divId, dataArray, optionsObject); In […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[13,16,3],"tags":[727,721,722,333,723,373,726,99],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p902K-pY","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/1610"}],"collection":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/comments?post=1610"}],"version-history":[{"count":3,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/1610\/revisions"}],"predecessor-version":[{"id":1619,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/1610\/revisions\/1619"}],"wp:attachment":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/media?parent=1610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/categories?post=1610"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/tags?post=1610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}