javascript animation of a water tank

Question

I am trying to use RGraph library to manipulate a vertical progress bar, but I'm stuck because after creating the progress bar I can't manipulate its properties, here's the code I have been using:

 window.onload = function ()
{
    // Create the object. The arguments are: The canvas ID, the indicated value and the maximum value.
    var myProgress = new RGraph.VProgress('myProgress', 60, 100)

        // Configure the chart to look as you want.
        .Set('chart.colors', ['blue'])

        .Set('chart.tickmarks',['true'])

        .Set('chart.tickmarks.color',['white'])

        .Set('chart.title',"Nivel")

        // Now call the .Draw() method to draw the chart.
        .Draw();




}

and after that I try to read the value property using a click on a button,but it says undefined:

function myFunction()
{
   var valor= myProgress.value;
   alert(valor);


}

How can I access the properties of an object created in another function? My idea is to change the level of the progress bar according to a control put in the webpage.

Thanks in advance for any help supplied.

score 1 · Accepted Answer · answered Sep 24 '13 at 20:41

1

myProgress is scoped within your onload handler, thus it can't be seen by other functions out of that scope.

var myProgress;
window.onload = function() {
    myProgress = new RGraph.VProgress('myProgress', 60, 100)
    // ...
};

answered Sep 24 '13 at 20:41

epoch

16,396
4
43
71

You'll also need to redraw the canvas after you change the value: RGraph.Redraw(); – Richard Oct 01 '13 at 07:41
Thanks for the answer, I did that, and to change the value I did this: function ChangeLevel(value){ Tank.value=value; Tank.Draw(); } – carlos palma Oct 03 '13 at 18:51

javascript animation of a water tank

1 Answers1