Wie Jquery Jqplot 3-Jahres-Liniendiagramm mit Datumsachse gerendert wird

• Ich möchte jqplot verwenden, um drei verschiedene Datenjahre übereinander zu stapeln, um die Daten entsprechend zu vergleichen. Die einzige Möglichkeit, die ich gefunden habe, besteht darin, die Daten jeder Ergebnisserie zu "hacken", um dasselbe Jahr als Basisdatum zu verwenden fragte mich, ob jemand eine bessere Lösung gefunden hatte?

  • 2
  • tracking

  22 November 2011

  buggedcomtrante

• Ich benutze C # und Javascript, um dies für zwei Jahre zu tun.

  In C #

  1. Ich führe zwei Abfragen an die Datenbank aus und rufe die Daten des Jahres1 und des Jahres2 ab.
  2. Ich durchlaufe die Daten des Jahres2 und setze das Jahr auf das gleiche Jahr wie das Jahr1
  3. Ich übertrage diese Daten in zwei Arrays an den Client. Wenn für ein Jahr keine Daten vorhanden sind, setze ich das Array auf null. Wenn Sie ein leeres Array senden, wird in jqplot ein leeres Diagramm angezeigt.
  4. Ich drücke die beiden Beschriftungen für 2011 und 2010.

  Auf dem Client

  1. erstelle ich ein Datenarray.
  2. Wenn das Jahres-Array nicht null ist, drücke ich es zum Array.
  3. Ich zeige die Diagramme an. Ich dachte, ich müsste vielleicht ein Array zum Halten der Beschriftungen erstellen, aber jqplot zeigt die Beschriftungen nicht an, wenn kein entsprechendes Diagramm vorhanden ist. Wenn Sie dies drei Jahre lang tun, benötigen Sie ein separates Array für Labels.

  Hier ist mein 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;
          }
   

  Hier ist mein 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}]
          });
      };
   

  • 0

  17 December 2011

  David Silva Smith