Importing JSON file into Highcharts for Bar Chart Visualization

Question

I am trying to create a Highcharts Bar Chart visualization in JS Fiddle. It will visualize "Annual Guest Value" and "Days Between 1st and 2nd Visits" for each category of visits by for customer (1 visit, 2 visits, .... 29+ visits).

Right now I have coded the visualization JS Fiddle but you must manually enter in the data. I would like to make a more automated process. The data that I will have is in JSON form and I was wondering how I would be able to create some function that would import the JSON form of the data to visualize it the same way as a bar chart I currently have right now.

How would I do this?

The JSON data I have now is:

[
  {
    "Category": 1,
    "Q1 / 18 (TTM) Annual Guest Value": 0,
    "Days Between 1st and 2nd Visits": 23
  },
  {
    "Category": 2,
    "Q1 / 18 (TTM) Annual Guest Value": 96.6,
    "Days Between 1st and 2nd Visits": 45
  },
  {
    "Category": 3,
    "Q1 / 18 (TTM) Annual Guest Value": 73.2,
    "Days Between 1st and 2nd Visits": 65
  },
  {
    "Category": 4,
    "Q1 / 18 (TTM) Annual Guest Value": 60.3,
    "Days Between 1st and 2nd Visits": 85
  },
  {
    "Category": 5,
    "Q1 / 18 (TTM) Annual Guest Value": 52.5,
    "Days Between 1st and 2nd Visits": 105
  },
  {
    "Category": 6,
    "Q1 / 18 (TTM) Annual Guest Value": 46.6,
    "Days Between 1st and 2nd Visits": 125
  },
  {
    "Category": 7,
    "Q1 / 18 (TTM) Annual Guest Value": 41.4,
    "Days Between 1st and 2nd Visits": 144
  },
  {
    "Category": 8,
    "Q1 / 18 (TTM) Annual Guest Value": 37.5,
    "Days Between 1st and 2nd Visits": 163
  },
  {
    "Category": 9,
    "Q1 / 18 (TTM) Annual Guest Value": 34.4,
    "Days Between 1st and 2nd Visits": 179
  },
  {
    "Category": 10,
    "Q1 / 18 (TTM) Annual Guest Value": 31.9,
    "Days Between 1st and 2nd Visits": 199
  },
  {
    "Category": "11-17",
    "Q1 / 18 (TTM) Annual Guest Value": 25.4,
    "Days Between 1st and 2nd Visits": 258
  },
  {
    "Category": "18-28",
    "Q1 / 18 (TTM) Annual Guest Value": 17,
    "Days Between 1st and 2nd Visits": 394
  },
  {
    "Category": "29+",
    "Q1 / 18 (TTM) Annual Guest Value": 9.7,
    "Days Between 1st and 2nd Visits": 847
  }
]

My current code for the bar chart is below. I want the visualization to look the same, but just that the data comes from JSON file.

Copying and pasting the JSON data into the code in order to make the visualization is fine with me but I just want the visualization I have now to be the same.

I would really appreciate the help. Thanks!

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: [0, 96.6, 73.2, 60.3, 52.5, 46.6, 41.4, 37.5, 34.4, 31.9, 25.4, 17.0, 9.7],
    color: 'grey',
    // label color
    dataLabels: {
      style: {
        color: 'grey'
       
      }
    }
  }, {
    name: 'Days Between 1st and 2nd Visits',
    data: [23, 45, 65, 85, 105, 125, 144, 163, 179, 199, 258, 394, 847],
    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>

Possible duplicate of [Displaying JSON data in Chartjs](https://stackoverflow.com/questions/44990517/displaying-json-data-in-chartjs) — Martin Zeitler, Aug 18 '18 at 00:26

score 3 · Accepted Answer · answered Aug 18 '18 at 00:37

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>

Thank you! I appreciate it. I didn't know it would be that easy. — javacash, Aug 18 '18 at 00:46

score 0 · Answer 2 · answered Aug 18 '18 at 00:33

You can do this in following steps:

Create an API in python or Php, which returns JSON data
Make an ajax request to this API
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

alright! Thank you for the framework. I will utilize this. – javacash Aug 18 '18 at 00:45 — javacash, Aug 18 '18 at 00:45

Importing JSON file into Highcharts for Bar Chart Visualization

2 Answers2