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.
Microsoft Internet Explorer only supports fixed positioning in strict rendering mode, therefore you must specify a DTD when using this browser (if your page scrolls). Eg:
<!DOCTYPE html >
| Password | |