Is there anything similar to the px-chart updateSeries(seriesId, data, noRedraw) method?
What's the best way to update series data on the chart?
Thanks
Answer by Benoit Chevalier · Oct 04, 2016 at 09:13 AM
Hello,
You can update the data of the chart by either:
-directly re-setting the chart data object with your new data in it, I.e yourChart.chartData = theCompleteDataObject
-push data in your chart object using the polymer API, I.e yourChart.push(‘chartData’, dataToBePushed)
. By using the polymer API rather than using a “normal” push you ensure that Polymer will do the notification work needed for the new data to be processed.
Hope that helps.
Cheers, Ben
Does anyone have code examples of how to push new data points to the timeseries example of dashboard seed?
Thanks, Dave
yourChart.push
will work with a single data point object at a time, if you're handling points in real-time. You can do multiple with .push
if they're comma-separated as arguments (see Polymer array mutation) . You can also take the old chartData object, concat with new data points, and use yourChart.set
with the new array. Here's an example of that: http://codepen.io/randyaskin/pen/jyPmpL?editors=1000
There seems to be an issue with re-calculating the new domain automatically in the v1.0.0-alpha version of px-vis-timeseries (which CodePen automatically pulls in) - the v0.6.4 stable version may not need that extra step.
The team is also working on some updates that will make handling of real-time data much easier, stay tuned for that.
Here's an example of using .push
for one data point at a time - looks pretty cool!
http://codepen.io/randyaskin/pen/VPLWPa?editors=1000
If you set the left-bound of selectedDomain.x
to time - someValue
then it achieves a panning effect instead of a zooming effect, similar to HighCharts.
Thanks Randy, that codepen example was just what I needed! Thanks much!
Answer by Mirco · Oct 04, 2016 at 01:26 PM
Thanks for your responses.
The idea is not to replace the entire dataObject but just push new values.
this way should avoid a complete redraw for the chart with a smooth transition on it, right?
Answer by Elliot Nahman · Oct 04, 2016 at 09:28 AM
If directly re-setting doesnt work, you may need to use the Polymer set method.
yourChart.set('chartData', completeDataObj);