AJAX (CSV or XML) Line chart, changing data points

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Mike on 1st January 2014

I'm not sure if this has been answered, I read a few different AJAX related posts but none seemed to answer my question. I'm very new to javascript in general. I'm trying to build a graph with a few features, but the first thing I need to be able to to is change the data on screen much like the live ajax data feeds that update when the source is modified, only the line updates when a click event occurs -

I'm pulling data from an xml file. The X axis lists the months in the year, and datasets A and B represent two groups. Dataset C is a concatenated A + B

Using the model from the xml demo:

             var myLine = new RGraph.Line('cvs', a)
                 .Set('title', 'A chart of statistics')
                 .Set('linewidth', 2)
                 .Set('hmargin', 5)
                 .Set('tickmarks', 'endcircle')
                 .Set('labels', ['J','F','M','A','M','J','J','A','S','O','N','D'])
                 .Set('key', ['A'])

This will display a line graph using data point A as the data. Great! Perfect! Now I need to update the data and the key without redrawing the whole canvas, rather either updating the variable A to be now = B? And then a third button will change the data from whatever it is, to A + C.

Sound fun?

I'm looking for the best way to go about doing this, hope someone can help.
Posted by RGraph support on 1st January 2014
Hi there,

With canvas - redrawing or changing the data necessarily involves the whole canvas to be redrawn. You will need to update the ata property of the line chart object like this:

myLine.original_data[0] = A;


myLine.original_data[0] = B;


myLine.original_data[0] = C;

You can use the native JavaScript .concat() function to combine two arrays. Also, the RGraph p() function will assist whilst debugging - it simply alerts the variable that you pass it.

When you've updated the data you can just call RGraph.Redraw(); to Redraw the canvas.

Posted by Mike on 8th January 2014
Thanks for the fast reply, I've been working on other issues such as the best data source (thanks so much for developing the csv functionality, it's quite helpful and easy to pull data) and getting my chart ranges set.

I was wondering - my major issue is transitioning between two data sets - I'd hope that it could be done without the entire background disappearing is all. I've considered using a static grid or line background.

I'm also wondering if it's possible to have the column between two x axis on a line graph points be highlightable as the tooltip area for a particular point?

Thanks so much!
Posted by RGraph support on 8th January 2014
Hi there,

To redraw the canvas with a new dataset the entire canvas - background included - will need to be redrawn. You could do this by setting new data and calling RGraph.Redraw(). And you could also introduce a transition effect - eg fade the canvas out, switch the data, fade it back in. You could do that over 0.25 - 0.5 seconds to create a transition effect. There's a few transitions demonstrated in the HOWTO guides.

I don't know what you mean by your second point - there's a drawing API available which you can use to add extra axes if you want:



Add a reply

« Back to message list