An SVG Bar chart that's clickable

There's a canvas HOWTO document that shows a demo of what's being done here - it's less code which means less to both understand and maintain. You can find that here.

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="width: 750px; height: 300px" id="chart-container"></div>

This is the code that generates the chart:

<script>
    state2 = localStorage['state2'] ? JSON.parse(localStorage['state2']) : {selected: []};

    new RGraph.SVG.Bar({
        id: 'cc',
        data: [14,39,-32,-12,8,6,-5],
        options: {
            yaxisMax: 40,
            yaxisMin: -40,
            yaxis: false,
            xaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }
    }).on('draw', function (obj)
    {
        // Loop through all the bars
        for (var i=0; i<obj.coords.length; ++i) {
            (function (index, rect)
            {
                // Change the pointer when hovering over the rect
                rect.addEventListener('mousemove', function (e)
                {
                    e.target.style.cursor = 'pointer';
                }, false);




                //
                // Do this when the rect is clicked
                //
                rect.addEventListener('click', function (e)
                {
                    if (!state2.selected[index]) {

                        // Add the highlight
                        highlight(obj, rect, index);

                        state2.selected[index] = true;

                        // The notify function simply tells the server what 
                        // bars are selected
                        //
                        notify();

                    } else {
                        state2.selected[index] = null;
                    }
                }, false);
            })(i, obj.coords[i].object);
        }

        // Read the state2 variable and cover the relevant bars
        for (var i=0; i<obj.data.length; ++i) {
            if (state2.selected[i]) {
                highlight(obj, obj.coords[i].object, i);
            }
        }
    }).draw();




    //
    // Sends notification to the server
    //
    function notify()
    {
        // Save the state2 to localStorage
        localStorage['state2'] = JSON.stringify(state2);

        // Generate an AJAX request
        RGraph.SVG.AJAX.POST('?', {state2: state2.selected}, function (str)
        {
            // Handle the AJAX response here
        });
    }




    //
    // Highlights a bar by adding a rect on top of it
    //
    function highlight(obj, rect, index)
    {
        rect.rgraph_highlight = RGraph.SVG.create({
            svg: obj.svg,
            type: 'rect',
            parent: obj.svg.all,
            attr: {
                x:              rect.getAttribute('x'),
                y:              rect.getAttribute('y'),
                width:          rect.getAttribute('width'),
                height:         rect.getAttribute('height'),
                fill:           'rgba(255,255,255,0.7)',
                stroke:         'black',
                'stroke-width': 3
            }
        });


        //
        // When the highlight is clicked - get rid of it and call
        // the notify() function to update the server.
        //
        rect.rgraph_highlight.onclick = function (e)
        {
            obj.svg.all.removeChild(rect.rgraph_highlight);
            rect.rgraph_highlight  = null;
            state2.selected[index] = null;
            
            notify();
        }

        rect.rgraph_highlight.style.cursor = 'pointer';
    }
</script>

« Back