Binding empty array to chart

Fiddle on how to bind an empty array to a chart without affecting the existing variables

by Robert Wafula

HTML

<html>

<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
</head>

<body>
    <div class="btn-group years" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="radio" name="options" value="2015" autocomplete="off"> 2015
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" value="2016" autocomplete="off"> 2016
        </label>
        <label class="btn btn-primary active">
            <input type="radio" name="options" value="2017" autocomplete="off" checked="checked"> 2017
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" value="2018" autocomplete="off"> 2018
        </label>
    </div>

    <div id="trafficinfo" style="min-width: 310px; height: 200px; margin: 0 auto"></div>
</body>

</html>

JavaScript

var trafficinfo_data_xaxis_default = [
  ["North America"],["European Union"],
  ["Asia Pacific"],
  ["Australia"],["Africa"]
];
var trafficinfo_data_series_default = [{
  "name": "American Brands",
  "data": [
    [57.37533669],
    [0.117136],
    [0.08759559],
    [0.692],
    [0.35]
  ],
  "stack": "cars"
}, {
  "name": "European Brands",
  "data": [
    [23.92798527],
    [57.37533669],
    [12.541969060000001],
    [14.24307465],
    [11.84693269]
  ],
  "stack": "cars"
}, {
  "name": "Japanese Brands",
  "data": [
    [0.59301429],
    [3],
    [32.95988396],
    [12.158916],
    [0.01123203],
  ],
  "stack": "cars"
}];

$(function() {
  $('#trafficinfo').highcharts({
    colors: ['#cbddad', '#fac58e', '#a0ddea'],
    chart: {
      type: 'bar',
      height: 300,
      style: {
        fontFamily: 'Roboto'
      }
    },
    xAxis: {
      categories: trafficinfo_data_xaxis_default,
      title: {
        text: 0
      }
    },
    yAxis: {
      title: {
        text: 'Amount (USD Millions)',
        align: 'high'
      },
      labels: {
        overflow: 'justify'
      },
      stackLabels: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat((this.total), 2, '.');
        }
      }
    },
    title: {
      text: 'Year 2017'
    },
    tooltip: {
      backgroundColor: {
        linearGradient: [0, 0, 0, 60],
        stops: [
          [0, '#FFFFFF'],
          [1, '#E0E0E0']
        ]
      },
      borderWidth: 1,
      borderColor: '#AAA',
      headerFormat: '<span style="font-size:12px; font-weight:700; text-decoration:underline">{point.key}</span><table>',
      pointFormatter: function() {
        return '<tr><td><i class="fa fa-circle" style="color:' + this.series.color + '"></i> ' + this.series.name + ':</td>' + '<td style="text-align:right; padding:0; font-weight:700;">' + Highcharts.numberFormat((this.y), 2, '.') + ' million</td></tr>';
      },
      footerFormat: '</table>',
      shared:...