How to combine the ModalDialog with the new dollar events

Share RGraph:   Share or Like RGraph on Facebook!

A guide for Combining the ModalDialog with the new dollar events

[No canvas support]

Here there is a straight-forward Bar chart that uses the dollar events to add some interactivity to the chart. When the second bar is clicked a ModalDialog is shown to the user. This dialog could then show further information to the user.

    window.onload = (function ()
        // First create the chart
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [4,8,5,3,5,6,8],
            options: {
                title: 'Bar chart with clickable second bar',
                labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                gutterTop: 30,
                backgroundGridAutofitNumvlines: 7
                textAccessible: true,
                textSize: 14
        // Now add The highlight for the clickable bar. The .ondraw event must be used
        // because if not then the highlight wouldn't get redrawn.
        .on('draw', function (e, shape)
            var idx = 1;
            var x = bar.coords[idx][0];
            var y = bar.coords[idx][1];
            var w = bar.coords[idx][2];
            var h = bar.coords[idx][3];
            bar.context.lineWidth = 5;
            bar.context.strokeStyle = 'red';
            bar.context.strokeRect(x, y, w, h);
        bar.$1.onmousemove = function (e, shape)
            return true;
        bar.$1.onclick = function (e, shape)
                'string:<div style="text-align: center"><h1>Notice:</h1><p>Put information ' +
                'here that you want to display to the user.</p><p></p></div>'
            // This stops the dialog from being hidden when it's clicked
            ModalDialog.dialog.onclick = function (e)
            // The default when clicking the window is to hide the dialog
            window.onclick = function (e)
© Copyright Richard Heyes 2008-2017