Integrating with other libraries

• Introduction
• Hiding the ModalDialog
• Customising the ModalDialog
• ModalDialog integration
• Covering the scroll bars
• Supplying the dialog as a string

Introduction

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 into a user account or 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, which takes a few seconds.

The ModalDialog was originally an external library, however, it's now part of the RGraph package.

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.context.js"></script>
<script src="RGraph.line.js"></script>
<script src="RGraph.modaldialog.js"></script>

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [45,12,16,18,44,54,23,21,56,58,33,47],
        options: {
            backgroundBarsColor1: 'rgba(240,240,255,0.75)',
            backgroundBarsColor2: 'white',
            backgroundGrid: false,
            tickmarksStyle: null,
            marginInner: 10,
            linewidth: 3,
            shadow: false,
            xaxisLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            title: 'A line chart with context menu',
            marginBottom: 35,
            marginTop: 35,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false,
            textSize: 14,
            // This defines a context menu which calls the given function.
            // This function in turn shows the dialog
            contextmenu: [['Login to admin area...', function () {ModalDialog.show('myDialog', 300);}]]
        }
    }).draw();
</script>

<!-- This is the popup dialog (an alternative is to use supply the HTML that the dialog uses as a string: -->
<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.

Hiding the ModalDialog

To hide the ModalDialog (from a "Cancel" button for example), you can use the ModalDialog.close method:

<input type="reset" value="Cancel" onclick="ModalDialog.close()">

Customising the ModalDialog

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 */
    .ModalDialog_dialog {
        box-shadow: none !important;
    }


    /* This is gray bar at the top of the dialog */
    .ModalDialog_topbar {
    }
</style>

ModalDialog integration

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 that 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.core.js. This makes for far smaller download requirements.

Covering the scroll bars

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:

1. The index page of your website creates an iframe and sets it to cover the entire window.
2. This iframe then loads the website.
3. The div then covers the top-most window.

The ModalDialog doesn't use this technique because it would require restructuring of your website, but there is an example of it here

Supplying the dialog as a string

Normally, having forms in you ModalDialog isn't a problem. However, if you want to access the form elements with javascript it can be tricky because there are two form elements with the same ID - the original, hidden one, and also the one in the ModalDialog when it's shown. Because of this you can now (February 2012) supply the dialog as a string, like this:

<script>
    str = 'string:<h1>My Dialog</h1><p align="center"><button' +
          'onclick="ModalDialog.close();">Close</button></p>'
    
    ModalDialog.show(str);
</script>

Also, you may find this method easier to use if you are showing multiple different dialogs on your page.