I am currently working on implementing a line chart example from the following source: . However, I am encountering an error and would appreciate any guidance or pointers to resolve it.
Here is the error displayed in the console.
Below is the code snippet that I have been using. I have attempted troubleshooting by moving the HTML outside of the ui-view but the issue persists even on the layout page. The code was mostly copied from the example provided on the website.
angular.module('app').controller(controllerId, [
'$scope', function ($scope) {
//Line Chart
$scope.lineLabels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.lineSeries = ['Series A', 'Series B'];
$scope.lineData = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.lineDatasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.lineOptions = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
}
};
}
]);<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Line Chart</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart">
<canvas id="line" class="chart chart-line" chart-data="lineData"
chart-labels="lineLabels" chart-series="lineSeries" chart-options="lineOptions"
chart-dataset-override="lineDatasetOverride"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>