sparklines with real time data - javascript

How can I create a sparkline with real time data coming from event listener in javascript ?
I tried couple of resources, but none of them gives me a clear understanding of how can I continuously send the data points to sparkline to plot them.

With jQuery.sparkline there is no way to incrementally add points to the graph. Instead you have to redraw the entire graph with each update.

Related

d3js v4: Performance problems using d3js on real time line chart

I'm trying to make a chart software using d3.js and socket.io for measurement data. The measurement data are coming in real time via socket.io and must be drawn in the chart. I am drawing simple line chart with up to 20 different series for different measurement data. I have 50 data points every second, so after a while I have a lot of data points to draw, ( in one hour: 180000) I have to show all the chart data from the very beginning of measurement.
It all works fine, I can zoom in and out, but the performance is going down if more and more data points are arriving.
If new data set arrive, I append it to the data I already have, remove the chart, redraw the chart and rescale the chart and the axis. I am rendering on SVG. After a while the performance breaks down.
Even if I try to reduce the data to be drawn, the performance after a while is still bad.
How can I improve the performance ? Could crossfilter help me ? Is the idea of drawing the whole chart every millisecond completely new good ?
I heard that rendering on SVG is not so performed then on canvas. Is that right ?

html page getting hanged with to many d3.js radar chart

I am trying to create a radar chart dynamically based on the number of records coming from the server as json data.
For example: my json has 1000 records and I try to create radar chart to show the data but my html page getting hanged.
I tried it and it is working up to 50 charts.
This can't be fixed.
Every single chart you render requires a significant portion of processing time to be built. The more charts you want to render, the more processing time it will take. There's nothing you can do about that.
Either try to condense your data into (significantly) fewer charts, or render an individual chart when a row is selected.
Or, (tell your clients to) get a beast of a machine.

Custom Chart with Highcharts / Highstock

I'm trying to create a custom chart based on the Highstock Basic Line Chart.
To be more exact I'd like to create a drawdown-chart (see drawdown chart on wikipedia). I don't want to discuss the formula :), but the way to change the data display in Highstock/Highcharts following a certain rule. It could be a more simple one: imagine you want to display f(x) = 100 for every data point although your data is completely different.
The following requirements shall be fulfilled:
I want to use as much functionality as possible from Highstock like scaling the chart axes, call redraw on "dragging" the time line, etc.
I want to use the Highstock patterns to extend its charts: wrapping or pushing event listeners and in doing so, ensuring my code stays readable and maintainable.
The best try was to wrap the processData function. In its body I manipulated xData and yData and called the super method as explained here: Extending Highcharts
The chart broke displaying certain time ranges. The original data seemed to be displayed there.
I can't get any further unaided. I would be really happy if someone could help me with that.
Thanks in advance!
Niels
1) You can catch redraw event and then call your actions.
Scalling axis by parameters:
http://api.highcharts.com/highstock#yAxis.height
http://api.highcharts.com/highstock#yAxis.top
Dynamically
http://api.highcharts.com/highcharts#Axis.update

Refresh Google Charts without redrawing the entire chart?

I'm creating a page where javascript creates random numbers and then draws a Google line chart from it. the idea is that data will continue coming and the chart has to be updated. What I'm doing right now is redraw the chart for every new data addition, which means redrawing the entire chart 20 times a second. This however slows down the process considerably.
What I'm wondering is, is there a way to add a row to Google Charts and take out a row (like shift and push) and have the chart update without redrawing?
If that doesn't work do you guys have suggestions for live data visualization tools?
Google charts are images served by Google's API. There's no way to change just part of an image, you have to load a new image. If you want a chart that changes, look at HighCharts. It's a Javascript charting package that has examples like you want. D3 also is very powerful, but requires more work.

Scrolling in jqPlot

I am using jqPlot to show candlestick chart and the data is from XML.
I retrieve data from XML and put it into an array and then jqPlot creates a candlestick chart from that.
But the XML file contains lots of data so in the chart values are overlapping (with fixed width).
Is it possible to make a graph of lets say 10% of data and place a scrollbar and on every tick of scrollbar we rebuild graph with next data or there already exists such functionality of scrolling of graph/chart in jqPlot.
Please help me to resolve this.
Perhaps you can try Jonathan Cook's jqplot.annotatedTimeline.js available from the following URL:
https://bitbucket.org/j5bot/jqplot/downloads
You can see its features in action from:
http://screencast.com/t/mHY5eUV99XaT
Although I haven't tried this plugin yet it looks very good!
Its better to load XML at once, but not give the data at once to that jqPlot chart. Just make sure you are passing part of the data to jqPlot. Once you assign data to chart then go for the scrolling of data using jQuery or something like scroller code.
Whenever you scroll on this try to refresh or regenrate the chart by only the selected data.

Categories