So you want only the first series to be shown by default and then yo want subsequent ones to be toggled on click. Like in the jsfiddle?
You’d need to use the m_chart_chart_args
filter hook. Then you’d loop through the series and set all but the first to be visible: false
then you’d need to add the event to the chart args.
The value passed by m_chart_chart_args
matches up with the Highcharts chart args objects only it’s a PHP array which then gets converted to a JSON string after the fact.
You’ll see the series in there. You could add the visible false value to them with something like this:
foreach ( $chart_args['series'] as $key => $set ) {
if ( 0 == $key ) {
continue;
}
$chart_args['series'][ $key ]['display'] = false;
}
Then you would add the event stuff with something that looks like this:
$chart_args['series']['events']['legendItemClick'] = 'function(event) {
var selected = this.index;
var allSeries = this.chart.series;
$.each(allSeries, function(index, series) {
selected == index ? series.show() : series.hide();
});
return false;
}';
Hopefully I’m making sense.
Keep in mind I haven’t tested any of that code so I might have made a typo or syntax error in there or something. Or I might be remembering the array structure a bit wrong. But that should point you in the right direction.