How to render jquery jqplot 3 year stacked line graph with a date axis render - jqplot

Question

I would like to be able to use jqplot to stack 3 different years of data on top of each other to compare the data accordingly. The only way to do it that I have found is to "hack" the dates of each result series to use the same year as a base date.
This is not exactly ideal and was wondering if anyone had found a better fix?

Answer 1

I am using C# and javascript to do this for 2 years of data.
In C#
I perform 2 queries to the database getting year1 data and year2 data.
I loop through year2 data setting the year to be the same as year1
I push this data to the client in two arrays. If there is no data for one of the years I set the array to null. Sending an empty array makes jqplot display an empty graph.
I push the two labels for example 2011 and 2010.
On the client
I create an array of data.
If the year array is not null I push it to the array.
I display the charts. I thought I might need to create an array for holding the labels, but jqplot doesn't display the labels when there is no corresponding chart. If you are doing it for three years you will need to have a seperate array for labels.
Here is my C# code:
protected void btnShowGraph_Click(object sender, EventArgs e)
{
SomeRatingSummary SearchCriteria = GetSearchCriteria();
var year1Results = SearchCriteria.ExecuteFind();
string year1Label = SearchCriteria.YearTypeCode;
StringBuilder year1 = getJavaScriptArrayFromRatingsData(year1Results);
int year1int = int.Parse(year1Label);
SearchCriteria.YearTypeCode = (year1int - 1).ToString();
var year2Results = SearchCriteria.ExecuteFind();
year2Results.ToList().ForEach(a => a.FirstSeasonRating = DateTime.Parse(a.FirstSeasonRating).AddYears(1).ToShortDateString());
var year2Label = SearchCriteria.YearTypeCode;
StringBuilder year2 = getJavaScriptArrayFromRatingsData(year2Results);
string script = " jQuery(document).ready(function () {{drawChart('{0}','{1}',{2},{3});}});";
string filledScript = String.Format(script, year1Label, year2Label, year1, year2);
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "callChart", filledScript, true);
}
private static StringBuilder getJavaScriptArrayFromRatingsData(SubSonicList<SomeRatingSummary> results)
{
var firstYear = results.OrderBy(srs => srs.FirstSeasonRating).GroupBy(a => a.FirstSeasonRating).Select(g => new { value = g.Key, count = g.Count() });
string prefix = "[";
StringBuilder year1 = new StringBuilder(prefix);
firstYear.ToList().ForEach(a => year1.AppendFormat("['{0}', {1}],", a.value, a.count));
if (year1.Length > prefix.Length)
{
year1.Length = year1.Length - 1;
year1.Append("]");
}
else
{
year1.Length = 0;
year1.Append("null");
}
return year1;
}
Here is my JavaScript code:
function drawChart(year1Label, year2Label, year1Data, year2Data) {
//these are two sample charts.
//var line1 = [['2008-09-30 4:00PM', 1], ['2008-8-30 4:00PM', 3], ['2008-11-30 4:00PM', 5], ['2008-12-30 4:00PM', 7], ['2009-01-30 4:00PM', 9]];
//var line2 = [['2008-09-31 4:00PM', 5], ['2008-10-20 4:00PM', 2], ['2008-11-15 4:00PM', 4], ['2008-12-16 4:00PM', 9], ['2009-01-29 4:00PM', 8]];
var chartData = [year1Data];
if (year2Data != null) {
chartData.push(year2Data);
}
var plot1 = jQuery.jqplot('chart1', chartData, {
grid: {
//background:'#f0ffff',
background: '#F0F8FF',
gridLineColor: '#dfdfdf',
borderWidth: 1.5
},
title: 'Ratings by Day',
axes: { xaxis: {
renderer: jQuery.jqplot.DateAxisRenderer,
rendererOptions: { tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer },
tickInterval: '2 month',
tickOptions: { formatString: '%b' }
}
},
legend: { show: true, location: 'e', showSwatch: true },
seriesDefaults: { showMarker: false, lineWidth: 1.5, markerOptions: { style: 'square'} },
series: [{ label: year1Label }, { label: year2Label}]
});
};