samedi 15 avril 2017

Highcharts - Dynamic graph with interactive checkboxes

I have been trying to create a graph in Highcharts where each series rely on 2 attributes - (Year and Fruit for example) that are selected using checkboxes. If Fruit Banana and Year 2000 boxes are ticked then the corresponding series Banana 2000 should be displayed in the graph.

Graph example

I have the following function for creating legends:

function DynamicCheckbox(filter, chart, legendContainerId) {
     for (var i in filter) {
        checkboxHtml = ' <label><input id="category' + i +
            '" type="checkbox" checked="checked" name="category' + i + '" value="" /> ' +
            filter[i] +
            '</label>';
        $('#' + legendContainerId).append(checkboxHtml);
    }
};

However I am having trouble binding events to them.

My idea is to have for each series a flag: isFruitChecked and isYearChecked which get updated as the associated checkbox is ticked. If both flags evaluate to true then the series is displayed.

I appreciate your help on this.

Thanks




Aucun commentaire:

Enregistrer un commentaire