javascript - Using a JSON Object in HighCharts

Question

I am new to HighCharts and I am trying to figure out how to read a local JSON object into my stacked bar graph in HighCharts. I believe I wrote the series and categories but for some reason the getJson Function is not working.

Angular JS File

function get_chart() {
    return {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Twitter Data'
        },
        xAxis: {
            categories: []
        },

        plotOptions: {
            series: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }, point: {
                    events: {
                        click: function () {
                            alert('Category: ' + this.category + ', value: ' + this.y);
                        }
                    }
                }
            }

        },

        series: []

    },
    $.getJSON("js/data.json", function(json) {
        options.xAxis.categories = json[0]['data'];
        options.series[0] = json[1];
        options.series[1] = json[2];
        chart = new Highcharts.Chart(options);
    });
}

var app = angular.module('charts', []);

app.directive('highchart', [function () {
    return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link: function (scope, element, attrs) {

            scope.$watch(attrs.chart, function () {

                if (!attrs.chart) return;

                var chart = scope.$eval(attrs.chart);

                angular.element(element).highcharts(chart);
            });

        }
    }
}]);

function Ctrl($scope) {
    $scope.example_chart = get_chart();
}

JSON Object

[
  {
    "name": "Month",
    "data": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  },
  [
    {
      "name": "Overhead",
      "data": [
        21990,
        22365,
        21987,
        22369,
        22558,
        22987,
        23521,
        23003,
        22756,
        23112,
        22987,
        22897
      ]
    }
  ],
  {
    "name": "Revenue",
    "data": [
      23987,
      24784,
      25899,
      25569,
      25897,
      25668,
      24114,
      23899,
      24987,
      25111,
      25899,
      23221
    ]
  }
]

Answer 1

Calling via external json file See Plunker demo

function get_chart() {
var options =   {
    chart: {
        type: 'column',
        renderTo:'container'
    },
    title: {
        text: 'Twitter Data'
    },
    xAxis: {
        categories: []
    },

    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                style: {
                    textShadow: '0 0 3px black'
                }
            }, point: {
                events: {
                    click: function () {
                        alert('Category: ' + this.category + ', value: ' + this.y);
                    }
                }
            }
        }

    },

    series: []

}; 
$.getJSON("results.json", function(json) {
    options.xAxis.categories = json[0]['data'];
    options.series[0] = json[1];
    options.series[1] = json[2];
    chart = new Highcharts.Chart(options);
   });
  }
  get_chart(); //call this get_chart function in your controller where you want, I called it here.