add and toggle legend item to show or hide data series

[mohd7469]

could somebody tell how to hide/unhide data series on legend items click in Morris Line graph ?

[pierresh]

Hello,

you could set an array variable for the ykeys populated with the default ykeys.

Then when you click on legend items, it add/remove the associated ykey (i.e. in data attribute), then you update the ykeys options of Morris, then call the method .redraw()

[mohd7469]

@pierresh thanks for getting replied, can you show a basic example please, because i think i am doing the same

[pierresh]

Hello,

I just updated my fork to make this easier. A class per index is now added to line and circles. Then just just need to hide/display them when clicking on the legend.

Here below is working example: Javascript

<script>
    var tmp_array = ['nb', 'a'];
    Morris.Line({
        element: 'chart_line_1',
        data: [
            {year: '1958', nb: 1, a: 2},
            {year: '1962', nb: 2, a: 2},
            {year: '1970', nb: 3, a: 2},
            {year: '1994', nb: 4, a: 2},
            {year: '2002', nb: 5, a: 2},
        ],
        xkey: 'year',
        ykeys: tmp_array,
        dataLabels: false,
        labels: ['Editions Wins', 'Line 2']
    }).options.lineColors.forEach(function(color, a){ 
    if (tmp_array[a] != undefined) {
        $('#chart_line_1').parent('div')
                            .find('div.legend')
                            .append($('<span data-index="'+a+'">'+tmp_array[a]+'</span>')
                            .css('color', color));
        }
    });

    $('div.legend').on('click', 'span', function(){
        var index = $(this).data('index');
        if ($('#chart_line_1 path.line_'+index).hasClass('hidden')) {
            $('#chart_line_1 path.line_'+index).removeClass('hidden');
            $('#chart_line_1 circle.circle_line_'+index).removeClass('hidden');
        } else {
            $('#chart_line_1 path.line_'+index).addClass('hidden');
            $('#chart_line_1 circle.circle_line_'+index).addClass('hidden');
        }
    });
</script>

HTML

<div>
    <div id='chart_line_1' class='chart_morris'></div>
    <div class='legend'></div>
</div>

CSS

<style>
    .hidden { display:none!important; }
</style>