Reply To: PLOT Graph using txt

[Manoj Mohan]

how about if theres TWO different data in one text and I want to create a separate graph output in one page?
Example:

Mean Surface Air Temperature over Ocean or Land Areas (C)
Annual Mean Anomalies with respect to 1951-1980

@pimohdaimaoh,

You can create multiple charts in a single page by providing separate container and options for each chart as shown in this documentation page. In order to use single text file to render multiple charts, you need to parse the data from text file to the format accepted by CanvasJS. Please take a look at the code snippet below for the same.

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 = 1; 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();
}

Also, check out this JSFiddle for complete working code.

OR if the tx data is this?

Seasonal cycle from MERRA2 using base period 1980-2015
Year Anomaly
1880.04 -2.6
1880.13 -2.4
1880.21 -1.57
1880.29 -0.64….

Can you kindly brief us further more about your requirement so that we can understand your scenario better and help you out?

—–
Manoj Mohan
Team CanvasJS