Multiple axis line chart with Chart.js and JSON data from Google Sheet

Question

I tried to visualize the data, which stored at Google Sheet, with Chart.js in multiple-axis line chart.

My data look like this:

I tried the following code, but it only showed the first two data (0:00 and 1:00) instead of the whole set data. Also, it has single Y-axis only. May I know what's wrong with my code?

function BuildChart(labels, valuesa, valuesb, chartTitle) {
    var data = {
        labels: labels,
        datasets: [{
            label: 'Temperature', // Name the series
            data: valuesa,
            },
           {
            label: chartTitle, // Name the series
            data: valuesb,
            }]
    };

    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
            type: 'line',
        data: {
        datasets: [{
            label: 'Temperature',
            fill: false,
            data: valuesa,
            backgroundColor: ['rgb(255, 99, 132, 0.8)']
          },{
            label: 'Relative Humidity',
            fill: false,
            data: valuesb,
            backgroundColor: ['rgb(255, 99, 132, 0.8)'],
        options: {
            responsive: true, // Instruct chart js to respond nicely.
            maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
            scales: {
                xAxes: [{
                        ticks: {
                            beginAtZero: true,
                        scaleLabel: {
                        display: false,
                        labelString: ''
                    }
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: false,
                        labelString: ''
                    }
                }]
            },
        },
        }
]}})
    return myChart;
}


var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var json = JSON.parse(this.response);
      console.log(json);

// Map json labels  back to values array
var labels = json.feed.entry.map(function (e) {
  return e.gsx$tag.$t;
});

// Map json values back to values array
var valuesa = json.feed.entry.map(function (e) {
    return e.gsx$dailytemperature.$t
});

// Map json values back to values array
var valuesb = json.feed.entry.map(function (e) {
    return e.gsx$dailyrh.$t
});

BuildChart(labels, valuesa, valuesb, "Temperature", "Relative Humidity");
    }
  };
  xhttp.open("GET", "https://spreadsheets.google.com/", false);
  xhttp.send();

Your help is highly appreciated. Thank you.

uminder · Accepted Answer · 2020-02-24T07:16:09.550

You forgot to define data.labels

data: {
  labels: labels,
  ...

Further the chart options were nested inside the second dataset. Please have a look at the corrected code below.

function BuildChart(labels, valuesa, valuesb, chartTitle) {
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        label: 'Temperature',
        fill: false,
        data: valuesa,
        backgroundColor: 'red',
        borderColor: 'red'
      }, {
        label: 'Relative Humidity',
        fill: false,
        data: valuesb,
        backgroundColor: 'blue',
        borderColor: 'blue'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          ticks: {
            beginAtZero: true,
            scaleLabel: {
              display: false,
              labelString: ''
            }
          }
        }],
        yAxes: [{
          scaleLabel: {
            display: false,
            labelString: ''
          }
        }]
      }
    }
  })
  return myChart;
};


var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var json = JSON.parse(this.response);

    // Map json labels  back to values array
    var labels = json.feed.entry.map(function(e) {
      return e.gsx$tag.$t;
    });

    // Map json values back to values array
    var valuesa = json.feed.entry.map(function(e) {
      return e.gsx$dailytemperature.$t
    });

    // Map json values back to values array
    var valuesb = json.feed.entry.map(function(e) {
      return e.gsx$dailyrh.$t
    });

    BuildChart(labels, valuesa, valuesb, "Temperature", "Relative Humidity");
  }
};
xhttp.open("GET", "https://spreadsheets.google.com/feeds/list/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/x/public/full?alt=json", false);
xhttp.send();

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="myChart""></canvas>

Wow! Thanks for your great help and it works now! One more questions, if I want to have a second y-axis on the right hand side for showing the amount of relative humidity (the left y-axis for temperature), how can I amend the above code? Thanks in advance! :) — Dennis, Feb 23 '20 at 15:25
@Dennis: for multiple `yAxis`, you could have a look at the pages source of https://www.chartjs.org/samples/master/charts/line/multi-axis.html — uminder, Feb 23 '20 at 15:29
Thanks for your hints. I tried to refer the source code of your suggested website and added 'yAxisID' to both datasets. But it seems that I missed something. Could your please take a look? Thank you. https://jsfiddle.net/7owrfybe/ — Dennis, Feb 23 '20 at 15:44
I posted a new question and would you please take a look? Thank you! https://stackoverflow.com/questions/60368200/multi-axis-line-chart-with-chart-js — Dennis, Feb 24 '20 at 01:13

Multiple axis line chart with Chart.js and JSON data from Google Sheet

1 Answers1