I am using highcharts-ng and angular js in my applicaiton. For a simple case I am able call one rest service and able to plot the graph using it. But in my scenario, with the same form input I need to call two rest services and draw two charts simultaneously based on both the responses (i.e) first graph with first response and second graph with the other response. I tried some cases, but I am able to draw only one graph, and if I try to draw the other one, the entire page resets. Any help on how to do it.
2
-
please share you code. are you using a factory or a service?. Is it the same factory that supposed to return both of the result sets?. If that the case try using a service instead since factory is a singletonOleg Belousov– Oleg Belousov2013-10-05 08:43:14 +00:00Commented Oct 5, 2013 at 8:43
-
1@OlegTikhonov I solved the issue. It was just that I had to have a new config in the scope of angularjs and plot it accordingly. Sample fiddle for it. jsfiddle.net/Cp73s/80googytech– googytech2013-10-05 08:58:48 +00:00Commented Oct 5, 2013 at 8:58
Add a comment
|
2 Answers
This is my way to addressed your issue. It okay with me.
First: Create drawChart at service
angular.module('chartApp')
.factory('drawChart', function () {
return {
lineChart: function (args) {
// Draw charts
var charts = [],
chart;
// agrs: this is variable mutable
var maps = args.maps,
color = args.color,
width = args.width,
height = args.height,
lablesY = args.lablesY,
lablesX = args.lablesX,
title = args.title;
angular.forEach(maps, function (map) {
chart = {
animation: true,
options: {
legend: {
enabled: false
}
},
title: title,
series: [{
data: map,
enableMouseTracking: false,
color: color,
marker: {
enabled: false
}
}],
loading: false,
yAxis: {
currentMin: 0,
currentMax: 100,
lineColor: '#cacaca',
lineWidth: 1,
gridLineWidth: null,
labels: lablesY,
title: null
},
xAxis: {
currentMin: 0,
labels: lablesX,
lineColor: '#cacaca',
lineWidth: 1,
tickWidth: 0
},
size: {
width: width,
height: height
}
};
charts.push(chart);
});
return charts;
}
};
});
Second call it at your controller
// Draw charts
var chartArgs = {
maps: $scope.maps,
color: '#0ec679',
width: 245,
height: 125,
lablesY: {
enabled: false,
},
lablesX: {
enabled: false,
},
title: {
text: ''
}
};
if (Object.keys($scope.maps).length != 0) {
$scope.chartMaps = drawChart.lineChart(chartArgs);
}
Third In view
<highchart config="chartMaps[$index]"></highchart>
Comments
Here is my solution:
Javascript:
// first chart
$scope.chartConfig1 = {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
}, ...
};
// second chart
$scope.chartConfig2 = {
chart: {
type: 'line'
},
title: {
text: 'Fruit Consumption'
}, ...
};
HTML:
<!-- first chart -->
<div id="chartA">
<highchart id="chart1" config="chartConfig1"></highchart>
</div>
<!-- second chart -->
<div id="chartB">
<highchart id="chart2" config="chartConfig2"></highchart>
</div>
You can repeat the paradigm indefinitely
Comments
