Currently, I am utilizing the Highchart charting library in conjunction with AngularJS by employing Pablojim's 'Highchart-ng' module. The setup is correct, and the following code functions as expected:
<highchart config="{
type : 'line',
series : [{
name : 'Visitors',
data : [1, 4, 10, 3]
}]
}"></highchart>
However,
<highchart config="{
type : 'line',
series : [{
name : 'Visitors',
data : {{visitors}}
}]
}"></highchart>
does not produce the desired outcome. (please take note of the difference within the 'data')
An error that consistently arises is:
Error: [$parse:syntax] Syntax Error: Token 'visitors' is unexpected, anticipating [:] at column 122 of the expression [{
type : 'line',
series : [{
name : 'Visitors',
data : {{visitors}}
}]
}] starting at [visitors}}
}]
}].
Important to mention: The variable {{visitors}} has been correctly set up in my controller, and when utilized in my template, the data functions effectively. Furthermore, it previously worked flawlessly with my former charting library, Flot.
I have attempted numerous solutions:
- In certain situations, I can bypass this (initialization) issue by including something like
to the directive, so it initializes solely once the variable is accessible (this method proved successful with Flot and EasyPieCharts).ng-repeat="data in visitors | limitTo: 1" - Integrating
ui-refresh="visitors"did not yield results, - and
data: {{visitors || 0}}did not resolve the issue either.
Therefore, how may I effectively incorporate variables directly within my template files?