Hide all series in canvasjs graph

Button to hide/unhide all series in canvasjs graph - using for

by flashback_ua

HTML

<script src="https://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: 300px; width: 100%;"></div>
<button id= "showAllSeries" style= "margin: 10px;">Show/Hide All series</button>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "Simple Multi-Series Line Chart"  
      },
      
      legend: {
            cursor: "pointer",
            itemclick: function (e) {
                //console.log("legend click: " + e.dataPointIndex);
                //console.log(e);
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
 
                e.chart.render();
            }
        },
      
      data: [
      { 
        showInLegend: true,
        type: "line",
        dataPoints: [
        { x: 10, y: 5 },
        { x: 20, y: 9},
        { x: 30, y: 17 },
        { 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,
        type: "line",
        dataPoints: [
        { x: 10, y: 31 },
        { x: 20, y: 35},
        { x: 30, y: 30 },
        { x: 40, y: 35 },
        { x: 50, y: 35 },
        { x: 60, y: 38 },
        { x: 70, y: 38 },
        { x: 80, y: 34 },
        { x: 90, y: 44}
      
        ]
      },
        {
        showInLegend: true,
        type: "line",
        dataPoints: [
        { x: 10, y: 25 },
        { x: 20, y: 30},
        { 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();
    
 document.getElementById("showAllSeries").onclick =  function(){
      
   for (var i = 0; i < chart.options.data.length; i++) {
  chart.options.data[i].visible = !chart.options.data[i].visible;
   }
   
   chart.render();
 };
 
 /* SECOND OPTION -USING forEach Loop:
 
 	           ...