- How to render jquery jqplot 3 year stacked line graph with a date axis render
- 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;
- }
- 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}]
- });
- };