Rendering HighCharts in AngularJS from Json Object

Question

Learning AngularJS and HighCharts. [Plunker Link][1]

I would like to understand how I can get the data from a JSON object and dynamically update the values on the x-axis and the bar chart value. The Y-axis values are constant. Right now I have hard coded the values, I want the x-axis and bar chart values from the backend.

Here is what I have tried -

(function() {
  'use strict';
  angular.module('myModule', [])
    // Directive for generic chart, pass in chart options
    .directive('hcChart', function() {
      return {
        restrict: 'E',
        template: '<div></div>',
        scope: {
          options: '='
        },
        link: function(scope, element) {
          Highcharts.chart(element[0], scope.options);
        }
      };
    })

  .controller('MainCtrl', function($scope, $http) {

    $scope.chartData = [];
    $scope.totalCostList = [];

    loadChartData();

    function loadChartData() {
      var httpRequest = $http({
        method: 'GET',
        url: './example.json'
      }).then(function(response) {
        console.log(response.data);
        $scope.chartData = response.data;
        console.log("length:" + $scope.chartData.activityResponse.length);
        for (var i = 0; i < $scope.chartData.activityResponse.length; i++) {
          $scope.totalCostList.push(parseInt($scope.chartData.activityResponse[i].totalCost));
        }
        console.log($scope.totalCostList);
      });
    }

    //var chartData = $scope.totalCostList;
    var yAxisLabels = [1, 5000, 10000, 15000, 20000];
    var chartData = [
      10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
      10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
      10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
      10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
      10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
      10000, 5000
    ];
    var dateLine = Date.UTC(2015, 0, 1);
    Highcharts.getOptions().colors[0] = {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, '#6EB7D8'],
        [0.4, '#2989D8'],
        [0.7, '#207cca'],
        [1, '#1E5799']
      ]
    };

    Highcharts.setOptions({
      lang: {
        thousandsSep: ','
      }
    });
    //To give the chart a bounce effect
    Math.easeOutBounce = function(pos) {
      if ((pos) < (1 / 2.75)) {
        return (7.5625 * pos * pos);
      }
      if (pos < (2 / 2.75)) {
        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
      }
      if (pos < (2.5 / 2.75)) {
        return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
      }
      return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
    };
    $scope.chartOptions = {
      chart: {
        type: 'column',
        margin: [70, 30, 30, 80]
      },
      exporting: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      title: {
        text: 'Weekly Inventory at Cost',
        style: {
          color: '#333'
        },
        align: 'left',
        x: 10,
        y: 20

      },

      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          month: '%b'
        },
        lineColor: '#333',
        tickColor: '#333',
        crosshair: true,
        startOnTick: false,
        endOnTick: false,
        minPadding: 0,
        maxPadding: 0,
        tickmarkPlacement: 'on',
        labels: {
          align: 'left',
          rotation: 0
        }
      },
      yAxis: {
        crosshair: true,
        lineColor: '#333',
        tickColor: '#333',
        tickPositioner: function() {
          return yAxisLabels;
        },
        labels: {
          format: '{value:,.0f}'
        },
        title: {
          enabled: false
        },
        lineWidth: 1,
        tickWidth: 1,
        id: 'cost',
        gridLineWidth: 0,
        min: 1
      },


      plotOptions: {
        column: {
          pointPadding: 0.1,
          borderWidth: 0,
          pointPlacement: 'between'
        }
      },
      shadow: true,

      series: [{
        data: chartData,
        pointStart: dateLine,
        pointInterval: 7 * 24 * 3600 * 1000 // 7days
      }]
    };
  });

})();

<!DOCTYPE html>
<html ng-app="myModule">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <hc-chart options="chartOptions" style="width: 96%; height: 300px;">Placeholder for generic chart</hc-chart>
</body>

</html>

My example JSON - {"message": "success", "status": "OK", "activityResponse": [{ "storeNo": "00208", "wk": "1", "year": "2016", "totalCost": "349622.9" },{ "storeNo": "00208", "wk": "2", "year": "2016", "totalCost": "2000" }, { "storeNo": "00208", "wk": "3", "year": "2016", "totalCost": "15000" }] }

Answer 1

Here is an approach to adding to the x-axis categories and updating the category values. Grab a reference to the chart's series when the chart is created.

var series = this.series[0];

Then, when there is an update to the data, make the following call.

series.setData(seriesDataSource, true, true, false);

I have adapted your Plunker to show an example of the chart with series records being added and updated. https://embed.plnkr.co/SWGuRTyTM3AU6yhptYvM/