AngularJS With Highcharts WITHOUT JQuery

Question

So I know that JQuery is used often with highcharts, but for my purposes I am not using it. I have implemented highcharts into angular using just javascript and now I am trying to populate the series data for the chart using a .json file. For some reason when I try to load the chart within a http.get call (to read the json file), the chart no longer displays. I can't figure out why. Any insight on why this might happen?

http.get('data.json').success(function(data) {

 $scope.chartOptions =  {
   chart: { type: 'line' },
   title: { text: 'Fruit Consumption' },
   xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] },
   yAxis: { title: { text: 'Fruit eaten' } },
   series: [
      { name: 'Jane', data: [1, 0, 4] }, 
      { name: 'John', data: [5, 7, 3] }
   ]
 };
});

app.directive("highcharts", function() {
  return {
    link: function(scope, element, attrs) {
    var options = scope.$eval(attrs.highcharts);
    options.chart.renderTo = element[0];
    new Highcharts.Chart(options);
  }
};

});

So the problem seems to be that options is undefined since this is occurring asynchronously and highcharts hasn't been populated by the time it reaches that line. Any idea how to solve this? — user3129120
– user3129120, Commented Jun 26, 2014 at 23:58

Shelby L Morris · Accepted Answer · 2014-06-27 00:24:37Z

1

In your chart tag, add an ng-if="chartOptions" so that it wont load before that object exists.

answered Jun 27, 2014 at 0:24

Shelby L Morris

7265 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamie Hutber · Accepted Answer · 2014-06-27 00:26:37Z

0

Other than of course radically changing your build and adding requireJs I'd set up a loop to poll and check every xxx unit of time until the function is in the dom:

//I would use a rather ugly checker 
var timeFrame = 6000, //some preiod of time
    timer = setInterval(function () { checkForFunction(timeFrame) }, );

function checkForFunction() {
    if(Highcharts){ //if Highcharts is in the dom it has been loaded
       //now do the stuff you want
       clearInterval(timer);
    }
}

answered Jun 27, 2014 at 0:26

Jamie Hutber

28.2k54 gold badges194 silver badges314 bronze badges

Collectives™ on Stack Overflow

AngularJS With Highcharts WITHOUT JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related