How to use the ModalDialog with events

  Read comments...

Summary
A guide for adding the ModalDialog to your charts using the new 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 below, it could be used as a user input request. 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>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,6,5,3,8,9],
        options: {
            labels: ['Kev','Louise','Pete','Gary','Fliss', 'James'],
            textAccessible: true,
            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>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,6,5,3,8,9],
        options: {
            labels: ['Kev','Louise','Pete','Gary','Fliss', 'James'],
            textAccessible: true,
            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 new RGraph event functions. Doing this means that you could also check the index 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>
    function ShowDialog (e, bar)
    {
        // Check this index if you want to show different dialogs based on the bar that was clicked.
        var index = bar[5];

        ModalDialog.Show('myDialog');
        
    }
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,6,5,3,8,9],
        options: {
            labels: ['Kev','Louise','Pete','Gary','Fliss', 'James'],
            .set('events.mousemove',function (e, bar)
            {
                return true;
            })
        }
    }).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 -->
Share RGraph
X

Comments