HighChartsとDotNet.HighChartsを使用すると、シリーズ

Question

私はVB.NETとDotNet.HighChartsを使用して作成した、一連のセットを持っている複数の「再生」します

Dim SeriesList4As New List(Of Series)(stfipsList4.Count) 

何が起こるがしたいことは何か似ています私はいくつ持っているのかわからずに複数のシリーズを渡すことができることを除いてhttp://jsfiddle.net/8M2fF/に。

上記のものの例を作成したVBのコードはこれです：

 Dim stfipsList4 = (From r In dt4.AsEnumerable() Select r("areaname")).Distinct().ToList() 
     Dim SeriesList4 As New List(Of Series)(stfipsList4.Count) 
     Dim seriesItem4(stfipsList4.Count) As Series 
     Dim xDate4 As DateTime 
     Dim fakeDate4 As String 
     Dim sX4 As Integer 

     sX4 = 1 
     For Each state In stfipsList4 
      Dim data As New Dictionary(Of DateTime, Decimal) 
      Dim stateVal As String = state.ToString 
      Dim recCount As Integer = dt4.Rows.Count - 1 
      Dim seriesPointCount As Integer = dt4.Compute("Count(population)", "areaname = '" + stateVal + "'") 
      Dim chartData As Object(,) = New Object(seriesPointCount - 1, 1) {} 
      Dim x As Integer = 0 
      For i As Integer = 0 To recCount 
       If dt4.Rows(i)("areaname").ToString = stateVal Then 
        fakeDate4 = "1/1/" + dt4.Rows(i)("periodyear").ToString 
        xDate4 = DateTime.Parse(fakeDate4) 
        chartData.SetValue(xDate4.Date, x, 0) 
        chartData.SetValue(dt4.Rows(i)("population"), x, 1) 
        x += 1 
       End If 

      Next 

      seriesItem4(sX4) = New Series With { 
         .Name = state.ToString, _ 
         .Data = New Helpers.Data(chartData) 
      } 

      SeriesList4.Add(seriesItem4(sX4)) 

      sX4 = sX4 + 1 
     Next 

     Dim iterateData As String = JsonSerializer.Serialize(seriesItem4(1)) 

      Dim chart4 As Highcharts = New Highcharts("chart4").SetOptions(New Helpers.GlobalOptions() With { _ 
       .[Global] = New [Global]() With { _ 
         .UseUTC = False _ 
        } _ 
       }).InitChart(New Chart() With { _ 
       .DefaultSeriesType = ChartTypes.Column, _ 
       .MarginRight = 10, _ 
       .Events = New ChartEvents() With { _ 
        .Load = "ChartEventsLoad" _ 
       } _ 
       }).SetTitle(New Title() With { _ 
       .Text = "Population" _ 
       }).SetTooltip(New Tooltip() With { _ 
        .Formatter = "function() { return '<b>' + this.series.name + '<br/>' + Highcharts.dateFormat('%Y', this.x) +'</b>: '+ Highcharts.numberFormat(this.y, 0, ','); }" _ 
       }).SetXAxis(New XAxis() With { _ 
       .Type = AxisTypes.Datetime, _ 
       .TickPixelInterval = 150 _ 
       }).SetYAxis(New YAxis() With { _ 
         .Min = 0, _ 
         .Title = New YAxisTitle() With { _ 
         .Text = "Population", _ 
         .Align = AxisTitleAligns.High _ 
         } _ 
       }).SetSeries(New Series() With { _ 
        .Data = New Helpers.Data(New Object() {}) _ 
       }) _ 
       .SetOptions(New Helpers.GlobalOptions() With { _ 
       .Colors = palette_colors _ 
       }) _ 
       .AddJavascripVariable("iterated", iterateData.ToString) _ 
       .AddJavascripFunction("ChartEventsLoad", "// set up the updating of the chart each second" & vbCr & vbLf & _ 
            " var result = iterated.data;" & vbCr & vbLf & _ 
            " var counter = 0;" & vbCr & vbLf & _ 
            " var series = this.series[0];" & vbCr & vbLf & _ 
            " var loopseries = function() {" & vbCr & vbLf & _ 
            " if (counter <= result.length) {" & vbCr & vbLf & _ 
            " var p = String(result[counter]);" & vbCr & vbLf & _ 
            " var splitp = p.split("","");" & vbCr & vbLf & _ 
            " var x = Number(splitp[0]);" & vbCr & vbLf & _ 
            " var y = Number(splitp[1]);" & vbCr & vbLf & _ 
            " series.addPoint([x, y], true, series.points.length > 10, true);" & vbCr & vbLf & _ 
            " counter++;" & vbCr & vbLf & _ 
            " } else {" & vbCr & vbLf & _ 
            " clearInterval(loopseries);" & vbCr & vbLf & _ 
            " }};" & vbCr & vbLf & _ 
            " setInterval(loopseries, 300);") 

     ltrChart4.Text = chart4.ToHtmlString() 

