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:
dateAxisRenderer.js
file in our HTML, as shown in the following code:<script src="../js/jqplot.dateAxisRenderer.min.js"></script>
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]];
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], {
title
option and then create an object for our axes:title:'Daily Revenue', axes:{
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'
},
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>
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:
18.118.226.109