Integrating RGraph with external libraries

Share RGraph:   

Summary
Documentation about integrating RGraph with external libraries (such as the ModalDialog that now comes with RGraph)

[No canvas support]

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.



<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 ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: [45,12,16,18,44,54,23,21,56,58,33,47],
            options: {
                backgroundColor: 'white',
                tickmarks: null,
                hmargin: 10,
                linewidth: 3,
                shadow: false,
                title: 'A line chart with context menu',
                textAccessible: true,
                textSize: 16,
                // 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);}}]]
            }
        }).trace();
    })
</script>

<!-- This is the popup dialog (an alternative is to use supply the HTML for the dialog 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.

 

Note about Microsoft Internet Explorer 8 and the ModalDialog

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 >

 

Hiding the ModalDialog

To hide the ModalDialog (from a "Cancel" button for example), you can use the 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 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>

 

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 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.

 

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>
    var 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.

Comments

Add a new comment...