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 the only option is to show a login dialog. This could, for example, be used to allow logging in to an admin area.
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 it's now part of the RGraph package. It's also covered by the RGraph license - so if you have an RGraph license, then the ModalDialog is part of that.
<script src="RGraph.common.js">
<script src="RGraph.line.js">
<script src="RGraph.modaldialog.js">
<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', 'white');
line.Set('chart.background.barcolor2', 'white');
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', [['Login to admin area...', 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. Eg:
<!DOCTYPE html >
To hide the ModalDialog (from a "Cancel" button for example), you can use the Close() method:
<input type="reset" value="Cancel" onclick="ModalDialog.Close()">
You can customise the appearance of the ModalDialog by using three CSS classes, which are documented here. This page customises the dialog slightly by change the shadow X/Y offsets:
<style>
/*
* These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you trying to
* override something which the scripts set, then because of the ordering you may need to use the "! important"
* modifier.
*/
/**
* This is the semi-opaque background
*/
.ModalDialog_background {
}
/**
* This is the dialog itself
*/
.ModalDialog_dialog {
-webkit-box-shadow: gray 0 0 15px ! important;
-moz-box-shadow: 0 0 15px gray ! important;
box-shadow: 0 0 15px gray ! important;
}
/**
* This is gray bar at the top of the dialog
*/
.ModalDialog_topbar {
}
</style>
To integrate the ModalDialog look at the sample code above (the key line is where the context menu is defined). The method you should call is ModalDialog.Show(id, width). The id is the id of the layer to use. Only the .innerHTML is used, not the layer itself, so it can be hidden by setting the display CSS display property to none. The width is a number which is used as the width of the dialog.
The only library needed for the ModalDialog to work is RGraph.modaldialog.js - you do not need to use RGraph.common.js. This makes for far smaller download requirements.