Add/delete charts dynamically based on user's input - CanvasJS JavaScript Charts

Add/delete charts dynamically based on user's input - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

Add Chart Title: <input type="text" id="chartName">
<button id="addChart">Add Chart</button>
<button id="removeChart">Delete Chart</button>

JavaScript

var currentChartCount = 0;
var chart = [];
var chartDict = [];
var xVal = 0;
var yVal = 15;	
var updateInterval = 1000;
var updatedChart = 0;
var exactChartCount = 0;

//adding a new chart
document.getElementById("addChart").addEventListener("click", function(){
  var name=document.getElementById("chartName").value;

  if (name in chartDict){
    alert("Name already exists");
    return ;
  }

  var div=document.createElement("div");
  div.style.width="100%";
  div.style.height="185px";
  div.id="chartContainer"+currentChartCount;
  document.body.appendChild(div);
  chartDict[name]=currentChartCount;

  chart[currentChartCount]= new CanvasJS.Chart("chartContainer"+currentChartCount, {
    title :{
      text: name
    },
    data: [{
      type: "line",
      dataPoints: []
    }]
  });
  chart[currentChartCount].render();
  currentChartCount++;
  exactChartCount++;

  if(currentChartCount == 1)
    startUpdation();
});

//removing a chart
document.getElementById("removeChart").addEventListener("click", function(){
  var name=document.getElementById("chartName").value;

  if(name in chartDict){
    document.getElementById("chartContainer"+chartDict[name]).outerHTML="";
    //removing a chart from the chart array based on the title
    chart.splice(chartDict[name],1);
    delete chartDict[name];
    exactChartCount--;
  }
  else{
    alert("Invalid name");
  }
	//resetting the values if the last chart is deleted
  if( exactChartCount === 0 ){
    currentChartCount = 0;
    terminateUpdation();
  }    
});

//updating the charts dynamically
var updateChart = function () {
  yVal = yVal +  Math.round(5 + Math.random() *(-5-5));

  for(var i =0; i<chart.length; i++){
    if(chart[i] !== undefined){
      chart[i].options.data[0].dataPoints.push({x: xVal,y: yVal}); 
      xVal++;
      chart[i].render();
    }
  }
};

function startUpdation(){
  updatedChart = setInterval(function(){updateChart()}, updateInterval);
}

function terminateUpdation(){
 ...