Book Image

Learning jqPlot

By : Scott Gottreu
Book Image

Learning jqPlot

By: Scott Gottreu

Overview of this book

Table of Contents (19 chapters)
Learning jqPlot
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating an area chart


We grab the quarterly report with the divisional profits we created this morning. We will extend the data to a year and plot the divisional profits as an area chart:

  1. We remove the data arrays for revenue and the overall profit array. We also add data to the three arrays containing the divisional profits:

    <script src="../js/jqplot.dateAxisRenderer.min.js"></script>
    <script>
    $(document).ready(function(){
      var electronics = [["2011-11-20", 123487.87], ...];
      var media = [["2011-11-20", 66449.15], ...];
      var nerd_corral = [["2011-11-20", 2112.55], ...];
    
      var div_profit = $.jqplot ('division_profit', [media, nerd_corral, electronics],
      {
        title:'12 Month Divisional Profits',
  2. Under seriesDefaults, we assign true to fill and fillToZero. Without setting fillToZero to true, the fill would continue to the bottom of the chart. With the option set, the fill will extend downward to zero on the y axis for positive values and stop. For negative data points...