Chart.js and angular-chart.js

Posted by On 1月 18, 2016 0 Comment

Chart.js

chartjs is JavaScript library to make several types of chart.
It’s simple and
We can use it under MIT license. We improve our website to use it.

Charts

  • Line Chart
  • Bar Chart
  • Radar Chart
  • Polar Area Chart
  • Pie & Doughnut Charts

How to user it

Download Chart.js and import it with script tag in html
If you use bower, 

bower install Chart.js --save

In Chart.js directory(bower_components/Chart.js/samples), there are several samples.

Example

<html>
<head>
  <title>Chart</title>
  <script src="bower_components/Chart.js/Chart.min.js"></script>
  <script>
  window.onload = function(){
     var ctx = document.getElementById("myChart").getContext("2d");
	 
	 var barChartData = {
		labels : ["Math","Science","English"],
		datasets : [
			{
				fillColor : "rgba(0,255,0,0.5)",
				strokeColor : "rgba(0,255,0,0.8)",
				highlightFill: "rgba(220,220,220,0.75)",
				highlightStroke: "rgba(220,220,220,1)",
				data : [100, 40, 55]
			}
		]

	}
     var myNewChart = new Chart(ctx).Bar(barChartData);
  };
  </script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>

chart.js

Unfortunately, x and y axis cannot be reversed in chart.js

angular-chart.js

angular-chart.js works with Chart.js and Angular.js
We can set options in scope and work with canvas tag and angular controller

How to use

bower is simple

bower install angular-chart.js --save

Example

<html>
<head>
	<title>Dounuts</title>
	<script src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/Chart.js/Chart.min.js"></script>
	<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
	<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
	<script>
	angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
	$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
    $scope.data1 = [300, 500, 100];
	$scope.options = {responsive: false}
	
	$scope.labels2 = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
	$scope.data2 = [[65, 59, 80, 81, 56, 55, 40]];
	$scope.colors = ['#00FF00', '#00FF00'];
    });
	</script>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
<h3>Dounuts</h3>
<canvas id="doughnut" class="chart chart-doughnut" chart-options="options"
  chart-data="data1" chart-labels="labels">
</canvas> 
<br>
<h3>Bar</h3>
<canvas id="bar" class="chart chart-bar" height="500" width="400" chart-data="data2" chart-labels="labels2" chart-series="series" chart-colours="colors" chart-options="options" >
</canvas>
</body>
</html>

angular-chart

TOPICS