Highcharts 2 groups of series

Question

I want to display a chart (that takes the data from a PHP file with JSON) with two dimensions of series : the first one is the technology used (5 in total), and the other one is the export or import.

So when the user is on the page, he can choose to diplay the technology, as export, import or both. In first, to join one technology import with the same in export, I have used a "linkedto=previous", the result is a single item in the legend per technology.

But I would like to add two items in the legend : "Import" and "Export", with 0 data, that would permit to display or not the import or the export.

I have used this code, but I can't find how to display the choice of import, export, the both, or nothing.

Thank you very much if you take a bit of time to read my post. BR

$(function () {

     var chart;
     $(document).ready(function() {


    var options = {
         chart: {
        renderTo: 'euro',
            type: 'column'
        },

        title: {
            text: 'Vision en euro'
        },

        xAxis: {
            categories: []
        },

        yAxis: {

            title: {
                text: 'k€'
            },

            stackLabels: {
                enabled: true,
                rotation: 30,
            }
        },

         tooltip: {
            headerFormat: '{point.x}<b></b><br/>',

        },

          plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: false,
                },

                }
            },





        series: []
        };




        Highcharts.setOptions(Highcharts.theme);
      $.getJSON('SOURCE.php', function(json) {
       options.xAxis.categories = json[0]['month'];

         options.series[0] = {};
        options.series[0].name = 'TECHNO 1';
        options.series[0].data = json[1]['data'];
        options.series[0].stack ='EXPORT';
        options.series[0].color= '#808080';

       options.series[1] = {};
       options.series[1].name = 'TECHNO 1';
       options.series[1].data = json[0]['data'];
        options.series[1].stack = 'IMPORT';
        options.series[1].linkedTo = ':previous';
        options.series[1].color= 'url(#highcharts-default-pattern-0)';

        options.series[2] = {};
       options.series[2].name = 'TECHNO 2';
       options.series[2].data = json[3]['data'];
        options.series[2].stack = 'EXPORT';
        options.series[2].color= '#FFC125';

        options.series[3] = {};
       options.series[3].name = 'TECHNO 2';
       options.series[3].data = json[2]['data'];
        options.series[3].stack = 'IMPORT';
        options.series[3].linkedTo = ':previous';
        options.series[3].color= 'url(#highcharts-default-pattern-1)';

        options.series[4] = {};
       options.series[4].name = 'TECHNO 3';
       options.series[4].data = json[5]['data'];
        options.series[4].stack = 'EXPORT';
        options.series[4].color= '#2B99FF';

        options.series[5] = {};
       options.series[5].name = 'TECHNO 3';
       options.series[5].data = json[4]['data'];
        options.series[5].stack = 'IMPORT';
        options.series[5].linkedTo = ':previous';
        options.series[5].color= 'url(#highcharts-default-pattern-2)';

        options.series[6] = {};
       options.series[6].name = 'TECHNO 4';
       options.series[6].data = json[7]['data'];
        options.series[6].stack = 'EXPORT';
        options.series[6].color= '#C72828';

        options.series[7] = {};
       options.series[7].name = 'TECHNO 4';
       options.series[7].data = json[6]['data'];
        options.series[7].stack = 'IMPORT';
        options.series[7].linkedTo = ':previous';
        options.series[7].color= 'url(#highcharts-default-pattern-3)';

        options.series[8] = {};
       options.series[8].name = 'TECHNO 5';
       options.series[8].data = json[9]['data'];
        options.series[8].stack = 'Sortie';
        options.series[8].color= '#1CA154';

        options.series[9] = {};
       options.series[9].name = 'TECHNO 5';
       options.series[9].data = json[8]['data'];
        options.series[9].stack = 'EXPORT';
        options.series[9].linkedTo = ':previous';
        options.series[9].color= 'url(#highcharts-default-pattern-4)';

        options.series[10] = {};
       options.series[10].name = 'IMPORT';
              options.series[10].data = json[10]['data'];
       options.series[10].stack = 'IMPORT';
        options.series[10].color= 'url(#highcharts-default-pattern-5)';

        options.series[11] = {};
       options.series[11].name = 'EXPORT';
              options.series[11].data = json[11]['data'];
       options.series[11].stack = 'IMPORT';
        options.series[11].color= 'url(#highcharts-default-pattern-5)';


        //options.series[1].color= '#C89B9B';


       chart = new Highcharts.Chart(options);
   });
});

});

Answer 1

First of all, you can hide or show a series in a chart by modifying the "visible" property of a series object to false or true respectively. For example:

options.series[10].visible = true; // or false

Secondly, you can achieve that in an event listener (the push of a button for example), using chart.update() method, and passing the changes as an argument. Have a look in here: Dynamic charts -> update options after render. But the simplest solution is to just repeat the

chart = new Highcharts.Chart(options);

statement, after you have put in the series object the "visible" property with the value you like, for each series (import/export) you want to show or hide.

Finally, having 2 kinds of clickable labels in the legend can only be done with some custom jquery programming of your own. I think a couple of small buttons next to the chart would be much easier and faster to implement.