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.

Answer 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)
    // ...
};