How to add the ModalDialog to your charts using the new pseudo-events

Summary: A guide for adding the ModalDialog to your charts using the RGraph pseudo-events. ModalDialogs are an easy way to increase the interactivity of your charts.

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 (for example a request for a username and password). 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 basic chart used is shown below. The chart does not have the ModalDialog added to it yet - it's just a simple Bar chart.

[No canvas support]
<script src="RGraph.bar.js" ></script>
<script src="RGraph.modaldialog.js" ></script>
<script src="RGraph.common.core.js" ></script>

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

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

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

Triggering the dialog with the new pseudo-events

This function is used to show the dialog. Here, it is 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.

[No canvas support]
<script src="RGraph.bar.js" ></script>
<script src="RGraph.modaldialog.js" ></script>
<script src="RGraph.common.core.js" ></script>

<script>
    labels = ['Kev','Louise','Pete','Gary','Fliss', 'James'];

    new RGraph.Bar({
        id: 'cvs1',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: labels,
            textSize: 14
        }
    }).draw();
    
    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">
                <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 -->