title: Rendering HighCharts in AngularJS from Json Object
body: <p>Learning AngularJS and HighCharts.
  [Plunker Link][1]</p>
  
  <p>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. </p>
  
  <p>Here is what I have tried - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
    'use strict';
    angular.module('myModule', [])
      // Directive for generic chart, pass in chart options
      .directive('hcChart', function() {
        return {
          restrict: 'E',
          template: '&lt;div&gt;&lt;/div&gt;',
          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 &lt; $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) &lt; (1 / 2.75)) {
          return (7.5625 * pos * pos);
        }
        if (pos &lt; (2 / 2.75)) {
          return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
        }
        if (pos &lt; (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
        }]
      };
    });
  
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myModule"&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl"&gt;
    &lt;hc-chart options="chartOptions" style="width: 96%; height: 300px;"&gt;Placeholder for generic chart&lt;/hc-chart&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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"
    }]
  }</p>