We decide to use the profit and revenue chart with two y axes we created yesterday:
<script src="../js/jqplot.dateAxisRenderer.min.js"></script>
<script src="../js/jqplot.trendline.min.js"></script>
<script>
$(document).ready(function(){
var revenue = [['2011-11-20', 800538], ['2011-12-20', 804879], ['2012-01-20', 847732], ['2012-02-20', 795758], ['2012-03-20', 835554], ['2012-04-20', 844379], ['2012-05-20', 828510], ['2012-06-20', 753984], ['2012-07-20', 807403], ['2012-08-20', 755840], ['2012-09-20', 775304], ['2012-10-20', 781322]];
var profit = [['2011-11-20', 192049.56], ['2011-12-20', 188744.75], ['2012-01-20', 197352.54], ['2012-02-20', 190106.74], ['2012-03-20', 193453.07], ['2012-04-20', 197249.69], ['2012-05-20', 205480.18], ['2012-06-20', 177648.78], ['2012-07-20', 193793.82], ['2012-08-20', 183221.56], ['2012-09-20', 192797.31], ['2012-10-20', 182451.68]];
trendline
option in seriesDefaults
or individually within the series
object. If we set the trend line option in seriesDefaults
, jqPlot would generate a trend line for each data series. We just want a trend line for our revenue line, so we add the trendline
option to our revenue series: series:[
{
label: 'Revenue',
trendline: {
show
option for trend lines is set to false
, which means we have to explicitly set it to true
. There are quite a few options for trend lines but we'll focus on a couple we're most likely to use. We assign #666
to color
because the color of our trend line will default to the color of the series line. We add a label so we know which data series it is connected with. We also want the width of our line to be a bit more substantial so we set lineWidth
to 4
:show: true, color: '#666', label: 'Trend of Revenue', lineWidth: 4, } }, { label: 'Profit', yaxis: 'y2axis' } ],
numberTicks
to 4
: legend: { show: true, placement: 'outsideGrid' },
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
label: 'Months',
numberTicks: 4
},
yaxis:{ label: 'Totals Dollars', tickOptions: { formatString: "$%'d" } }, y2axis:{ label: 'Totals Dollars', tickOptions: { formatString: "$%'d" } } } }); }); </script> <div id="revenueProfitChart" style="width:750px;"></div>
When we load the page in our browser, we see the following chart:
Initially, it would appear that revenue over the past year has been decreasing. With so few data points, it would be unwise to draw any conclusions based on our trend line.
We dig up revenue data that goes back to 2010. This provides us with more data points and a more accurate picture of revenue. We can reuse the chart we just created and remove the profit data series so we only have revenue on the chart.
<script src="../js/jqplot.dateAxisRenderer.min.js"></script> <script src="../js/jqplot.trendline.min.js"></script> <script> $(document).ready(function(){ var revenue = [['2010-11-20', 580538], ['2010-12-20', 604879], ['2011-01-20', 647732], ['2011-02-20', 695758], ['2011-03-20', 735554], ['2011-04-20', 744379], ['2011-05-20', 728510], ['2011-06-20', 653984], ['2011-07-20', 707403], ['2011-08-20', 655840], ['2011-09-20', 675304], ['2011-10-20', 681322],['2011-11-20', 800538], ['2011-12-20', 804879], ['2012-01-20', 847732], ['2012-02-20', 795758], ['2012-03-20', 835554], ['2012-04-20', 844379], ['2012-05-20', 828510], ['2012-06-20', 753984], ['2012-07-20', 807403], ['2012-08-20', 755840], ['2012-09-20', 775304], ['2012-10-20', 781322]];
id
attribute. We also remove the profit data array from the parameters:var rev_chart = $.jqplot ('revenueChart', [revenue], {
title:'Monthly Revenue',
series:[
{
label: 'Revenue',
trendline: {
show: true,
color: '#666666',
lineWidth: 4,
}
}
],
numberTicks
to 6
: axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
label: 'Months',
numberTicks: 6
},
yaxis:{
label: 'Totals Dollars',
tickOptions: { formatString: "$%'d" }
}
}
});
});
</script>
<div id="revenueChart" style="width:600px;"></div>
After making our changes, we load the new chart in our browser. We can see the results of our work appear in the following screenshot:
We can see that revenue has shown an upward trend over the past two years. This is a good time to remind ourselves that data can be manipulated to say almost anything we want. That's why there are so many different chart types. Some data sets may lead to incorrect conclusions based on how they are rendered. Also, charts are merely a representation of the data. There are many underlying issues that cannot be expressed in charts, with the potential to skew visualizations.
18.226.177.125