Search code examples
javascripthtmlcanvasrgraph

changing rgraph color without resetting the graph

I try to set a diffrent graph color depending on a user given threshold. The examples given recommend you to reset the graph using RGraph.Reset(graph1); and then redrawing the graph entirely: 

            graph[graph1]  = new RGraph.VProgress({
            id: graph1,
            min: 0, 
            max: 40,
            value: celsius[graph1],
            options: {scale: {decimals: 1},
            gutter: {left:  2, right: 40, bottom: 10},
            labels: {position: "right", count: 5},
            colors:['#FF0000']}
            }).draw

While this works as expected (graph is now in new color), the redraw animation starts from graphs bottom all the way up to the new value. Because of the way the application works (think of it as a thermometer) the graph keeps redrawing what results in a nasty looking animation.

I tried graph[graph1].colors ='#5A8F29'; with no success. Is there a way to manipiluate the graphs color without resetting it or a way to animate it more elegant?

Link to screenshot
Link to Gif (the recording messed with the color, important is the change form green to red / blue to red)

Solution

  • The support helped me out:

    graph[graph1].set('colors', ['#FF0000']);
RGraph.redraw();

    This did the trick. No resetting is needed here.