I am encountering an issue that may be stemming from my incomplete understanding of AngularJS. My goal is to incorporate some JS scripts into my HTML.
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<head>
<body>
<div id="plandat"></div>
</body>
The challenge lies in utilizing both AngularJS and additional JavaScript together. Here's a snippet of how my controller appears.
angular.module('analyticsCtrl', ['rzModule', 'daterangepicker'])
.controller('planDatController', function($templateCache, $scope, $http, $interval, $filter, uiGridGroupingConstants ){
Highcharts.ganttChart('plandat', {
title: {
text: 'Plan Dat'
},
series: [{
name: 'Project 1',
data: [{
id: 's',
name: 'Start prototype',
start: Date.UTC(2014, 10, 18),
end: Date.UTC(2014, 10, 20)
}, {
id: 'b',
name: 'Develop',
start: Date.UTC(2014, 10, 20),
end: Date.UTC(2014, 10, 25),
dependency: 's'
}, {
id: 'a',
name: 'Run acceptance tests',
start: Date.UTC(2014, 10, 23),
end: Date.UTC(2014, 10, 26)
}, {
name: 'Test prototype',
start: Date.UTC(2014, 10, 27),
end: Date.UTC(2014, 10, 29),
dependency: ['a', 'b']
}]
}]
});
})
In essence, it appears that AngularJS executes first, causing the highcharts script not to be loaded before setting up the highcharts gantt chart as intended. I appreciate any assistance provided. My knowledge of frontend/javascript development is limited, and I welcome the chance to expand my skills.