2012-04-16 11 views
1

グラフを再生するためにチャートに次のデータポイントを追加してHighChartをシリーズに更新したいと考えています。 私はXとYの両方のコンポーネントを含むデータ系列を持っています。このシリーズの次のポイントで、チャートが更新されるようにしたいと思います。 私はこれをDotNet.HighCharts APIを使用してVB.NET 4サイトで使用しています。私はいくつかのデモ(例えばthisのようなもの)に従ってきました。これらはすべて無作為に生成された値を使っています。既存のポイントセットを使用するためにチャートを取得するにはどうすればよいですか?ここでは、ランダム関数を使用してjsFiddleです - http://jsfiddle.net/tQpNN/3/ 私はちょうど渡されたデータシリーズ(それがそれを行う方法です)を反復するか、DotNet.HighChartsが私のために反復する方法を知りません。いくつかのコードと既存のDataTableからのデータポイントの更新設定間隔

EDIT

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 
       xDate3 = 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(seriesItem3(sX4)) 

     sX4 = sX4 + 1 
    Next 


    Dim iterateData As String = JsonSerializer.Serialize(New Helpers.Data(New Object() {seriesItem3(1).Data})) 

    Dim chart4 As Highcharts = New Highcharts("chart4").SetOptions(New Helpers.GlobalOptions() With { _ 
     .[Global] = New [Global]() With { _ 
       .UseUTC = False _ 
      } _ 
     }).InitChart(New Chart() With { _ 
     .DefaultSeriesType = ChartTypes.Spline, _ 
     .MarginRight = 10, _ 
     .Events = New ChartEvents() With { _ 
      .Load = "ChartEventsLoad" _ 
     } _ 
     }).SetTitle(New Title() With { _ 
     .Text = "Live data" _ 
     }).SetXAxis(New XAxis() With { _ 
     .Type = AxisTypes.Datetime, _ 
     .TickPixelInterval = 150 _ 
     }).SetSeries(New Series() With { _ 
      .Data = New Helpers.Data(New Object() {}) 
      }) _ 
    .AddJavascripVariable("counter", "0") _ 
    .AddJavascripVariable("stockData", iterateData) _ 
    .AddJavascripFunction("ChartEventsLoad", "// set up the updating of the chart each second" & vbCr & vbLf & _ 
          " var series = this.series[0];" & vbCr & vbLf & _ 
          " setInterval(function() {" & vbCr & vbLf & _ 
          " var x = stockData[counter].key;" & vbCr & vbLf & _ 
          " var y = stockData[counter].value;" & vbCr & vbLf & _ 
          " series.addPoint([x, y], true, series.points.length > 10);" & vbCr & vbLf & _ 
          " counter++;" & vbCr & vbLf & _ 
          "}, 1000);") 

これは、(1又は複数の異なる個々のシリーズであってもよい)、データのマイ直列に通過します。私がしたいのは、一度に1つのポイントを追加することでシリーズポイントを「再生」することです(x軸の拡大縮小ではポイントは削除したくありません)。このダミーバージョンは、与えられた瞬間に新しいランダムy値を追加するだけです。私は既存のデータをどのように反復処理するのか分かりません。

これは、 "stockData" javascript varを自分のデータセットに設定します。私は

stockData [カウンター]はVAR counterstockdatachart4チャートとともに$(document).ready(function)に定義されている

定義されていないことを示すFirebugの中のエラーを見ています。 DotNet.Highcharts APIが吐き出すものについては、http://jsfiddle.net/ZvYT6/を参照してください。 はのインラインの繰り返しのために、このようになりますジャバスクリプト:

 function ChartEventsLoad(){ 
     // set up the updating of the chart each second 
var series = this.series[0]; 
setInterval(function() { 
var x = stockData[counter].key; 
var y = stockData[counter].value; 
series.addPoint([x, y], true, series.points.length > 10); 
counter++; 
}, 1000); 
    } 
}); 

私は本当にわからないよ一部がstockData[counter]キー/値です。これはjavascriptで何と呼ばれていますか?

var stockData = { data: [{ data: [[Date.parse('01/01/1900 00:00:00'), 530000], 
    ...., 
[Date.parse('01/01/2010 00:00:00'), 18801310]] 
    }] 
    }; 

EDIT v4の: わかりましたので、今、私はいくつかの厄介なJavaScriptを使用して、データの私の配列を解析することができる午前stockdataは次のようになり、データのリストです。

Dim iterateData As String = JsonSerializer.Serialize(seriesItem3(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.Spline, _ 
     .MarginRight = 10, _ 
     .Events = New ChartEvents() With { _ 
      .Load = "ChartEventsLoad" _ 
     } _ 
     }).SetTitle(New Title() With { _ 
     .Text = "Live data" _ 
     }).SetXAxis(New XAxis() With { _ 
     .Type = AxisTypes.Datetime, _ 
     .TickPixelInterval = 150 _ 
     }).SetSeries(New Series() With { _ 
      .Data = New Helpers.Data(New Object() {}) 
      }) _ 
    .AddJavascripVariable("counter", "0") _ 
    .AddJavascripVariable("stockData", iterateData.ToString) _ 
    .AddJavascripFunction("ChartEventsLoad", "// set up the updating of the chart each second" & vbCr & vbLf & _ 
          " var result = stockData.data;" & vbCr & vbLf & _ 
          " var series = this.series[0];" & vbCr & vbLf & _ 
          " setInterval(function() {" & vbCr & vbLf & _ 
          " var p = String(result[counter]);" & vbCr & vbLf & _ 
          " var splitp = p.split("","");" & vbCr & vbLf & _ 
          " var x = splitp[0];" & vbCr & vbLf & _ 
          " var y = splitp[1];" & vbCr & vbLf & _ 
          " series.addPoint([x, y], true, false, true);" & vbCr & vbLf & _ 
          " counter++;" & vbCr & vbLf & _ 
          "}, 1000);") 

    ltrChart4.Text = chart4.ToHtmlString() 

