I need to provide the date either from the view template or possibly from the controller in order for the highchart to display the data specified by the <highchart /> directive.
Explanation :
<ul>
<li ng-repeat="li in list">
<highchart id="chart1"
config="chart"
chartTitle="{{li.name}}"
kpiValue="{{li.data}}">
</highchart>
</li>
</ul>
In my controller, the code looks like this
myapp.controller('myctrl', function ($scope) {
$scope.list = [
{data:10,name:'first KPI',type:"bar"}, /*Create a bar chart with the title 'first KPI' and a bar length of 10 */
{data:12,name:'sec KPI',type:"bar"}, /*Create a bar chart with the title 'sec KPI' and a bar length of 12 */
{data:32,name:'third KPI',type:"bar"} /*Create a bar chart with the title 'third KPI' and a bar length of 32 */
];
....
....
$scope.chart = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10] //need assistance to dynamically accept values from <highcharts />
}],
title: {
text: 'Hello' //need assistance to dynamically accept values from <highcharts />
},
loading: false
}
});
What I am hoping for is to have 3 bar charts as follows:
- First highchart bar expanded to 10
- Second highchart bar expanded to 12
- Third highchart bar expanded to 32
If you check out the plunker link provided, you will get a better understanding of what I am trying to achieve.
Utilized https://github.com/pablojim/highcharts-ng for <highcharts />