This page shows you how you can easily integrate the charts with other external Javascript libraries. This particular example adds a context menu to the chart, 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.core.js">
<script src="RGraph.common.context.js">
<script src="RGraph.line.js">
<script src="RGraph.modaldialog.js">
<script>
window.onload = function ()
{
/**
* Draw the line chart
*/
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 chart 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>
<!-- This is the popup dialog-->
<div id="myDialog" class="modalDialog" style="display: none">
<b>Please login</b>
<p>
<table border="0">
<tr>
<td align="right" style="padding-top: 4px">Email</td>
<td><input type="text" size="20" name="email" style="width: 150px" /></td>
</tr>
<tr>
<td align="right" style="padding-top: 4px">Password</td>
<td><input type="password" size="20" name="password" style="width: 150px" /></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="reset" value="Cancel" onclick="ModalDialog.Close()">
<input type="submit"
name="submit"
value="Login »"
onclick="alert('This is just an example'); event.stopPropagation()">
</td>
</tr>
</table>
</p>
</div>
<!-- End of dialog -->
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 8 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 changing the shadow X/Y offsets:
<style>
/*
* These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're 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.
Normally, a regular DIV lives inside the browser and cannot cover the scroll bars. There is however a way to achieve this but it does mean that restructuring your website may be necessary, and it's done by using an IFRAME. The following steps are involved:
There is an example of this technique here