CODEWITHSUNDEEP
jquerygraphplotjqplotlegend
saurjk
saurjk

Reputation: 993

Add Checkbox to legend of a jqplot line graph

I have been using jqplot to plot the line graph in a site I am working on currently. I love how it give me an option to toggle a line series by clicking on the series name in its legend. However, my problem is, the users don't know that they can click on the series name to toggle the series and keep asking how to do it.

How can I add a checkbox beside the series name together with the clickable series name so that the users know that it can be clicked to show/hide a line from the graph? I have been searching for a while but have not been able to find a solution.

Thanks for any help provided.

Upvotes: 1

Views: 1285

Answers (1)

mcissel
mcissel

Reputation: 120

I've made a function that adds checkboxes to the legend. It then gives the checkboxes the functionality of showing/hiding trendlines for each series. Then it adds instructions to the bottom of the legend. If anybody else is looking for how to do this, here it is:

function addTrendLineButtons() {
    $legend = $("table.jqplot-table-legend", $chartCanvas);
    $legendRows = $("tbody tr.jqplot-table-legend", $legend);

    $legendRows.each(function(idx) {
        $checkbox = $('<input />', {
            type: 'checkbox',
            checked: $jqPlot.options.series[idx].trendline.show
        });
        $checkbox.appendTo($(this));
        $checkbox.change(function() {
            $jqPlot.options.series[idx].trendline.show = $(this).is(":checked");
            $jqPlot.replot($jqPlot.options);
            addTrendLineButtons();
        });
    });

    $instructions = $('<tfoot><tr><td colspan=3>Check box to<br />show trendline</td></tr></tfoot>');
    $instructions.css('text-align', 'right');
    $instructions.appendTo($legend);
}

Note: you must have already explicitly created the trendline object for each series, not just in the seriesDefaults object.

Upvotes: 2

Related Questions