これはただ一つのシリーズです。 List（Of Series）を渡したいと思います。関与する必要が 物事： は各シリーズ

私はそれはちょうど私が達成することはできませんマスターシリーズ「リスト」に渡しているこれらのアイテムを扱うことができるの命名各シリーズ に一連の 追加点をn個を作成します。

編集： 私が求めていることには多少の混乱があるようです。 DotNet.HighCharts APIを使って、N個のシリーズをHighChartsに渡すことができます。私が現在行うことができないのは、この一連のシリーズをJavaScript関数に渡して、シリーズをループして再生することです。参照してください：

  .AddJavascripVariable("iterated", iterateData.ToString) _ 
      .AddJavascripFunction("ChartEventsLoad", "// set up the updating of the chart each second" & vbCr & vbLf & _ 
           " var result = iterated.data;" & vbCr & vbLf & _ 
           " var counter = 0;" & vbCr & vbLf & _ 
           " var series = this.series[0];" & vbCr & vbLf & _ 
           " var loopseries = function() {" & vbCr & vbLf & _ 
           " if (counter <= result.length) {" & vbCr & vbLf & _ 
           " var p = String(result[counter]);" & vbCr & vbLf & _ 
           " var splitp = p.split("","");" & vbCr & vbLf & _ 
           " var x = Number(splitp[0]);" & vbCr & vbLf & _ 
           " var y = Number(splitp[1]);" & vbCr & vbLf & _ 
           " series.addPoint([x, y], true, series.points.length > 10, true);" & vbCr & vbLf & _ 
           " counter++;" & vbCr & vbLf & _ 
           " } else {" & vbCr & vbLf & _ 
           " clearInterval(loopseries);" & vbCr & vbLf & _ 
           " }};" & vbCr & vbLf & _ 
           " setInterval(loopseries, 300);") 

.AddJavaScriptVariableは、文字列とで、ライニングのコードは私に無効なオブジェクト参照を与えている期待しています。

Answer 1

実際にはDotNet.Highchartsを使用して、系列数が未定義のグラフを作成しています。これを行うには、linqを使ってグラフに追加する必要があるデータをクエリします。私は個々のポイントを作成するオブジェクト[]のリストを使用し、私はそのリストを取ってシリーズのリストに追加します。私はシリーズのすべてを得るために必要な回数だけループを繰り返します。 SetSeriesでは、Seriesリストに含まれていたものを割り当てます。コードはC＃で書かれていますが、VB.NETに変更できると確信しています。グラフを作成するために使用するActionResult全体を次に示します。

