RGraph: Integrating RGraph with external libraries

This page shows you how you can easily integrate the graphs with other external Javascript libraries. This particular example attaches a context menu to the graph, of which one of the options is to show a dialog. This could, for example, be used to confirm actions before taking them.

The dialog doesn't need to require user input - it could just be a static "Please wait..." type dialog, which is shown while a subsequent page loads that takes a few seconds.

The ModalDialog was originally an external library, however I've now incorporated it into RGraph for ease. It's also covered by the RGraph license - so if you have an RGraph license, then the ModalDialog is included.

<script>
    window.onload = function ()
    {
        /**
        * Draw the line graph
        */
        var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]);
        line.Set('chart.background.barcolor1', '#fff');
        line.Set('chart.background.barcolor2', '#fff');
        line.Set('chart.tickmarks', null);
        line.Set('chart.hmargin', 10);
        line.Set('chart.linewidth', 3);
        line.Set('chart.shadow', true);
        line.Set('chart.shadow.offset', 2);
        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
        line.Set('chart.title', 'A line graph with context menu');

        // This defines a context menu which calls the given function. This function in turn shows the dialog
        line.Set('chart.contextmenu', [['Show dialog', function () {ModalDialog.Show('myDialog', 300);}]]);

        line.Draw();
    }
</script>

If you're interested in using this modal dialog, then you'll probably also want the CSS that styles it. This can be found in the "css" directory.

An example dialog

This is an example of combining the graphs, the context menu and external libraries. You could use this ModalDialog, for example, to prompt the user for further information or to confirm actions.

Close