How to combine the ModalDialog with the new dollar events

Share RGraph:   

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


<script>
    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);
        
        }).draw()
        
        bar.$1.onmousemove = function (e, shape)
        {
            return true;
        }
        
        bar.$1.onclick = function (e, shape)
        {
            ModalDialog.show(
                '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)
            {
                e.stopPropagation();
            }
            
            // The default when clicking the window is to hide the dialog
            window.onclick = function (e)
            {
                ModalDialog.hide();
            }
            
            e.stopPropagation();
        }
    }
</script>

Comments

Add a new comment...