public ActionResult CombinerBarToday(DateTime? utcStartingDate = null, 
            DateTime? utcEndingDate = null) 
{ 
    //GET THE GENERATED POWER READINGS FOR THE SPECIFIED DATETIME 
    var firstQ = from s in db.PowerCombinerHistorys 
       join u in db.PowerCombiners on s.combiner_id equals u.id 
       where s.recordTime >= utcStartingDate 
       where s.recordTime <= utcEndingDate 
       select new 
       { 
        CombinerID = u.name, 
        Current = s.current, 
        RecordTime = s.recordTime, 
        Voltage = s.voltage, 
        Watts = (s.current * s.voltage) 
       }; 

    //GET A LIST OF THE COMBINERS CONTAINED IN THE QUERY 
    var secondQ = (from s in firstQ 
        select new 
        { 
         Combiner = s.CombinerID 
        }).Distinct(); 

    /* THIS LIST OF SERIES WILL BE USED TO DYNAMICALLY ADD AS MANY SERIES 
    * TO THE HIGHCHARTS AS NEEDED WITHOUT HAVING TO CREATE EACH SERIES INDIVIUALY */ 
    List<Series> allSeries = new List<Series>(); 

    TimeZoneInfo easternZone = TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time"); 

    //LOOP THROUGH EACH COMBINER AND CREATE SERIES 
    foreach (var distinctCombiner in secondQ) 
    { 
     var combinerDetail = from s in db2.PowerCombinerHistorys 
       join u in db2.PowerCombiners on s.combiner_id equals u.id 
       where u.name == distinctCombiner.Combiner 
       where s.recordTime >= utcStartingDate 
       where s.recordTime <= utcEndingDate 
       select new 
       { 
        CombinerID = u.name, 
        Current = s.current, 
        RecordTime = s.recordTime, 
        Voltage = s.voltage, 
        Watts = (s.current * s.voltage)/1000d 
       }; 


     var results = new List<object[]>(); 

     foreach (var detailCombiner in combinerDetail) 
     { 
      results.Add(new object[] { 
          TimeZoneInfo.ConvertTimeFromUtc(detailCombiner.RecordTime, easternZone), 
          detailCombiner.Watts }); 
     } 

     allSeries.Add(new Series 
     { 
      Name = distinctCombiner.Combiner, 
      //Data = new Data(myData) 
      Data = new Data(results.ToArray()) 

     }); 
    } 

    Highcharts chart = new Highcharts("chart") 
    .InitChart(new Chart { DefaultSeriesType = ChartTypes.Spline, ZoomType = ZoomTypes.X}) 
    .SetTitle(new Title { Text = "Combiner History" }) 
    .SetSubtitle(new Subtitle { Text = "Click and drag in the plot area to zoom in" }) 
    .SetOptions(new GlobalOptions { Global = new Global { UseUTC = false } }) 
    .SetPlotOptions(new PlotOptions 
    { 
     Spline = new PlotOptionsSpline 
     { 
      LineWidth = 2, 
      States = new PlotOptionsSplineStates { Hover = new PlotOptionsSplineStatesHover { LineWidth = 3 } }, 
      Marker = new PlotOptionsSplineMarker 
      { 
       Enabled = false, 
       States = new PlotOptionsSplineMarkerStates 
       { 
        Hover = new PlotOptionsSplineMarkerStatesHover 
        { 
         Enabled = true, 
         Radius = 5, 
         LineWidth = 1 
        } 
       } 
      } 
     } 
    }) 
    .SetXAxis(new XAxis 
    { 
     Type = AxisTypes.Datetime, 
     Labels = new XAxisLabels 
     { 
      Rotation = -45, 
      Align = HorizontalAligns.Right, 
      Style = "font: 'normal 10px Verdana, sans-serif'" 
     }, 
     Title = new XAxisTitle { Text = "Time(Hour)" }, 
    }) 
    .SetYAxis(new YAxis 
    { 
     Title = new YAxisTitle { Text = "Kilowatt" } 
    }) 

    .SetSeries(allSeries.Select(s => new Series {Name = s.Name, Data = s.Data }).ToArray()); 

    return PartialView(chart); 
}