The exec function and configuration option

  Read comments...

Summary
The exec function and configuration option an be used to run a function there and then - right in the middle of the configuration - instead of waiting for an event.

The exec() configuration function comes in two flavours that differ slightly from each other. The first is as a configuration option that you can use when you want a function to run immediately in the configuration (as opposed to the onbeforedraw and ondraw events which occur when you call the .draw() function.

The version of this function that goes in the configuration is passed two arguments: the object and the configuration that has been read so far. So:

<script>
    var bar = new RGraph.Bar({
      id: 'cvs',
      data:  [2,2,2,1,2,3,2,3,4],
      options: {
        ylabels: false,
        exec: function (obj, conf)
        {
          // Because only the ylabels option is above the exec function only that will be in the
          // conf object at this point
          $p(conf);
        },
        colors: ['red','pink','blue','yellow','#0f0','gray','red','green','black'],
        colorsSequential: true,
        gutterLeft: 50
      }
    }).draw();
</script>

Multiple exec: options in the configuration

Because you wouldn't normally be able to do add two exec: options to the configuration object (the second would override the first) you have the facility to simply add a unique number to the end of the exec: property name so that it becomes something like this: exec2: or exec486:. The number itself doesn't matter - as long as it makes the property name unique. For example:

<script>
    var bar = new RGraph.Bar({
      id: 'cvs',
      data:  [2,2,2,1,2,3,2,3,4],
      options: {
        ylabels: false,
        
        // No number on the end of the property name necessary
        exec: function (obj, conf)
        {
          // Because only the ylabels option is above the exec function only that will be in the
          // conf object at this point
          $p(conf);
        },
        
        colors: ['red','pink','blue','yellow','#0f0','gray','red','green','black'],
        colorsSequential: true,
        gutterLeft: 50,
        
        // Append a number so that the property name is unique
        exec2: function (obj, conf)
        {
          // More options will be shown in the onfiguration object at this point - colors,
          // colorsSequential and gutterLeft.
          $p(conf);
        }
      }
    }).draw();
</script>

The exec function

Another option that you have is to use the exec() function. The difference to the configuration option is very subtle - this runs when the configuration has been parsed and the object has been configured. It can run either BEFORE the draw() function or AFTER depending on whether you put the function before or after the draw() call. Here's an example of it being used BEFORE the draw function call (so it's similar to the onbeforedraw event - but only runs once:
<script>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data:  [2,2,2,1,2,3,2,3,4],
        options: {
            ylabels: false,    
            colors: ['red','pink','blue','yellow','#0f0','gray','red','green','black'],
            colorsSequential: true,
            gutterLeft: 50
        }
    // The exec() function is before the draw() call so in effect it would be very
    // similar to a onbeforefirstdraw event - but that event doesn't exist.
    }).exec(function ()
    {
        alert('The chart has not been drawn yet.');

    }).draw();
</script>

And here is an example of using the exec function AFTER the draw function call. Remember that the exec function is only run ONCE - so it's very much alike to the onfirstdraw event that you can use. In fact the difference may be just syntax.

<script>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data:  [2,2,2,1,2,3,2,3,4],
        options: {
            ylabels: false,    
            colors: ['red','pink','blue','yellow','#0f0','gray','red','green','black'],
            colorsSequential: true,
            gutterLeft: 50
        }
    }).draw()

    // The exec() function is AFTER the draw() call so in effect it more or less
    // is the same as the onfirstdraw event.
    .exec(function ()
    {
        alert('The chart has been drawn at this point');
    });
</script>
Share RGraph
X

Comments