let new_data = [];// = [0, 59, 75, 20, 20, 55, 40];

let label = [];
var step = 0;
var speedCanvas = document.getElementById("speedChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 15;


var speedData = {
  //labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  labels:label,
  datasets: [{
    label: "Plot",
    data: new_data,
  }]
};

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  }
};

var lineChart = new Chart(speedCanvas, {
  type: 'line',
  data: speedData,
  options: chartOptions
});

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  }
};

function send_data(){
  var data = document.getElementById("equation").value;
  $.ajax({
    type:"GET",
    url:"calc/",
    data:{
      'equation':data
    },
    dataType:"text",
    success: function (response) {
      let json = JSON.parse(response);
      new_data = json.values;
      //console.log(new_data);
      removedata(lineChart);
      addData(lineChart,new_data);
      for(var i = 0;i<=new_data.length-1;i++){
        label.push(String(step));
        //console.log(label[i]);
        step+=0.1;
      }
      console.log(label);
      step = 0;
    }

  })
}
function removedata(lineChart){
  lineChart.data.datasets = []
  lineChart.update();
  }
  function addData(lineChart,data){
  lineChart.data.datasets.push({
  'data': data
  });
  console.log(lineChart)
  lineChart.update();
  label.length = 0;
  }