title: Parsing JSON data into Chart.js bar chart
body: <p>I'm trying to use <strong>Chart.js</strong> to generate a bar chart using dynamically generated data from Oracle DB. I'm having trouble getting the data in the right format, I think I'm close but I've been stuck for a while.</p>
  
  <p><strong>My JSON file:</strong></p>
  
  <pre><code>[{"REGION":"Poland","REV_VALUE":"2263"},{"REGION":"United States","REV_VALUE":"1961"},{"REGION":"Spain","REV_VALUE":"555"},{"REGION":"United Kingdom","REV_VALUE":"380"},{"REGION":"Germany","REV_VALUE":"314"}]
  </code></pre>
  
  <p><strong>And here is my barchar.js file:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $.ajax({
      url: "http://localhost/DWH/dataJSON.php",
      method: "GET",
      dataType : 'JSON',
      success: function(data) {
        console.log(data);
        var region = [];
        var value = [];
  
        for(var i in data) {
          region.push(data[i].REGION);
          value.push(data[i].REV_VALUE);
        }
  
        var chartdata = {
          labels: region,
          datasets : [
            {
              label: 'Region',
              backgroundColor: 'rgba(200, 200, 200, 0.75)',
              borderColor: 'rgba(200, 200, 200, 0.75)',
              hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
              hoverBorderColor: 'rgba(200, 200, 200, 1)',
              data: value.map(function(x) {return x * 1;})
            }
          ]
        };
  
        var ctx = $("#myChart");
  
        var barGraph = new Chart(ctx, {
          type: 'bar',
          data: chartdata
        });
      },
      error: function(data) {
        console.log(data);
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to implement a solution that I found in other topics, but still without success.
  Any help would be very much appreciated!</p>