Chartjs-Separating results in chartjs line chart

0👍

What I understand, you have draw all the charts you want and know you want to hide all other and show the selected ones.
We can achieve this through Legends, when user click on the legend its display will toggle from graph.

Or we can achieve like this jsFiddle

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "First",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,20,20,1)",
        pointColor: "rgba(220,20,20,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 90]
    }, {
        label: "Second",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(15,187,25,1)",
        pointColor: "rgba(15,187,25,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [38, 55, 50, 65, 35, 67, 54]
    }]
};

var options = {
    // String - Template string for single tooltips
    tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
    // String - Template string for multiple tooltips
    multiTooltipTemplate: "<%= value + ' %' %>",
};

var ctx = document.getElementById("myChart").getContext("2d");

window.myLineChart = new Chart(ctx).Line(data, options);
window.myLineChart.store = new Array();


$('#selectbox').change(function () {
    var label = $('#selectbox').val();
    var chart = window.myLineChart;
    var store = chart.store;
    var finded = false;

    //Restore all
    for (var i = 0; i < store.length; i++) {
      var restored = store.splice(i, 1)[0][1];
      chart.datasets.push(restored);
    }
    //Если нет, то добавляем в стор
    if (label!='All') {
        console.log('Start search dataset with label = ' + label);
        for (var i = 0; i < chart.datasets.length; i++) {
            if (chart.datasets[i].label === label) {
                chart.store.push([label, chart.datasets.splice(i, 1)[0]]);
            }
        }
    }
    chart.update();
});

Leave a comment