<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/petermelias/angular-chartjs/master/src/angular-chartjs.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-app="testapp">
<div ng-controller="testCtrl">
<cjs-doughnut dataset="doughnutData" options="doughnutOptions" segment-stroke-color="#1C1C1C" segment-stroke-width="2"></cjs-doughnut>
<cjs-line dataset="lineData"></cjs-line>
<cjs-bar dataset="barData"></cjs-bar>
<cjs-radar dataset="radarData"></cjs-radar>
<div style="width: 80%; height: 70%;">
<cjs-polar dataset="polarData" autofit="true"></cjs-polar>
</div>
<div style="height: 450px; width: 700px; background-color: grey;">
<cjs-pie dataset="polarData" autofit="true"></cjs-pie>
</div>
</div>
</body>
</html>
var app = angular.module('plunker', ['chartjs']);
app.controller('testCtrl', function ($scope) {
$scope.doughnutData = [{
value: 50,
color: '#333'
}, {
value: 100,
color: '#666'
}];
$scope.doughnutOptions = {
segmentStrokeWidth: 20
};
$scope.lineData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}]
};
$scope.barData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}]
};
$scope.radarData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Partying", "Running"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}]
}
$scope.polarData = [{
value: 30,
color: "#D97041"
}, {
value: 90,
color: "#C7604C"
}, {
value: 24,
color: "#21323D"
}, {
value: 58,
color: "#9D9B7F"
}, {
value: 82,
color: "#7D4F6D"
}, {
value: 8,
color: "#584A5E"
}];
$scope.pieData = [{
value: 30,
color: "#F38630"
}, {
value: 50,
color: "#E0E4CC"
}, {
value: 100,
color: "#69D2E7"
}];
});
/* Styles go here */
Demo for angular-chartjs.