Highcharts-ng how to load data from json response

Question

Highcharts-ng seems to work for static data but not with dynamic data. I have both datasets that are similar but the chart refuses to render when using the dynamically created one.

Here is my controller code:

$scope.sent_array = [];
$scope.success_array = [];
$scope.failed = [];
$scope.table_data = [];
$scope.date_array = [];

$scope.dateRangeTransactions = function() {
  ApiService.dateRange(payload).then(function(response) {
    data = response.data;
    console.log(data);

    for (var i = 0; i < data.length; i++) {
      date = data[i].date.replace(/\//g, ",").split(",");
      unix_date = Date.UTC(date[0], date[1] - 1, date[2]);
      console.log(unix_date);
      $scope.sent_array.push([unix_date, data[i].total_sent]);
      $scope.success_array.push([unix_date, data[i].total_success]);
      $scope.failed.push([unix_date, data[i].total_pending_failed]);
      $scope.table_data.push([data[i].date, data[i].total_sent, data[i].total_success, data[i].total_pending_failed]);
      $scope.date_array.push(data[i].date);
    }

    $scope.minDate = $scope.date_array[0];
    $scope.maxDate = $scope.date_array[$scope.date_array.length - 1];

    console.log($scope.sent_array);
    console.log($scope.success_array);
    console.log($scope.failed);

    $scope.chartConfig.series[0].data = $scope.sent_array;
    $scope.chartConfig.series[1].data = $scope.success_array;
    $scope.chartConfig.series[2].data = $scope.failed;




  }, function(error) {
    console.log(error);
  });
}

$scope.dateRangeTransactions(payload);

$scope.chartConfig = {
  global: {
    useUTC: false,
  },
  chart: {
    type: 'column',
    height: 500,
    width: 900,
    backgroundColor: 'transparent',
    zoomType: 'x',

  },
  navigator: {
    enabled: false,
    series: {
      data: []
    }
  },
  rangeSelector: {
    enabled: true,
  },
  plotOptions: {
    series: {
      lineWidth: 1,
      fillOpacity: 0.5,
      showInNavigator: true

    }


  },
  exporting: false,
  xAxis: [{
    type: 'datetime',
    title: {
      text: 'timeline',
      style: {
        color: '#80a3ca'
      }
    },

  }],
  yAxis: [

    {

      min: 0,
      allowDecimals: false,
      title: {
        text: 'rate of usage',
        style: {
          color: '#80a3ca'
        }
      },
      labels: {
        format: '{value}',
        style: {
          color: '#80a3ca'
        }
      }


    }
  ],

  legend: {
    enabled: true
  },
  title: {
    text: ' '
  },
  credits: {
    enabled: false
  },

  loading: true,
  tooltip: {

    headerFormat: '<div class="header">{point.key}</div>',
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#a4a4a4',
    shadow: true,
    useHTML: true,
    percentageDecimals: 2,
    backgroundColor: "rgba(255,255,255,.7)",
    style: {
      padding: 0
    },
    shared: true,

  },

  series: [{
      id: 'Sent',
      name: 'Sent',
      data: [],
      tooltip: {
        valueSuffix: ' times'
      },
      color: 'blue'
    },
    {
      id: 'Delivered',
      name: 'Delivered',
      data: [],
      tooltip: {
        valueSuffix: ' times'
      },
      color: 'green'
    },
    {
      id: 'Failed',
      name: 'Failed',
      data: [],
      tooltip: {
        valueSuffix: ' times'
      },
      color: 'red'
    }
  ],
  useHighStocks: true,




};

and the sample response is:

[{
    "date": "2017\/09\/18",
    "total_sent": 0,
    "total_success": 0,
    "total_pending_failed": 0
  },
  {
    "date": "2017\/09\/19",
    "total_sent": 2,
    "total_success": 0,
    "total_pending_failed": 3
  },
  {
    "date": "2017\/09\/20",
    "total_sent": 5,
    "total_success": 5,
    "total_pending_failed": 0
  },
  {
    "date": "2017\/09\/21",
    "total_sent": 0,
    "total_success": 0,
    "total_pending_failed": 0
  },
  {
    "date": "2017\/09\/22",
    "total_sent": 0,
    "total_success": 0,
    "total_pending_failed": 0
  },
  {
    "date": "2017\/09\/23",
    "total_sent": 0,
    "total_success": 0,
    "total_pending_failed": 0
  },
  {
    "date": "2017\/09\/24",
    "total_sent": 0,
    "total_success": 0,
    "total_pending_failed": 0
  },
  {
    "date": "2017\/09\/25",
    "total_sent": 3,
    "total_success": 3,
    "total_pending_failed": 0
  }
]

when I console.log($scope.chartConfig); it seems the data was inserted but the chart still remains empty.

Answer 1

Finally I was able to figure it out so Im leaving it here for future reference I modified my code and this works :D

$scope.dateRangeTransactions = function() {
  ApiService.dateRange(payload).then(function(response) {
    data = response.data;
    console.log(data);

    for (var i = 0; i < data.length; i++) {
      date = data[i].date.replace(/\//g, ",").split(",");
      unix_date = Date.UTC(date[0], date[1] - 1, date[2]);
      console.log(unix_date);
      $scope.sent_array.push([unix_date, data[i].total_sent]);
      $scope.success_array.push([unix_date, data[i].total_success]);
      $scope.failed.push([unix_date, data[i].total_pending_failed]);
      $scope.date_array.push(data[i].date);
    }

    $scope.minDate = $scope.date_array[0];
    $scope.maxDate = $scope.date_array[$scope.date_array.length - 1];

    console.log($scope.sent_array);
    console.log($scope.success_array);
    console.log($scope.failed);

    $scope.chartConfig.getChartObj().series[0].setData($scope.sent_array);
    $scope.chartConfig.getChartObj().series[1].setData($scope.success_array);
    $scope.chartConfig.getChartObj().series[2].setData($scope.failed);


  }, function(error) {
    console.log(error);
  });
}

$scope.dateRangeTransactions(payload);