I am using angular.js since 6 months, now I want to use charts in angular.js, I believe CanvasJS is the best chart, its light weight and easy to render, anyone please guide me how to write directives of CanvasJS in angular.js
0
Add a comment
|
2 Answers
"how to write directives of CanvasJS in angular.js"
I would not suggest you to create a directive for this. The reason being, as the directives get linked and your $scope values change, AngularJS works quickly to update the DOM (Document Object Model) as needed. At the same time, AngularJS also needs to alert Controllers to changes in the $scope. The timing of all of this is a bit tricky to understand. So this could be costly process if you have multiple charts.
I would recommend you to create a separate factory method for your charts. Load ChartJS library before factory and controllers.
module.factory('chartService', function(){
var chart = {};
chart.bar = function(element, data) {
// code for bar chart
};
chart.line = function(element, data) {
// code for line chart
};
chart.pie = function(element, data) {
// code for pie chart
};
// more charts...
return chart;
});
You can use them in controller like this.
module.controller('chartController', ['chartService', function(chartService){
var data = []; // get data from somewhere....
// element is the DOM element where you want to render chart
chartService.line(element, data);
}]);
IMO and taking nothing away from directives, this way it becomes more clean, generic, reusable and also we satisfied the separations of concern. You can switch to any charting library easily by this method without changing anything or very little in controllers and views.
On choice of using ChartJS: I had to choose once when i was working on charts and i went for D3 instead because of its vast and broad variety of charts and it is free to use and covers all the basic charts with lot of examples ;)
Comments
Muhammad,
Check this example.
// data related to AngularJS
var m = {
"India": "2",
"Australia": "3"
};
function MyCtrl($scope) {
$scope.items = m;
}
// data related to CanvasJS Charts
window.onload = function() {
var dps = [{
x: 1,
y: 10
}]; //dataPoints.
var chart = new CanvasJS.Chart("chartContainer-Australia", {
title: {
text: "Live Data"
},
axisX: {
title: "Axis X Title"
},
axisY: {
title: "Units"
},
data: [{
type: "line",
dataPoints: dps
}]
});
var chart2 = new CanvasJS.Chart("chartContainer-India", {
title: {
text: "Live Data"
},
axisX: {
title: "Axis X Title"
},
axisY: {
title: "Units"
},
data: [{
type: "line",
dataPoints: dps
}]
});
chart.render();
chart2.render();
var xVal = dps.length - 1;
var yVal = 15;
var updateInterval = 1000;
var updateChart = function() {
yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
dps.push({
x: xVal,
y: yVal
});
xVal--;
chart.render();
chart2.render();
};
setInterval(function() {
updateChart()
}, updateInterval);
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<h3>Match Summary:</h3>
<div ng-app ng-controller="MyCtrl">
<div ng-repeat="(country,goals) in items">
<div id="chartContainer-{{country}}" style="height: 200px; width: 100%;"></div>
<h2>{{country}}: {{goals}} </h2>
</div>
</div>