HOWTO: Add the ModalDialog to your charts

• Introduction
• The basic chart without the ModalDialog
• The ModalDialog
• Triggering the dialog with the new pseudo-events

Introduction

This is a step-by-step guide to implementing and using the ModalDialog that comes with RGraph. It can be used as a simple "Please wait..." style dialog or, as shown below, it could be used as a request for user input (a request for a username and password, for example). To get it up and running is quite simple, and you don't have to use it with RGraph charts - it can be used standalone as there are no dependencies on RGraph libraries.

The basic chart without the ModalDialog

The source-code for a basic chart used is shown below. The chart does not have the ModalDialog added to it yet - it's just a simple Bar chart.

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss', 'James'],
            textSize: 14
        }
    })
</script>

The ModalDialog

This is the div whose content is used as the ModalDialog. It is important to remember that only the contents are used, not the div itself. This means that you can hide the div with the display css property.

<!-- This is the popup dialog-->
<div id="myDialog" class="modalDialog" style="display: none">
    <b>Please login</b>
    <p>
        <table border="0" style="font-size: 16pt">
            <tr>
                <td align="right" style="padding-top: 4px">Email</td>
                <td><input type="text" size="20" name="email" style="font-size: 16pt; width: 150px" /></td>
            </tr>
            <tr>
                <td align="right" style="padding-top: 4px">Password</td>
                <td><input type="password" size="20" name="password" style="font-size: 16pt; width: 150px" /></td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <input type="reset" value="Cancel" style="cursor: pointer; font-size: 16pt" onclick="ModalDialog.Close()">
                    <input type="submit"
                              name="submit"
                              value="Login"
                              style="cursor: pointer; font-size: 16pt"
                              onclick="alert('This is just an example'); event.stopPropagation()">
                </td>
            </tr>
        </table>
    </p>
</div>

Triggering the dialog with the new pseudo-events

This function is used to show the dialog. Here, it's triggered using the RGraph event functions. Doing this means that you could also check the dataset of the bar that was clicked, which would allow you to show different dialogs based on the bar that was clicked.

<script>
    labels = ['Kev','Louise','Pete','Gary','Fliss', 'James'];
    
    function showDialog (e, shape)
    {
        // Check this index if you want to show different dialogs based on the bar that was clicked.
        // var index = shape.dataset;

        ModalDialog.show('myDialog');
    }

    new RGraph.Bar({
        id: 'cvs2',
        data: [4,8,6,3,5,8],
        options: {
            xaxisLabels: labels,
            textSize: 14,
            xaxisTickmarksCount: 0,
            yaxis: false,
            axesLinewidth: 2,
            backgroundGridBorder: false,
            backgroundGridVlines: false
        }
    }).draw().on('mousemove', function (e, shape)
    {
        return true;
    }).on('click', function (e, shape)
    {
        showDialog(e, shape);
    });
</script>

<!-- This is the popup dialog-->
<div id="myDialog" class="modalDialog" style="display: none">
    <b>Please login</b>
    <p>
            <table border="0" style="font-size: 16pt">
                <tr>
                    <td align="right" style="padding-top: 4px">Email</td>
                    <td><input type="text" size="20" name="email" style="font-size: 16pt; width: 150px" /></td>
                </tr>
                <tr>
                    <td align="right" style="padding-top: 4px">Password</td>
                    <td><input type="password" size="20" name="password" style="font-size: 16pt; width: 150px" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                        <input type="reset" value="Cancel" style="cursor: pointer; font-size: 16pt" onclick="ModalDialog.Close()">
                        <input type="submit"
                                  name="submit"
                                  value="Login"
                                  style="cursor: pointer; font-size: 16pt"
                                  onclick="alert('This is just an example'); event.stopPropagation()">
                    </td>
                </tr>
            </table>
    </p>
</div>