Learning jqPlot

As we finish our first experiment, you mention that you've found the revenue numbers for the last 7 days. We decide that it will be best if we can show the dates on the x axis and not use arbitrary numbers.

We will need to make use of one of the renderers available in jqPlot. A renderer extends the basic functionality of jqPlot. Some renderers take the data and render it in different chart types. Other renderers format text in different ways. For our next chart, we will use dateAxisRenderer, which will take our human-readable dates and convert them into values for jqPlot to render:

We start by including the dateAxisRenderer.js file in our HTML, as shown in the following code:
```
<script src="../js/jqplot.dateAxisRenderer.min.js"></script>
```
To make it easier to keep track of our data, we will store it in an array and then pass that variable into our plot. Our array contains arrays with the x and y values for each data point. The date is the x value, and the second number is our y value:
```
<script>
$(document).ready(function(){
    var revenue = [['2012-10-25',258142], ['2012-10-26',267924],['2012-10-27',239140], ['2012-10-28',230107], ['2012-10-29',264397], ['2012-10-30',276369], ['2012-10-31',285050]];
```
Next, we declare the variable for our chart. We pass in the ID of the div, and then pass in the revenue array. No matter how many data arrays we create, they will all be housed inside another array. We also want to set some options for our chart. This is accomplished by passing a jQuery object as the third parameter:
```
  var revenuePlot = $.jqplot ('revenueChart', [revenue],
     {
```
After creating the object, we set the title option and then create an object for our axes:
```
  title:'Daily Revenue',
  axes:{
```
We set the renderer option for the x axis. We will pass in the DateAxisRenderer class. Since it is a class, we will not place it inside quotes. Also, we will not add parentheses to the end of the class name. This will instantiate our class:
```
  xaxis:{
    renderer:$.jqplot.DateAxisRenderer,
    label: 'Days of the Month'
  },
```
For the yaxis option, we set our label and use the formatString option to format our values as currency. The dollar sign in formatString adds a dollar sign to the beginning of the tick. The apostrophe states we want a thousands place separator. Finally, the d expression tells jqPlot to treat the tick as a number. We complete the page by including the div element to contain our chart:
```
      yaxis:{
        label: 'Revenue in Dollars',
        tickOptions: { formatString: "$%'d" } 
      }
    }
  });
});
</script>
<div id="revenueChart" style="width:600px;"></div>
```
Note
Because of issues with time zones and how browsers calculate dates, it's best to include a time along with the date. The date renderer will also accept epoch timestamps. We need to keep in mind that if a time zone is not included in our date string, JavaScript will default to the time zone of the browser.

With our new chart complete, we load the page in our browser and see the result in the following figure:

Learning jqPlot

By : Scott Gottreu

Learning jqPlot

By: Scott Gottreu

Overview of this book

Related Content you might be interested in

Current Title:

Learning jqPlot

Using dates for the x axis

Note