My AngularJs application fetches data from an API and populates a table with it. I then use Highcharts to create a chart based on the table data. Everything works fine when I use static data in the table, but it doesn't update properly when I try to change the table data using AJAX. The chart fails to redraw.
Here is the directive:
app.directive('highChart', function ($parse) {
return {
link: function(scope, element, attrs) {
scope.$watch('chartConfig', function (newVal) {
if (newVal) {
var props = $parse(attrs.highChart)(scope);
props.chart.renderTo = element[0];
new Highcharts.Chart(props);
}
});
}
};
});
And the controller:
appControllers.controller('SummaryController', ['$scope', '$timeout', 'Summaries',
function ($scope, $timeout, Summaries) {
// Fetch data from the API
Summaries.get({ table: 'level'}).$promise.then(
// success callback
function(data) {
$scope.levels = data.level[0][today];
$scope.chartConfig = {
data: {
table: document.getElementById('daily-level')
},
chart: {
type: 'column'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.y + ' ' + this.x;
}
}
};
}
}]);
Corresponding HTML code:
<div id="top-chart" high-chart="chartConfig"></div>
Despite updating the table through AJAX, the chart remains empty. I have verified that the updated table data is being passed correctly to the directive. I have tried various solutions, but the chart still does not redraw. Currently, I am using a jQuery timeout to refresh the chart, which is not ideal as it involves DOM manipulation in the controller. I am looking for a way to accomplish this using the directive.