I have successfully integrated high charts in angular js using hard coded data. However, I am facing an issue when trying to display dynamic data fetched from a web service. In my controller:
$scope.months = [];
$scope.retail = [];
$scope.wholesale = [];
$scope.fetchChart = function(){
$scope.chartConfig = {
title: {
text: ""
},
options: {
chart: {
type: 'column'
},
plotOptions: {
series: {
stacking: ''
}
},
legend: {
layout: 'vertical',
align: 'topleft',
verticalAlign: 'top',
borderWidth: 1
}
},
xAxis: {
categories: $scope.months
},
credits: {
enabled: true
},
series: [{
name: 'Retail',
data: $scope.retail
},
{
name: 'Wholesale',
data: $scope.wholesale
}
],
loading: false
}
};
$http.get(http://localhost:8080/abc/pqr/mno/getData).success(function(response) {
$scope.data = angular.fromJson(response);
$scope.complete = false;
var count=0;
for(var i = 0; i < $scope.data.length; i++){
count++;
$scope.months.push($scope.data[i].month);
$scope.retail.push($scope.data[i].retail);
$scope.wholesale.push($scope.data[i].wholesale);
if(count == $scope.data.length){
$scope.fetchChart();
$scope.complete = true;
}
}
$scope.toggleHighCharts = function () {
this.chartConfig.useHighStocks = !this.chartConfig.useHighStocks
}
$scope.$watch("complete",function(){
alert(JSON.stringify($scope.months)+"---"+JSON.stringify($scope.retail)+"=-=--"+JSON.stringify($scope.wholesale));
},true);
$scope.reflow = function () {
$scope.$broadcast('highchartsng.reflow');
};
});
$scope.chartTypes = [
{"id": "line", "title": "Line"},
{"id": "spline", "title": "Smooth line"},
{"id": "area", "title": "Area"},
{"id": "areaspline", "title": "Smooth area"},
{"id": "column", "title": "Column"},
{"id": "bar", "title": "Bar"},
{"id": "pie", "title": "Pie"},
{"id": "scatter", "title": "Scatter"}
];
$scope.dashStyles = [
{"id": "Solid", "title": "Solid"},
{"id": "ShortDash", "title": "ShortDash"},
{"id": "ShortDot", "title": "ShortDot"},
{"id": "ShortDashDot", "title": "ShortDashDot"},
{"id": "ShortDashDotDot", "title": "ShortDashDotDot"},
{"id": "Dot", "title": "Dot"},
{"id": "Dash", "title": "Dash"},
{"id": "LongDash", "title": "LongDash"},
{"id": "DashDot", "title": "DashDot"},
{"id": "LongDashDot", "title": "LongDashDot"},
{"id": "LongDashDotDot", "title": "LongDashDotDot"}
];
$scope.chartSeries = [
{"name": "Retail", "data": $scope.retail, type: "column"},
{"name": "Wholesale", "data": $scope.wholesale, type: "column"}
];
In my HTML:
<div>
<highchart id="chart1" config="chartConfig"></highchart>
</div>
In the controller:
$scope.data = angular.fromJson(response);
I receive the following data:
[{"wholesale":"1","retail":"0","month":"Jan"},
{"wholesale":"2","retail":"0","month":"May"},
{"wholesale":"0","retail":"1","month":"Jun"},
{"wholesale":"0","retail":"2","month":"Jul"}]
When I use the following code:
$scope.$watch("complete",function(){
alert(JSON.stringify($scope.months)+"---"+JSON.stringify($scope.retail)+"=-=--"+JSON.stringify($scope.wholesale));
},true);
I get the data as:
["Jan","May","Jun","Jul"]---["0","0","1","2"]=-=--["1","2","0","0"]
In the series:
series: [{ name: 'Retail',
data: $scope.retail
},
{ name: 'Wholesale',
data: $scope.wholesale
}
],
When I replace data: $scope.retail with
data: [250,500,1500,1800]//$scope.retaildata: $scope.wholesale with data: [700,800,200,1300]//$scope.wholesale