[Solved]-HighCharts Bubble graph JSON as data source-Highcharts

highcharts.chart('container', {

  chart: {
    type: 'bubble',
    plotborderwidth: 1,
    zoomtype: 'xy'
  },

  legend: {
    enabled: false
  },

  title: {
    text: 'sugar and fat intake per country'
  },

  subtitle: {
    text: 'source: <a href="http://www.euromonitor.com/">euromonitor</a> and <a href="https://data.oecd.org/">oecd</a>'
  },

  xaxis: {
    gridlinewidth: 1,
    title: {
      text: 'daily fat intake'
    },
    labels: {
      format: '{value} gr'
    },
    plotlines: [{
      color: 'black',
      dashstyle: 'dot',
      width: 2,
      value: 65,
      label: {
        rotation: 0,
        y: 15,
        style: {
          fontstyle: 'italic'
        },
        text: 'safe fat intake 65g/day'
      },
      zindex: 3
    }]
  },

  yaxis: {
    startontick: false,
    endontick: false,
    title: {
      text: 'daily sugar intake'
    },
    labels: {
      format: '{value} gr'
    },
    maxpadding: 0.2,
    plotlines: [{
      color: 'black',
      dashstyle: 'dot',
      width: 2,
      value: 50,
      label: {
        align: 'right',
        style: {
          fontstyle: 'italic'
        },
        text: 'safe sugar intake 50g/day',
        x: -10
      },
      zindex: 3
    }]
  },

  tooltip: {
    usehtml: true,
    headerformat: '<table>',
    pointformat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
      '<tr><th>fat intake:</th><td>{point.x}g</td></tr>' +
      '<tr><th>sugar intake:</th><td>{point.y}g</td></tr>' +
      '<tr><th>obesity (adults):</th><td>{point.z}%</td></tr>',
    footerformat: '</table>',
    followpointer: true
  },

  plotoptions: {
    series: {
      datalabels: {
        enabled: true,
        format: '{point.name}'
      }
    }
  },

  series: [{
    data: [{
      "id": "3",
      "name": "australia",
      "x": 24.1,
      "y": 19.9,
      "z": 3.5
    }, {
      "id": "1",
      "name": "england (sta)",
      "x": 23.8,
      "y": 20.5,
      "z": 2.6
    }, {
      "id": "5",
      "name": "germany",
      "x": 22.8,
      "y": 20.9,
      "z": 2.3
    }, {
      "id": "2",
      "name": "spain",
      "x": 17.8,
      "y": 22.2,
      "z": 1.4
    }]
  }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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