Updating graph #135

Open
edasque opened this Issue Oct 10, 2012 · 11 comments

Comments

Projects
None yet
9 participants
@edasque

edasque commented Oct 10, 2012

I can't just addData, I get a whole new data set of 120 points every 10 seconds.

Should the following work:

        graph.configure({series: graph_data});

        graph.render();

I don't see my graph updating and from what I can tell, my series hasn't been updated either, looking at graph.series

What am I missing? Can configure not update the series, is addData the only way but it cannot completely replace the data? is Rickshaw.Series.FixedDuration the way?

@smithclint

This comment has been minimized.

Show comment Hide comment
@smithclint

smithclint Oct 10, 2012

I am trying to do the same thing but I haven't figured it out yet. I have been able to add/remove lines by pushing/popping from an array of series here http://jsfiddle.net/csmithmaui/pgx72/ but I am not having much luck in my acutal code.

I am trying to do the same thing but I haven't figured it out yet. I have been able to add/remove lines by pushing/popping from an array of series here http://jsfiddle.net/csmithmaui/pgx72/ but I am not having much luck in my acutal code.

@dchester

This comment has been minimized.

Show comment Hide comment
@dchester

dchester Oct 12, 2012

Contributor

We could definitely do a better job at supporting this particular use case. At the moment, you have to reach in and manipulate data attributes of the objects in graph.series directly, and then call graph.render().

Contributor

dchester commented Oct 12, 2012

We could definitely do a better job at supporting this particular use case. At the moment, you have to reach in and manipulate data attributes of the objects in graph.series directly, and then call graph.render().

@abarre

This comment has been minimized.

Show comment Hide comment
@abarre

abarre Oct 12, 2012

@dchester, do you have a working example for this case?

Do we have to modify both seriesand stackedDataattributes?

I did something like that but it is not working (the graph is not updated).
In the example, the graph is generated from the ajax wrapper.
By the way, I see some issues saying that we have to use the addData function but there is not addData function in the series' attributes.

var 
    i,
    j,
    len = newData.length,
    len2 = graph.stackedData[0].length;

for (i= 0; i < len ; i ++) {
    graph.series[i].data = newData[i].data;
    for (j = 0; j < len2; j ++) {
        graph.stackedData[i][j] = {
            x : newData[i].data[j].x,
            y : newData[i].data[j].y,
            y0 : 0
        };
    }
}

graph.update()

abarre commented Oct 12, 2012

@dchester, do you have a working example for this case?

Do we have to modify both seriesand stackedDataattributes?

I did something like that but it is not working (the graph is not updated).
In the example, the graph is generated from the ajax wrapper.
By the way, I see some issues saying that we have to use the addData function but there is not addData function in the series' attributes.

var 
    i,
    j,
    len = newData.length,
    len2 = graph.stackedData[0].length;

for (i= 0; i < len ; i ++) {
    graph.series[i].data = newData[i].data;
    for (j = 0; j < len2; j ++) {
        graph.stackedData[i][j] = {
            x : newData[i].data[j].x,
            y : newData[i].data[j].y,
            y0 : 0
        };
    }
}

graph.update()
@edasque

This comment has been minimized.

Show comment Hide comment
@edasque

edasque Oct 15, 2012

I haven't been able to get this working by modifying the series directly or through configure.

edasque commented Oct 15, 2012

I haven't been able to get this working by modifying the series directly or through configure.

@abarre

This comment has been minimized.

Show comment Hide comment
@abarre

abarre Oct 15, 2012

Ok @edasque,

If you could share the code you use to update the graph, it would help me.

Regards,

abarre commented Oct 15, 2012

Ok @edasque,

If you could share the code you use to update the graph, it would help me.

Regards,

@edasque

This comment has been minimized.

Show comment Hide comment
@edasque

edasque Oct 16, 2012

I did this which worked:

        graph.series[0].data=graph_data;
        console.log("Updating graph, got new data. Most recent: "+graph_data[graph_data.length-1].y)
        graph.update();

Ideally you'd be able to modify the data with a method call of graph instead of having to access the member variable directly.

edasque commented Oct 16, 2012

I did this which worked:

        graph.series[0].data=graph_data;
        console.log("Updating graph, got new data. Most recent: "+graph_data[graph_data.length-1].y)
        graph.update();

Ideally you'd be able to modify the data with a method call of graph instead of having to access the member variable directly.

@ergo

This comment has been minimized.

Show comment Hide comment
@ergo

ergo Jan 16, 2013

my fork adds support for this properly i think,

this commit in particular:

https://github.com/ergo/rickshaw/commit/d2e75b9d9f5b0fddf636f0bc71c359759e86f9e8
X, Y axes gets updated, just legend needs to be fixed.

now we need to get this to trunk :-)

ergo commented Jan 16, 2013

my fork adds support for this properly i think,

this commit in particular:

https://github.com/ergo/rickshaw/commit/d2e75b9d9f5b0fddf636f0bc71c359759e86f9e8
X, Y axes gets updated, just legend needs to be fixed.

now we need to get this to trunk :-)

@zanetaylor

This comment has been minimized.

Show comment Hide comment
@zanetaylor

zanetaylor Jan 22, 2014

It would be great to get this in place.

It would be great to get this in place.

@eladmoshe

This comment has been minimized.

Show comment Hide comment
@eladmoshe

eladmoshe Apr 24, 2014

+1

+1

@maxcal

This comment has been minimized.

Show comment Hide comment
@maxcal

maxcal May 10, 2014

+1

Here is an example that worked for me to replace all series:

series = [
    {
        name: 'Sexiness',
        color: "#3064B8",
        data: data[0]
    },
    {
        name: 'Alcohol consumption',
        color: "#91B4ED",
        data: data[1]
    }
];

$(graph.series).each(function(i){
    graph.series[i] = series[i];
});

maxcal commented May 10, 2014

+1

Here is an example that worked for me to replace all series:

series = [
    {
        name: 'Sexiness',
        color: "#3064B8",
        data: data[0]
    },
    {
        name: 'Alcohol consumption',
        color: "#91B4ED",
        data: data[1]
    }
];

$(graph.series).each(function(i){
    graph.series[i] = series[i];
});
@ileathan

This comment has been minimized.

Show comment Hide comment
@ileathan

ileathan Nov 17, 2017

20 years later I went through the above posts and nothing worked.. So I just went into my console and played with it, now this works. (Assuming graph is the variable name for your graph and series for your series data.)

      let p = graph.series.active; // preserve this 'needed' function
      series = []; // reset the data to an empty array
      setData(); // populate series with new data
      graph.series = series; // set graph data to new data
      series.active = p; // unpreserve
      graph.update(); // update

EDIT: I came back here to get this code because I redid my project, and I wanted to add that to then recreate the legend I did

  document.getElementById('legend').innerHTML = "";
  legend = new Rickshaw.Graph.Legend({
    graph: graph,
    element: document.getElementById('legend')
  });

ileathan commented Nov 17, 2017

20 years later I went through the above posts and nothing worked.. So I just went into my console and played with it, now this works. (Assuming graph is the variable name for your graph and series for your series data.)

      let p = graph.series.active; // preserve this 'needed' function
      series = []; // reset the data to an empty array
      setData(); // populate series with new data
      graph.series = series; // set graph data to new data
      series.active = p; // unpreserve
      graph.update(); // update

EDIT: I came back here to get this code because I redid my project, and I wanted to add that to then recreate the legend I did

  document.getElementById('legend').innerHTML = "";
  legend = new Rickshaw.Graph.Legend({
    graph: graph,
    element: document.getElementById('legend')
  });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment