JSFiddle - React, Tailwind, and code Playground

by katsukino

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<input type="file" id="input">
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
<div id="chartContainer1" style="height: 260px; width: 100%;"></div>

JavaScript

var landTempOptions = {
  title: {
    text: "Annual Temperature in Land"
  },
  axisX: {
    valueFormatString: "YYYY"
  },
  axisY: {
    valueFormatString: "0.00",
    suffix: "°C"
  },
  data: [{
    type: "rangeColumn",
    xValueFormatString: "YYYY",
    yValueFormatString: "0.0#°C",
    dataPoints: []
  }]
}

var oceanTempOptions = {
  title: {
    text: "Annual Temperature in Ocean"
  },
  axisX: {
    valueFormatString: "YYYY"
  },
  axisY: {
    valueFormatString: "0.00",
    suffix: "°C"
  },
  data: [{
    type: "rangeColumn",
    xValueFormatString: "YYYY",
    yValueFormatString: "0.0#°C",
    dataPoints: []
  }]
}

var landTempChart = new CanvasJS.Chart("chartContainer", landTempOptions);
var oceanTempChart = new CanvasJS.Chart("chartContainer1", oceanTempOptions);


//-- Event handler for the input tag
var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {
  var fileList = this.files;
  var reader = new FileReader();

  reader.readAsText(fileList[0]);
  reader.onload = function() {
    renderChart(reader);
  }

}

function renderChart(reader) {
  var dpsList = reader.result;  
  var dataPoint;

  dpsList = dpsList.split("\n");

  for(var i = 0; i < dpsList.length; i++) {
    var separateData = dpsList[i].split(" ");
    yValLand = [parseFloat(separateData[1]), parseFloat(separateData[2])];
    yValOcean = [parseFloat(separateData[4]), parseFloat(separateData[5])];
    xVal = new Date(parseInt(separateData[0]), parseInt(separateData[1]));

    landTempChart.options.data[0].dataPoints.push({x: xVal, y: yValLand})
    oceanTempChart.options.data[0].dataPoints.push({x: xVal, y: yValOcean})
  }

  landTempChart.render();
  oceanTempChart.render();
}

/*
Format of text file used
Year Land_Annual Lowess(5) | Ocean_Annual Lowess(5)
—————————————————–
1880 -0.64 -0.53 | -0.05 0.01
1881 -0.44 -0.56 | 0.01 -0.02
1882 -0.53 -0.60 | 0.00 -0.06
1883 -0.61 -0.62 | -0.06...