私は放火犯で、xとyの値を見れば、私はこれらの期待値があることがわかります。しかし、私のチャートは、〜1900時間に始まるx軸上の時間だけで更新され、毎秒(JavaScript関数ごとに)ポイントが追加されますが、y値はありません。さらに、y軸は-2.5から始まるように見えます - 私が使用している値のどれもが1000未満ではありません。私はとても近いです...

答えて

2

最後にこれが機能しました。これは私の解決策です - おそらく最も美しいものではないかもしれませんが、うまくいきます。 重要なビットは、iteratediterateData.ToString()を渡すことです。この時点から、それをループして各要素を分割することができます。データセットの最後のポイントに達するとポイントの追加が停止することを確認するためにチェックを追加しました。これを行うには、複数のシリーズを扱い、両方を "再生"できるようにすることです。

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 
       xDate3 = 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(seriesItem3(sX4)) 

     sX4 = sX4 + 1 
    Next 

    Dim iterateData As String = JsonSerializer.Serialize(seriesItem3(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 = "Live data" _ 
     }).SetXAxis(New XAxis() With { _ 
     .Type = AxisTypes.Datetime, _ 
     .TickPixelInterval = 150 _ 
     }).SetSeries(New Series() With { _ 
      .Data = New Helpers.Data(New Object() {}), _ 
      .Name = seriesItem3(1).Name 
      }) _ 
    .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, 100);") 

    ltrChart4.Text = chart4.ToHtmlString() 
1

"Spline Update Each Second C#のコードのための

Highcharts chart = new Highcharts("chart") 
      .SetOptions(new GlobalOptions { Global = new Global { UseUTC = false } }) 
      .InitChart(new Chart 
         { 
          DefaultSeriesType = ChartTypes.Spline, 
          MarginRight = 10, 
          Events = new ChartEvents 
            { 
             Load = "ChartEventsLoad" 
            } 
         }) 
      .SetTitle(new Title { Text = "Live data" }) 
      .SetXAxis(new XAxis 
         { 
          Type = AxisTypes.Datetime, 
          TickPixelInterval = 150 
         }) 
      .SetSeries(new Series 
         { 
          Name = "Live data", 
          Data = new Data(new[] { new Point { X = Tools.GetTotalMilliseconds(DateTime.Now), Y = 0 } }) 
         }) 
      .AddJavascripVariable("counter", "0") 
      .AddJavascripVariable("stockData", JsonSerializer.Serialize(ChartsData.StockData)) 
      .AddJavascripFunction("ChartEventsLoad", 
            @"// set up the updating of the chart each second 
            var series = this.series[0]; 
            setInterval(function() { 
             var x = (new Date()).getTime(); // current time 
             var y = stockData[counter]; 
             series.addPoint([x, y], true, series.points.length > 10); 
             counter++; 
            }, 1000);"); 

申し訳ありません:「とにかくDotNet.Highchart project

sample projectで、ここにあなたがあなたのデータを反復処理するとき、あなたのチャートの各第二の点を追加する方法のコード例です。これが役に立つと思って、あなたは良いコンバータを見つけることができます。

+0

これは私が実際に作業しようとしていた例です。私は、私が通過している私のデータセットをどのように反復するのか分かりません。上記の私のコード編集を参照してください。 – wergeld

+0

ここのサンプルコードでは、ChartsData.stockdataは何ですか?これを私が持っている既知のシリーズ(seriesItem3(0).data)に変更しようとすると、「オブジェクト参照がオブジェクトのインスタンスに設定されていません」というエラーが表示されます - おそらく正しいシリーズを指していませんが、どの部分がエラーを出しているのですか(Dim Chart4ステートメント全体を指しているだけです)。それでも、シリーズの次のデータ要素(x、y)の次に描画する点を設定する方法は完全にはわかりません。私は最初に空のシリーズを追加して、チャートを作成してから自分のシリーズを反復してポイントを追加するべきだと思っています。 – wergeld

+0

さて、実際にはstockDataオブジェクトはちょうどyの値のようです。また、株式データ[カウンタ]が機能するようにコンマで区切ってもかまいません。 [x、y]ペアがある場合、それはしません。私はvar result = $ .parseJSON(stockData.data)を試してみましたが、$ .each(result、function(k、v))を経由してループしていますが、結果はNULLなので...失敗します。 「key」の形式:「value」、「key」:「value」...など。HighCharts [[key、value]、[key、value]]を認識するためにparseJSONまたは関数をループする方法フォーマット? – wergeld

関連する問題