title: How can I plot data from an external JSON file to a chart.js graph?
body: <p>I would like to chart data from an external JSON file using chart.js. As an example, the json file <a href="https://ghibliapi.herokuapp.com/films" rel="nofollow noreferrer">here</a> lists movies ("title") and ratings ("rt_score"). I'd like to be able to show each movie and its rating without including the static JSON in the .js file, but rather using the $.ajax call method to refer to the /films endpoint.</p>
  
  <p>I'd like to have:</p>
  
  <p>labels: labelsVariable
  data: dataVariable</p>
  
  <p><a href="https://jsbin.com/tulasib/5/edit?html,js,output" rel="nofollow noreferrer">Here is a fiddle</a> with the setup so far with static data.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"&gt; 
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here's the js that successfully generates a bar chart like I want, but with static data in "labels" and "data" instead of referencing the JSON file.</p>
  
  <pre><code>var ctx = document.getElementById('myChart');
  var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
      labels: ['Castle in the Sky', 'Grave of the Fireflies'],
      datasets: [{
          label: 'rating',
          data: [95, 97],
          borderWidth: 1
      }]
  },
  options: {
      scales: {
          yAxes: [{
              ticks: {
                  beginAtZero: true
              }
          }]
      }
  }
  });
  </code></pre>
  
  <p>Instead of using the static data and labels, how can I reference the external JSON file using the $.ajax call method?</p>
  
  <p>Based on what I've read, I may have to use "map" to break down the objects into arrays that contain labels and data?</p>
  
  <p>Thank you in advance.</p>