Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

function getData() {

  var options = {
    chart: {
      type: 'bar'
    },
     colors: ['#28E', '#4A0', '#8AE'],

    title: {
      text: 'Simple Bar'
    },
    xAxis: {
      type: 'category'
    },
    series: [{}]
  };


  $.ajax({
    //url: 'https://mocki.io/v1/af3abd57-1c07-4df0-b591-4d17796e2c29',
    url: 'https://mocki.io/v1/31b19e17-690f-4414-831a-1baabd881ea3',
    success: function(data) {
    alert(JSON.stringify(data));
      const processedData = [];

      for (let key in data) {
     // alert(key);
      
        processedData.push({
          name: data[key].name,
          y: data[key].price
        });

      }
      options.series.data = processedData;

      Highcharts.chart('container', options);
    }
  });
}


getData();