Showing only one dataSeries on legend item click - CanvasJS JavaScript Charts

Showing only one dataSeries on legend item click - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
      title: {
        text: "Click on legend to show corrosponding dataseries"
      },
      legend: {
        cursor: "pointer",
        itemclick: function(e) {
          var data = e.chart.options.data;
          for (var i = 0; i < data.length; i++) {
            data[i].visible = false;
          }
          e.dataSeries.visible = true;

          e.chart.render();
        }
      },
      data: [{
            showInLegend: true,
            //visible: false,
            click: onClick,
            type: "bar",
            dataPoints: [
            		{ x: 10, y: 5 },
                { x: 20, y: 9 },
                { x: 30, y: 0 }, 
                { x: 40, y: 32 }, 
                { x: 50, y: 22 }, 
                { x: 60, y: 14 }, 
                { x: 70, y: 25 }, 
                { x: 80, y: 18 }, 
                { x: 90, y: 20 }
            ]
        	}, {
            showInLegend: true,
            visible: false,
            click: onClick,
            type: "bar",
            dataPoints: [
            		{ x: 10, y: 31},
                { x: 20, y: 35},
                { x: 30, y: 30},
                { x: 40, y: 35},
                { x: 50, y: 0},
                { x: 60, y: 38},
                { x: 70, y: 38},
                { x: 80, y: 34},
                { x: 90, y: 44}
            ]
        	}, {
            showInLegend: true,
            visible: false,
            click: onClick,
            type: "bar",
            dataPoints: [
            		{ x: 10, y: 25 },
                { x: 20,  y: 0 },
                { x: 30, y: 20 },
                { x: 40, y: 45 },
                { x: 50, y: 30 },
                { x: 60, y: 10 },
                { x: 70, y: 15 },
                { x: 80, y: 18 },
                { x: 90, y: 20 }
            ]
        }]
    });

chart.render();
function onClick(e) {
		alert( "dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " } Clicked" );
}