score:3

Accepted answer

Your current JSON data doesn't have correct naming convention for keys Q1 / 18 (TTM) Annual Guest Value and Days Between 1st and 2nd Visits should be something like this guestValue and visits. For more information on JSON naming convention please check this thread.

First you need to create a valid and proper JSON of data and then you can iterate through this JSON and create separate arrays of guestValue and visits. And at last pass these arrays to Highchart.

Below is complete working example.

var myJson = [{"category":1,"guestValue":0,"visits":23},{"category":2,"guestValue":96.6,"visits":45},{"category":3,"guestValue":73.2,"visits":65},{"category":4,"guestValue":60.3,"visits":85},{"category":5,"guestValue":52.5,"visits":105},{"category":6,"guestValue":46.6,"visits":125},{"category":7,"guestValue":41.4,"visits":144},{"category":8,"guestValue":37.5,"visits":163},{"category":9,"guestValue":34.4,"visits":179},{"category":10,"guestValue":31.9,"visits":199},{"category":"11-17","guestValue":25.4,"visits":258},{"category":"18-28","guestValue":17,"visits":394},{"category":"29+","guestValue":9.7,"visits":847}];

var guestValue = [];
var visits = [];

for (i=0; i < myJson.length; i++) {
  guestValue.push(myJson[i].guestValue);
  visits.push(myJson[i].visits)
}


Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
 
  title: {
    text: null,
    align: 'center',
    verticalAlign: 'bottom',
  },
  xAxis: {
    categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11-17', '18-28', '29+'],

    title: {
      text: 'Visits Per Customer (TTM)'
    },
  },
  yAxis: {
    min: 0,
    gridLineWidth: 0,
  	minorGridLineWidth: 0,     
    
    title: {
      text: 'Average Return Rate Overall: 64 Days',
      y: 10
    },
    
    labels: {
      overflow: 'justify'
      
    }
  },
  
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true,
      }
    }
  },
  legend: {
  
    layout: 'horizontal',
    align: 'right',
    verticalAlign: 'top',
    x: -25,
    y: 5,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
   
    shadow: true
    
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Q1 / 18 (TTM) Annual Guest Value',
    data: guestValue,
    color: 'grey',
    // label color
    dataLabels: {
      style: {
        color: 'grey'
       
      }
    }
  }, {
    name: 'Days Between 1st and 2nd Visits',
    data: visits,
    color: 'green',
    // label color
    dataLabels: {
      style: {
        color: 'green'
      }
    }
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

score:0

You can do this in following steps:

  1. Create an API in python or Php, which returns JSON data
  2. Make an ajax request to this API
  3. Use the JSON data which was returned from ajax request in Highchart.js

Alternatively, instead of using an API, you can store your JSON data directly in a JSON file and read file in Javascript. If your file name is data.json then, 

<script type="text/javascript" src="data.json"></script>
var mydata = JSON.parse(data);

you can access json keys from mydata using 

mydata[0].name
mydata[0].color

Related Query

More Query from same tag