Creating charts with real-time data

Martynas Majeris -

The charts can be configured to be updated at preset intervals with the new data.

The idea is to periodically update chart.dataProvider (or chart.dataSet[x].dataProvider in case of Stock chart) with the new datapoints, then just call chart.validateData() for the chart to take in the new data.

Here's a working example: http://jsfiddle.net/amcharts/ATQUm/

The data updates can be loaded using some AJAX techniques, like jQuery's getJSON method.

And here's an example of real-time Stock chart:

http://jsfiddle.net/amcharts/s6BnP/

Have more questions? Submit a request

Comments

  • Avatar
    Rick

    I just want to give a shout out to the amcharts team, I came here for a different issue and noticed this knowledge base article and it is extremely helpful. After going back and forth with the support team on it for awhile it is nice to see that they are continuing to help support the community.

  • Avatar
    gaoqin

    But there is a new problem. The dataProvider will have more and more points and the browser will stop to work at last because the points is too many. Do you have a good solution to solve this problem?

  • Avatar
    Boris Aranovič

    gaoqin, usually when showing real-time data, you're displaying a "sliding-window" between two timestamps. So when you load a new data-point, you need to remove the oldest data-point probably. Or have something that periodically checks for old data and clears it.

  • Avatar
    Jay F. Salok

    I never had any regret after I buy pressure washer hoses online. Enable me know if your interested for the site possibly you can buy pressure washer pumps online on the net too.

  • Avatar
    Juan Torne

    Issue is we get a bunch of NaN errors when we call the data in a setInterval. Same data source and type as what draws to the graph.

  • Avatar
    Juan Torne

    We work with a live data source and have had a lot of issues with getting the thing to work. Our non live graph is working just fine.

  • Avatar
    dan.zoeller

    Yes, I get NaN errors now too when updating the graph with setInterval.  I opened a support ticket.  Has anyone found a workaround?  It used to work in previous versions.

  • Avatar
    Boris Aranovič

    What is the interval you guys are using?

    I have an application with 10s interval, and I tested with 1s interval as well, and it works fine for me. 

  • Avatar
    dan.zoeller

    I forgot to mention this is only happening for me with xy bubble charts.  I've created a fiddle that reproduces the error.  It seems to only happen if the number of data points in the graph changes.  It may take a few iterations for the error to happen, so just wait a few seconds after it is running:

    http://jsfiddle.net/danzoeller/NHk2b/

  • Avatar
    Boris Aranovič
    • Error: Invalid value for <circle> attribute r="NaN" amcharts.js:318
    • Error: Invalid value for <circle> attribute r="Infinity" amcharts.js:318
  • Avatar
    dan.zoeller

    And here is a work around: http://jsfiddle.net/danzoeller/NHk2b/2/

    What I did was filled the new chartData with empty data points so that the new chartData length is never less than the existing chartData length.  This may or may not be an acceptable solution to someone else's specific needs but it works for what I'm doing.

  • Avatar
    Geverson Carvalho

    Hello everyone, I'm studying the Amcharts like an option to use it in a realtime project... but at the moment i'm trying to update the graphic's last point and everytime i did it, the graphic redrew and it gives me a killer slowness in the graphic's cursor. I'd also tried Highcharts and it works perfectly in this case, but i think the amchart is much more easy to work, so i ask if is there any way to update the last point without lose performance?

  • Avatar
    Boris Aranovič

    @Geverson Carvalho, I am using amCharts for real-time updates. There is performance issued in IE with a lot of data (and memory consumption, but it might have something to do with my code), but in Chrome and FF everything is pretty smooth. How many data points are you trying to show? And what do you use to append new points?

  • Avatar
    Geverson Carvalho

    So, I have a candlestick graphic for stock market displaying intraday points updated in real-time. I cannot remove graphic points in the begining, because i need to display the point for all the day. I need to update the last point for 5 minutes, so i create a new one and update this point for the next 5 minutes... The problem is 'cause to update just one graphic point i need to use validateData() and it makes the graphic redraws for complete, causing a perfomance lose in this process. At the moment we are just seeing the viability of using the amchart and this is the unique and crucial item that is making the amchart weak for the project.

  • Avatar
    Максим Патраманский

    Are there anything new regarding the above problem? How can we dynamically add just 1 point at a time without having to revalidate the whole bunch of data?

  • Avatar
    Sushanta Deb

    Hi Amcharts Team,

    Usage of Amcharts to draw real-time stock data is dependent on Amcharts ability to render the chart without validating the entire dataset and objects when a new data point is added
    Is this feature something that the team is actively working on and is slated for future release? Please suggest ASAP
    Thank you

  • Avatar
    Amol_Guldagad

    Scollbar is not retaining position when live data is appneded to data in case of line type chart.

    Requirement:
    Want scrollbar functionality like stock.js chart in line or stack type of chart

    Amchart - Line or stack
    Start live data appended to chart
    Scrollbar - which should not be re-set when live data is updated in chart

    Please let us know solution for above problem.

Powered by Zendesk