I want to have the HighChart update the series by added the next data point to the chart so that the chart “plays”.
I have a data series that contains both an X an Y component. I would like for chart to be updated (say every second) with the next point in this series.
I am using this in a VB.NET 4 site using DotNet.HighCharts API. I have followed along on several demos (such as this one) and all of these are using some randomly generated value. How can I get the chart to use an existing set of points? Here is a jsFiddle using the random function – http://jsfiddle.net/tQpNN/3/
I just do not know how to iterate through the passed in data series (if that is the way to do it) or to make DotNet.HighCharts iterate for me.
EDIT with some code:
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);")
This passes in my series of data (could be 1 or multiple different individual series). What I want to do is have the series points “play” by adding one point at a time (with scaling of the x-axis but I do not want to remove any points). This dummy version just adds a new random y-value at a given instant. I am not sure how to iterate over my existing data.
This does set the “stockData” javascript var to my data set. I am seeing errors in FireBug stating that
stockData[counter] is undefined
The var counter is defined in the $(document).ready(function) along with the stockdata and chart4 chart. See http://jsfiddle.net/ZvYT6/ for what the DotNet.Highcharts API spits out.
The in-line javascript for the iteration looks like this:
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);
}
});
The part I am really unsure on is the stockData[counter] key/value. What is this called in javascript? stockdata is a list of data that looks like:
var stockData = { data: [{ data: [[Date.parse('01/01/1900 00:00:00'), 530000],
....,
[Date.parse('01/01/2010 00:00:00'), 18801310]]
}]
};
EDIT v4:
Okay, so now I am able to parse out my array of data using some nasty javascript.
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()
If I look at the x and y values in firebug I can see that these are the expected values. However, my chart just updates with times on the x-axis starting at ~1900 hours and adds a point every second (per the javascript function) but there is no y value. In addition the y-axis appears to start at -2.5 – none of the values I am using are less than 1000 let alone 0. I am so close…
Finally got this working. This is my solution – probably not the most pretty but it works.
The important bit is to pass the
iteratedtheiterateData.ToString(). From this point you can then loop over that and then split on each element. I added in a check to make sure the addition of the points stops once we reach the last point in the data set. To do still is to allow it to handle more than one series and “play” them both.