Chartjs-Getting charts.js to read from Google Sheet JSON data

by

0👍

✅

The array values must be separated by commas.

labels: [
    data.feed.entry[0]["gsx$charts"]["$t"],
    data.feed.entry[1]["gsx$charts"]["$t"],
    data.feed.entry[2]["gsx$charts"]["$t"]
]

See this implementation:

(function() {
  window.chartColors = {
    red: "rgb(255, 99, 132)",
    green: "rgb(75, 192, 192)",
    blue: "rgb(54, 162, 235)"
  };
  $.getJSON("https://spreadsheets.google.com/feeds/list/1OAYVJjSUqHdCwcdLSEaENQML8JwK6IwWbFFUkU1PGms/1/public/values?alt=json", function(data) {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx, {
      type: "pie",
      data: {
        datasets: [{
          data: [2574, 1663, 1670],
          backgroundColor: [window.chartColors.red, window.chartColors.green, window.chartColors.blue],
          label: "Dataset 1"
        }],
        labels: [
          data.feed.entry[0]["gsx$charts"]["$t"],
          data.feed.entry[1]["gsx$charts"]["$t"],
          data.feed.entry[2]["gsx$charts"]["$t"]
        ]
      },
      options: {
        responsive: true
      }
    });
  });
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.chartjs.org/dist/2.7.2/Chart.bundle.js"></script>
<div id="container" style="width: 75%;">
  <canvas id="canvas"></canvas>
</div>

Leave a comment