Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 20th, 2012  |  syntax: None  |  size: 3.29 KB  |  hits: 12  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How to render jquery jqplot 3 year stacked line graph with a date axis render
  2. protected void btnShowGraph_Click(object sender, EventArgs e)
  3.         {
  4.             SomeRatingSummary SearchCriteria = GetSearchCriteria();
  5.             var year1Results = SearchCriteria.ExecuteFind();
  6.             string year1Label = SearchCriteria.YearTypeCode;
  7.             StringBuilder year1 = getJavaScriptArrayFromRatingsData(year1Results);
  8.  
  9.             int year1int = int.Parse(year1Label);
  10.             SearchCriteria.YearTypeCode = (year1int - 1).ToString();
  11.             var year2Results = SearchCriteria.ExecuteFind();
  12.             year2Results.ToList().ForEach(a => a.FirstSeasonRating =  DateTime.Parse(a.FirstSeasonRating).AddYears(1).ToShortDateString());
  13.             var year2Label = SearchCriteria.YearTypeCode;
  14.             StringBuilder year2 = getJavaScriptArrayFromRatingsData(year2Results);
  15.  
  16.             string script = " jQuery(document).ready(function () {{drawChart('{0}','{1}',{2},{3});}});";
  17.             string filledScript = String.Format(script, year1Label, year2Label, year1, year2);
  18.             this.Page.ClientScript.RegisterStartupScript(this.GetType(), "callChart", filledScript, true);
  19.         }
  20.  
  21.         private static StringBuilder getJavaScriptArrayFromRatingsData(SubSonicList<SomeRatingSummary> results)
  22.         {
  23.             var firstYear = results.OrderBy(srs => srs.FirstSeasonRating).GroupBy(a => a.FirstSeasonRating).Select(g => new { value = g.Key, count = g.Count() });
  24.             string prefix = "[";
  25.             StringBuilder year1 = new StringBuilder(prefix);
  26.             firstYear.ToList().ForEach(a => year1.AppendFormat("['{0}', {1}],", a.value, a.count));
  27.             if (year1.Length > prefix.Length)
  28.             {
  29.                 year1.Length = year1.Length - 1;
  30.                 year1.Append("]");
  31.             }
  32.             else
  33.             {
  34.                 year1.Length = 0;
  35.                 year1.Append("null");
  36.             }
  37.             return year1;
  38.         }
  39.        
  40. function drawChart(year1Label, year2Label, year1Data, year2Data) {
  41.         //these are two sample charts.
  42.         //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]];
  43.         //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]];
  44.         var chartData = [year1Data];
  45.         if (year2Data != null) {
  46.             chartData.push(year2Data);
  47.         }
  48.  
  49.         var plot1 = jQuery.jqplot('chart1', chartData, {
  50.             grid: {
  51.                 //background:'#f0ffff',
  52.                 background: '#F0F8FF',
  53.                 gridLineColor: '#dfdfdf',
  54.                 borderWidth: 1.5
  55.             },
  56.             title: 'Ratings by Day',
  57.             axes: { xaxis: {
  58.                 renderer: jQuery.jqplot.DateAxisRenderer,
  59.                 rendererOptions: { tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer },
  60.                 tickInterval: '2 month',
  61.                 tickOptions: { formatString: '%b' }
  62.             }
  63.             },
  64.             legend: { show: true, location: 'e', showSwatch: true },
  65.             seriesDefaults: { showMarker: false, lineWidth: 1.5, markerOptions: { style: 'square'} },
  66.             series: [{ label: year1Label }, { label: year2Label}]
  67.         });
  68.     };