Tabellepflege abgeschlossen, Entwicklung eingebunden, Basiswerte und CSS-Fixes
This commit is contained in:
Hilmer, Carsten
25
www/lib/angular-chart.js/examples/amd.html
Normal file
25
www/lib/angular-chart.js/examples/amd.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>AMD</title>
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="examples">
|
||||
<br/>
|
||||
<div class="container">
|
||||
<div class="row" ng-controller="RequireCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">AMD require.js</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-line" chart-data="data" chart-series="series" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script data-main="amd" src="../node_modules/requirejs/require.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
www/lib/angular-chart.js/examples/amd.js
Normal file
32
www/lib/angular-chart.js/examples/amd.js
Normal file
@@ -0,0 +1,32 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
require.config({
|
||||
paths: {
|
||||
angular: '../node_modules/angular/angular.min',
|
||||
chart: '../node_modules/chart.js/dist/Chart.min',
|
||||
'angular-chart': '../angular-chart'
|
||||
},
|
||||
shim: {
|
||||
angular: {
|
||||
exports: 'angular'
|
||||
},
|
||||
'chart.js': {
|
||||
deps: ['angular', 'chart']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
define(['angular', 'angular-chart'], function (angular/*, angularChart*/) {
|
||||
var app = angular.module('examples', ['chart.js']);
|
||||
app.controller('RequireCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
}]);
|
||||
});
|
||||
|
||||
})();
|
||||
80
www/lib/angular-chart.js/examples/app.css
Normal file
80
www/lib/angular-chart.js/examples/app.css
Normal file
@@ -0,0 +1,80 @@
|
||||
body { padding-top: 50px; }
|
||||
|
||||
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
|
||||
|
||||
#hero-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.aspect-ratio {
|
||||
width: 100%;
|
||||
padding-bottom: 25%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
font-size: larger;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.code .nav-tabs>li.active>a, .code .nav-tabs>li.active>a:hover, .code .nav-tabs>li.active>a:focus {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.code pre, .code code {
|
||||
background-color: #f8f8f8;
|
||||
border-top: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.settings > a, .settings {
|
||||
background-color: white ! important;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a {
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.settings > a.active {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
div.settings {
|
||||
border: 1px solid #ccc;
|
||||
border-top: 0;
|
||||
padding: 9.5px;
|
||||
margin: 0 0 10px
|
||||
}
|
||||
|
||||
div.settings > code {
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
margin-top: 70px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
311
www/lib/angular-chart.js/examples/app.js
Normal file
311
www/lib/angular-chart.js/examples/app.js
Normal file
@@ -0,0 +1,311 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
|
||||
|
||||
app.config(function (ChartJsProvider) {
|
||||
// Configure all charts
|
||||
ChartJsProvider.setOptions({
|
||||
colors: ['#97BBCD', '#DCDCDC', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']
|
||||
});
|
||||
// Configure all doughnut charts
|
||||
ChartJsProvider.setOptions('doughnut', {
|
||||
cutoutPercentage: 60
|
||||
});
|
||||
ChartJsProvider.setOptions('bubble', {
|
||||
tooltips: { enabled: false }
|
||||
});
|
||||
});
|
||||
|
||||
app.controller('MenuCtrl', ['$scope', function ($scope) {
|
||||
$scope.isCollapsed = true;
|
||||
$scope.charts = ['Line', 'Bar', 'Doughnut', 'Pie', 'Polar Area', 'Radar', 'Horizontal Bar', 'Bubble', 'Base'];
|
||||
}]);
|
||||
|
||||
app.controller('LineCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
$scope.onClick = function (points, evt) {
|
||||
console.log(points, evt);
|
||||
};
|
||||
$scope.onHover = function (points) {
|
||||
if (points.length > 0) {
|
||||
console.log('Point', points[0].value);
|
||||
} else {
|
||||
console.log('No point');
|
||||
}
|
||||
};
|
||||
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
|
||||
|
||||
$scope.options = {
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
id: 'y-axis-1',
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
id: 'y-axis-2',
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
app.controller('BarCtrl', ['$scope', function ($scope) {
|
||||
$scope.options = { legend: { display: true } };
|
||||
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
}]);
|
||||
|
||||
app.controller('DoughnutCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||
$scope.data = [0, 0, 0];
|
||||
|
||||
$timeout(function () {
|
||||
$scope.data = [350, 450, 100];
|
||||
}, 500);
|
||||
}]);
|
||||
|
||||
app.controller('PieCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
$scope.data = [300, 500, 100];
|
||||
$scope.options = { legend: { display: false } };
|
||||
}]);
|
||||
|
||||
app.controller('PolarAreaCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
|
||||
$scope.data = [300, 500, 100, 40, 120];
|
||||
$scope.options = { legend: { display: false } };
|
||||
}]);
|
||||
|
||||
app.controller('BaseCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['Download Sales', 'Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
|
||||
$scope.data = [300, 500, 100, 40, 120];
|
||||
$scope.type = 'polarArea';
|
||||
|
||||
$scope.toggle = function () {
|
||||
$scope.type = $scope.type === 'polarArea' ? 'pie' : 'polarArea';
|
||||
};
|
||||
}]);
|
||||
|
||||
app.controller('RadarCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
|
||||
$scope.options = { legend: { display: false } };
|
||||
|
||||
$scope.data = [
|
||||
[65, 59, 90, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 96, 27, 100]
|
||||
];
|
||||
|
||||
$scope.onClick = function (points, evt) {
|
||||
console.log(points, evt);
|
||||
};
|
||||
}]);
|
||||
|
||||
app.controller('StackedBarCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.type = 'StackedBar';
|
||||
$scope.series = ['2015', '2016'];
|
||||
$scope.options = {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
$scope.data = [
|
||||
[65, 59, 90, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 96, 27, 100]
|
||||
];
|
||||
}]);
|
||||
|
||||
app.controller('TabsCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.active = true;
|
||||
$scope.data = [
|
||||
[65, 59, 90, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 96, 27, 100]
|
||||
];
|
||||
}]);
|
||||
|
||||
app.controller('MixedChartCtrl', ['$scope', function ($scope) {
|
||||
$scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
|
||||
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.data = [
|
||||
[65, -59, 80, 81, -56, 55, -40],
|
||||
[28, 48, -40, 19, 86, 27, 90]
|
||||
];
|
||||
$scope.datasetOverride = [
|
||||
{
|
||||
label: 'Bar chart',
|
||||
borderWidth: 1,
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
label: 'Line chart',
|
||||
borderWidth: 3,
|
||||
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
|
||||
hoverBorderColor: 'rgba(255,99,132,1)',
|
||||
type: 'line'
|
||||
}
|
||||
];
|
||||
}]);
|
||||
|
||||
app.controller('DataTablesCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
$scope.colors = [
|
||||
{ // grey
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointHoverBackgroundColor: 'rgba(148,159,177,1)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
},
|
||||
{ // dark grey
|
||||
backgroundColor: 'rgba(77,83,96,0.2)',
|
||||
pointBackgroundColor: 'rgba(77,83,96,1)',
|
||||
pointHoverBackgroundColor: 'rgba(77,83,96,1)',
|
||||
borderColor: 'rgba(77,83,96,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(77,83,96,0.8)'
|
||||
}
|
||||
];
|
||||
$scope.options = { legend: { display: false } };
|
||||
$scope.randomize = function () {
|
||||
$scope.data = $scope.data.map(function (data) {
|
||||
return data.map(function (y) {
|
||||
y = y + Math.random() * 10 - 5;
|
||||
return parseInt(y < 0 ? 0 : y > 100 ? 100 : y);
|
||||
});
|
||||
});
|
||||
};
|
||||
}]);
|
||||
|
||||
app.controller('BubbleCtrl', ['$scope', '$interval', function ($scope, $interval) {
|
||||
$scope.options = {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
max: 125,
|
||||
min: -125,
|
||||
stepSize: 10
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
max: 125,
|
||||
min: -125,
|
||||
stepSize: 10
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
createChart();
|
||||
$interval(createChart, 2000);
|
||||
|
||||
function createChart () {
|
||||
$scope.data = [];
|
||||
for (var i = 0; i < 50; i++) {
|
||||
$scope.data.push([{
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: randomRadius()
|
||||
}]);
|
||||
}
|
||||
}
|
||||
|
||||
function randomScalingFactor () {
|
||||
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
|
||||
}
|
||||
|
||||
function randomRadius () {
|
||||
return Math.abs(randomScalingFactor()) / 4;
|
||||
}
|
||||
}]);
|
||||
|
||||
app.controller('TicksCtrl', ['$scope', '$interval', function ($scope, $interval) {
|
||||
var maximum = document.getElementById('container').clientWidth / 2 || 300;
|
||||
$scope.data = [[]];
|
||||
$scope.labels = [];
|
||||
$scope.options = {
|
||||
animation: {
|
||||
duration: 0
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 0.5
|
||||
},
|
||||
point: {
|
||||
radius: 0
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}],
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false
|
||||
}
|
||||
};
|
||||
|
||||
// Update the dataset at 25FPS for a smoothly-animating chart
|
||||
$interval(function () {
|
||||
getLiveChartData();
|
||||
}, 40);
|
||||
|
||||
function getLiveChartData () {
|
||||
if ($scope.data[0].length) {
|
||||
$scope.labels = $scope.labels.slice(1);
|
||||
$scope.data[0] = $scope.data[0].slice(1);
|
||||
}
|
||||
|
||||
while ($scope.data[0].length < maximum) {
|
||||
$scope.labels.push('');
|
||||
$scope.data[0].push(getRandomValue($scope.data[0]));
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
||||
function getRandomValue (data) {
|
||||
var l = data.length, previous = l ? data[l - 1] : 50;
|
||||
var y = previous + Math.random() * 10 - 5;
|
||||
return y < 0 ? 0 : y > 100 ? 100 : y;
|
||||
}
|
||||
})();
|
||||
5785
www/lib/angular-chart.js/examples/bootstrap.css
vendored
Normal file
5785
www/lib/angular-chart.js/examples/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
29
www/lib/angular-chart.js/examples/bubble.html
Normal file
29
www/lib/angular-chart.js/examples/bubble.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Bubble chart</title>
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="app">
|
||||
<br/>
|
||||
<div id="container" class="container">
|
||||
<div class="row" ng-controller="BubbleCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Bubble chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-bubble" chart-data="data"
|
||||
chart-colors="colors" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../angular-chart.js"></script>
|
||||
<script src="bubble.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
55
www/lib/angular-chart.js/examples/bubble.js
Normal file
55
www/lib/angular-chart.js/examples/bubble.js
Normal file
@@ -0,0 +1,55 @@
|
||||
angular.module('app', ['chart.js'])
|
||||
.config(['ChartJsProvider', function (ChartJsProvider) {
|
||||
'use strict';
|
||||
ChartJsProvider.setOptions({
|
||||
tooltips: { enabled: false }
|
||||
});
|
||||
}])
|
||||
.controller('BubbleCtrl', ['$scope', '$interval', function ($scope, $interval) {
|
||||
'use strict';
|
||||
|
||||
$scope.options = {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
max: 125,
|
||||
min: -125,
|
||||
stepSize: 10
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
max: 125,
|
||||
min: -125,
|
||||
stepSize: 10
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
createChart();
|
||||
$interval(createChart, 2000);
|
||||
|
||||
function createChart () {
|
||||
$scope.series = [];
|
||||
$scope.data = [];
|
||||
for (var i = 0; i < 50; i++) {
|
||||
$scope.series.push(`Series ${i}`);
|
||||
$scope.data.push([{
|
||||
x: randomScalingFactor(),
|
||||
y: randomScalingFactor(),
|
||||
r: randomRadius()
|
||||
}]);
|
||||
}
|
||||
}
|
||||
|
||||
function randomScalingFactor () {
|
||||
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
|
||||
}
|
||||
|
||||
function randomRadius () {
|
||||
return Math.abs(randomScalingFactor()) / 4;
|
||||
}
|
||||
}]);
|
||||
701
www/lib/angular-chart.js/examples/charts.html
Normal file
701
www/lib/angular-chart.js/examples/charts.html
Normal file
@@ -0,0 +1,701 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Charts</title>
|
||||
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="../node_modules/Rainbow/themes/github.css">
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
<link href="app.css" rel="stylesheet">
|
||||
<style>
|
||||
.chart-legend {
|
||||
list-style-type: none;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
/* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
|
||||
-webkit-padding-start: 0;
|
||||
/* Webkit */
|
||||
-moz-padding-start: 0;
|
||||
/* Mozilla */
|
||||
padding-left: 0;
|
||||
/* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
|
||||
}
|
||||
.chart-legend li {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 5px;
|
||||
padding: 2px 8px 2px 28px;
|
||||
font-size: smaller;
|
||||
cursor: default;
|
||||
}
|
||||
.chart-legend li span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body ng-app="examples" id="top">
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container" ng-controller="MenuCtrl">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand visible-xs" href="#">Angular Charts</a>
|
||||
</div>
|
||||
<nav class="hidden-xs">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href="#top" role="button" class="navbar-brand">
|
||||
Angular Chart
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a role="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
|
||||
Directives <b class="caret"></b>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="chart in charts"><a ng-href="#{{chart | lowercase }}-chart">{{chart}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#getting_started">Getting started</a></li>
|
||||
<li><a href="#reactive">Reactive</a></li>
|
||||
<li><a href="#mixed">Mixed type charts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="collapse" collapse="isCollapsed" style="height: 0px;">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
|
||||
<li><a href="#directives" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="text-center aspect-ratio" id="container" ng-controller="TicksCtrl">
|
||||
<canvas width='1200' height='300' id="hero-bar" class="chart chart-line" chart-data="data"
|
||||
chart-options="options" chart-labels="labels"></canvas>
|
||||
<div class="header">
|
||||
<h1>
|
||||
Angular Chart
|
||||
</h1>
|
||||
|
||||
<p>Reactive, responsive, beautiful charts for <a href="http://angularjs.org">AngularJS</a> based on <a href="http://www.chartjs.org">Chart.js</a></p>
|
||||
|
||||
<p>
|
||||
<a class="btn btn-default btn-lg" href="https://github.com/jtblin/angular-chart"><i class="icon-github"></i>Code on Github</a>
|
||||
<a class="btn btn-success btn-lg" href="../dist/angular-chart.js.tar.gz" download="angular-chart.js.tar.gz">
|
||||
<i class="fa fa-download"></i> Download <small>(1.0.2)</small>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<section id="getting_started">
|
||||
<div class="page-header">
|
||||
<h1>Getting started</h1>
|
||||
</div>
|
||||
<h3>Dependencies</h3>
|
||||
<p>
|
||||
This repository contains a set of <strong>native AngularJS directives</strong> for Chart.js. The <strong>only required dependencies</strong> are:
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="http://angularjs.org" target="_blank">AngularJS</a> (tested with 1.2.x, 1.3.x, 1.4.x and 1.5.x although it probably works with older versions)</li>
|
||||
<li><a href="http://chartjs.org" target="_blank">Chart.js</a> (requires Chart.js 2.0.x).</li>
|
||||
</ul>
|
||||
<h3>Files to download</h3>
|
||||
<p>
|
||||
The easiest is to download with <strong>npm</strong>:
|
||||
<pre>npm install angular-chart.js --save</pre>
|
||||
Alternatively files can be <a href="https://github.com/jtblin/angular-chart.js">downloaded from Github</a> or via bower.
|
||||
See <a href="https://github.com/jtblin/angular-chart.js">readme</a> for more information.
|
||||
</p>
|
||||
<p>Whichever method you choose the good news is that the overall size is very small:
|
||||
<5kb for all directives (~1kb with gzip compression!)</p>
|
||||
<h3>Installation</h3>
|
||||
<p>You need to include the dependencies in your page:</p>
|
||||
<pre><code><script src="node_modules/chart.js/Chart.min.js"></script>
|
||||
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script></code></pre>
|
||||
<p>As soon as you've got all the files downloaded and included in your page you just need to declare
|
||||
a dependency on the <code>chart.js</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
|
||||
</p><pre><code>angular.module('myModule', ['chart.js']);</code></pre>
|
||||
<p></p>
|
||||
<h3>CSS</h3>
|
||||
<p></p>
|
||||
<h3>Colors</h3>
|
||||
<p>Series have beautiful pre-sets colors (to a maximum of 7 series, after that colors will be randomly generated).
|
||||
They can be overwritten using <code>Chart.defaults.global.colors</code>.</p>
|
||||
<ol class="chart-legend">
|
||||
<li><span style="background-color: rgba(151,187,205,1)"></span>Blue</li>
|
||||
<li><span style="background-color: rgba(220,220,220,1)"></span>Light grey</li>
|
||||
<li><span style="background-color: rgba(247,70,74,1)"></span>Red</li>
|
||||
<li><span style="background-color: rgba(70,191,189,1)"></span>Green</li>
|
||||
<li><span style="background-color: rgba(253,180,92,1)"></span>Yellow</li>
|
||||
<li><span style="background-color: rgba(148,159,177,1)"></span>Grey</li>
|
||||
<li><span style="background-color: rgba(77,83,96,1)"></span>Dark Grey</li>
|
||||
</ol>
|
||||
<p>You can also use the provider : <code>ChartJsProvider</code> in a <code>.config()</code></p>
|
||||
<p><pre><code>(function (ChartJsProvider) {
|
||||
ChartJsProvider.setOptions({ colors : [ '#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'] });
|
||||
}); </code></pre></p>
|
||||
</section>
|
||||
<section id="directives">
|
||||
<div class="page-header">
|
||||
<h1>Directives</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" id="line-chart" ng-controller="LineCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Line Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
|
||||
chart-click="onClick" chart-hover="onHover" chart-series="series" chart-options="options"
|
||||
chart-dataset-override="datasetOverride"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-line</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: x axis labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="line" class="chart chart-line" chart-data="data"
|
||||
chart-labels="labels" chart-series="series" chart-options="options"
|
||||
chart-dataset-override="datasetOverride" chart-click="onClick"
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {
|
||||
|
||||
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
$scope.onClick = function (points, evt) {
|
||||
console.log(points, evt);
|
||||
};
|
||||
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
|
||||
$scope.options = {
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
id: 'y-axis-1',
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
id: 'y-axis-2',
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-bar</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: x axis labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="bar" class="chart chart-bar"
|
||||
chart-data="data" chart-labels="labels"> chart-series="series"
|
||||
</canvas></code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
|
||||
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Bar Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
|
||||
chart-series="series" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Doughnut Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="doughnut" class="chart chart-doughnut chart-xs" chart-data="data"
|
||||
chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-doughnut</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: series labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="doughnut" class="chart chart-doughnut"
|
||||
chart-data="data" chart-labels="labels">
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
|
||||
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
|
||||
$scope.data = [300, 500, 100];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-radar</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: series labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="radar" class="chart chart-radar"
|
||||
chart-data="data" chart-options="options" chart-labels="labels">
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("RadarCtrl", function ($scope) {
|
||||
$scope.labels =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
|
||||
|
||||
$scope.data = [
|
||||
[65, 59, 90, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 96, 27, 100]
|
||||
];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Radar Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="area" class="chart chart-radar" chart-data="data"
|
||||
chart-labels="labels" chart-options="options" chart-click="onClick"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Pie Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="pie" class="chart chart-pie chart-xs" chart-data="data"
|
||||
chart-labels="labels" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-pie</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: series labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="pie" class="chart chart-pie"
|
||||
chart-data="data" chart-labels="labels" chart-options="options">
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
|
||||
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
|
||||
$scope.data = [300, 500, 100];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-polar-area</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: series labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="polar-area" class="chart chart-polar-area"
|
||||
chart-data="data" chart-labels="labels" chart-options="options">
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PolarAreaCtrl", function ($scope) {
|
||||
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
|
||||
$scope.data = [300, 500, 100, 40, 120];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Polar Area Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="polar" class="chart chart-polar-area" chart-data="data"
|
||||
chart-labels="labels" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" id="horizontal bar-chart" ng-controller="BarCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Horizontal Bar Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="horizontal" class="chart chart-horizontal-bar" chart-data="data"
|
||||
chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-horizontal-bar</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: x axis labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="base" class="chart-horizontal-bar"
|
||||
chart-data="data" chart-labels="labels" >
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl",
|
||||
function ($scope) {
|
||||
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-bubble</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: x axis labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><!--see examples/bubble.html for random bubbles source code-->
|
||||
<canvas id="base" class="chart-bubble" chart-data="data"
|
||||
chart-series="series" >
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BubbleCtrl",
|
||||
function ($scope) {
|
||||
// see examples/bubble.js for random bubbles source code
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
|
||||
$scope.data = [
|
||||
[{
|
||||
x: 40,
|
||||
y: 10,
|
||||
r: 20
|
||||
}],
|
||||
[{
|
||||
x: 10,
|
||||
y: 40,
|
||||
r: 50
|
||||
}]
|
||||
];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12" id="bubble-chart" ng-controller="BubbleCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Bubble Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="bubble" class="chart chart-bubble" chart-data="data" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Dynamic Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
|
||||
chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-base</code>
|
||||
<ul>
|
||||
<li><code>chart-type</code>: chart type e.g. Bar, PolarArea, etc. or other plugins</li>
|
||||
<li>other options according to chart type</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="base" class="chart-base" chart-type="type"
|
||||
chart-data="data" chart-labels="labels" >
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BaseCtrl",
|
||||
function ($scope) {
|
||||
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
|
||||
$scope.data = [300, 500, 100, 40, 120];
|
||||
$scope.type = 'PolarArea';
|
||||
|
||||
$scope.toggle = function () {
|
||||
$scope.type = $scope.type === 'PolarArea' ?
|
||||
'Pie' : 'PolarArea';
|
||||
};
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="reactive">
|
||||
<div class="page-header">
|
||||
<h1>Reactive</h1>
|
||||
<p>All charts are reactive and will update automatically when data changes.</p>
|
||||
</div>
|
||||
<div class="row" ng-controller="DataTablesCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Reactive Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="tables" class="chart chart-line" chart-data="data" chart-options="options"
|
||||
chart-labels="labels" chart-colors="colors"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Chart Data</div>
|
||||
<div class="panel-body">
|
||||
<table class="table table-responsive table-condensed table-striped">
|
||||
<tr>
|
||||
<th ng-repeat="label in labels">{{label}}</th>
|
||||
</tr>
|
||||
<tr ng-repeat="dataSet in data">
|
||||
<td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
<button type="button" class="btn btn-primary pull-right" ng-click="randomize()">Randomize</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="mixed">
|
||||
<div class="page-header">
|
||||
<h1>Mixed type charts</h1>
|
||||
<p>It is possible to combine multiple types of charts on the same canvas e.g. bar and line.</p>
|
||||
</div>
|
||||
<div class="row" ng-controller="MixedChartCtrl">
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="base" class="chart-bar"
|
||||
chart-data="data" chart-labels="labels" chart-colors="colors"
|
||||
chart-dataset-override="datasetOverride" >
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("MixedChartCtrl",
|
||||
function ($scope) {
|
||||
$scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
|
||||
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.data = [
|
||||
[65, -59, 80, 81, -56, 55, -40],
|
||||
[28, 48, -40, 19, 86, 27, 90]
|
||||
];
|
||||
$scope.datasetOverride = [
|
||||
{
|
||||
label: "Bar chart",
|
||||
borderWidth: 1,
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
label: "Line chart",
|
||||
borderWidth: 3,
|
||||
hoverBackgroundColor: "rgba(255,99,132,0.4)",
|
||||
hoverBorderColor: "rgba(255,99,132,1)",
|
||||
type: 'line'
|
||||
}
|
||||
];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Bar line Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
|
||||
chart-colors="colors" chart-dataset-override="datasetOverride"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>Designed and built by <a href="https://github.com/jtblin" target="_blank">Jerome Touffe-Blin</a></p>
|
||||
<p>Code licensed under <a href="https://github.com/jtblin/angular-chart.js/blob/master/LICENSE">BSD License</a>.</p>
|
||||
<p><a href="https://github.com/jtblin/angular-chart.js/issues?state=open">Issues</a></p>
|
||||
<p><strong>Credits</strong>: <a href="http://www.chartjs.org/">Chart.js</a> and <a href="https://angularjs.org/">AngularJS</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||
<script src="../node_modules/Rainbow/js/rainbow.min.js"></script>
|
||||
<script src="../node_modules/Rainbow/js/language/generic.js"></script>
|
||||
<script src="../node_modules/Rainbow/js/language/html.js"></script>
|
||||
<script src="../node_modules/Rainbow/js/language/javascript.js"></script>
|
||||
<script src="../angular-chart.js"></script>
|
||||
<script src="smoothscroll.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
701
www/lib/angular-chart.js/examples/charts.template.html
Normal file
701
www/lib/angular-chart.js/examples/charts.template.html
Normal file
@@ -0,0 +1,701 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Charts</title>
|
||||
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="../node_modules/Rainbow/themes/github.css">
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
<link href="app.css" rel="stylesheet">
|
||||
<style>
|
||||
.chart-legend {
|
||||
list-style-type: none;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
/* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
|
||||
-webkit-padding-start: 0;
|
||||
/* Webkit */
|
||||
-moz-padding-start: 0;
|
||||
/* Mozilla */
|
||||
padding-left: 0;
|
||||
/* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
|
||||
}
|
||||
.chart-legend li {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 5px;
|
||||
padding: 2px 8px 2px 28px;
|
||||
font-size: smaller;
|
||||
cursor: default;
|
||||
}
|
||||
.chart-legend li span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body ng-app="examples" id="top">
|
||||
<div class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container" ng-controller="MenuCtrl">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand visible-xs" href="#">Angular Charts</a>
|
||||
</div>
|
||||
<nav class="hidden-xs">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href="#top" role="button" class="navbar-brand">
|
||||
Angular Chart
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a role="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
|
||||
Directives <b class="caret"></b>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="chart in charts"><a ng-href="#{{chart | lowercase }}-chart">{{chart}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#getting_started">Getting started</a></li>
|
||||
<li><a href="#reactive">Reactive</a></li>
|
||||
<li><a href="#mixed">Mixed type charts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="collapse" collapse="isCollapsed" style="height: 0px;">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
|
||||
<li><a href="#directives" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="text-center aspect-ratio" id="container" ng-controller="TicksCtrl">
|
||||
<canvas width='1200' height='300' id="hero-bar" class="chart chart-line" chart-data="data"
|
||||
chart-options="options" chart-labels="labels"></canvas>
|
||||
<div class="header">
|
||||
<h1>
|
||||
Angular Chart
|
||||
</h1>
|
||||
|
||||
<p>Reactive, responsive, beautiful charts for <a href="http://angularjs.org">AngularJS</a> based on <a href="http://www.chartjs.org">Chart.js</a></p>
|
||||
|
||||
<p>
|
||||
<a class="btn btn-default btn-lg" href="https://github.com/jtblin/angular-chart"><i class="icon-github"></i>Code on Github</a>
|
||||
<a class="btn btn-success btn-lg" href="../dist/angular-chart.js.tar.gz" download="angular-chart.js.tar.gz">
|
||||
<i class="fa fa-download"></i> Download <small>(<!-- version -->)</small>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<section id="getting_started">
|
||||
<div class="page-header">
|
||||
<h1>Getting started</h1>
|
||||
</div>
|
||||
<h3>Dependencies</h3>
|
||||
<p>
|
||||
This repository contains a set of <strong>native AngularJS directives</strong> for Chart.js. The <strong>only required dependencies</strong> are:
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="http://angularjs.org" target="_blank">AngularJS</a> (tested with 1.2.x, 1.3.x, 1.4.x and 1.5.x although it probably works with older versions)</li>
|
||||
<li><a href="http://chartjs.org" target="_blank">Chart.js</a> (requires Chart.js 2.0.x).</li>
|
||||
</ul>
|
||||
<h3>Files to download</h3>
|
||||
<p>
|
||||
The easiest is to download with <strong>npm</strong>:
|
||||
<pre>npm install angular-chart.js --save</pre>
|
||||
Alternatively files can be <a href="https://github.com/jtblin/angular-chart.js">downloaded from Github</a> or via bower.
|
||||
See <a href="https://github.com/jtblin/angular-chart.js">readme</a> for more information.
|
||||
</p>
|
||||
<p>Whichever method you choose the good news is that the overall size is very small:
|
||||
<5kb for all directives (~1kb with gzip compression!)</p>
|
||||
<h3>Installation</h3>
|
||||
<p>You need to include the dependencies in your page:</p>
|
||||
<pre><code><script src="node_modules/chart.js/Chart.min.js"></script>
|
||||
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script></code></pre>
|
||||
<p>As soon as you've got all the files downloaded and included in your page you just need to declare
|
||||
a dependency on the <code>chart.js</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
|
||||
</p><pre><code>angular.module('myModule', ['chart.js']);</code></pre>
|
||||
<p></p>
|
||||
<h3>CSS</h3>
|
||||
<p></p>
|
||||
<h3>Colors</h3>
|
||||
<p>Series have beautiful pre-sets colors (to a maximum of 7 series, after that colors will be randomly generated).
|
||||
They can be overwritten using <code>Chart.defaults.global.colors</code>.</p>
|
||||
<ol class="chart-legend">
|
||||
<li><span style="background-color: rgba(151,187,205,1)"></span>Blue</li>
|
||||
<li><span style="background-color: rgba(220,220,220,1)"></span>Light grey</li>
|
||||
<li><span style="background-color: rgba(247,70,74,1)"></span>Red</li>
|
||||
<li><span style="background-color: rgba(70,191,189,1)"></span>Green</li>
|
||||
<li><span style="background-color: rgba(253,180,92,1)"></span>Yellow</li>
|
||||
<li><span style="background-color: rgba(148,159,177,1)"></span>Grey</li>
|
||||
<li><span style="background-color: rgba(77,83,96,1)"></span>Dark Grey</li>
|
||||
</ol>
|
||||
<p>You can also use the provider : <code>ChartJsProvider</code> in a <code>.config()</code></p>
|
||||
<p><pre><code>(function (ChartJsProvider) {
|
||||
ChartJsProvider.setOptions({ colors : [ '#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'] });
|
||||
}); </code></pre></p>
|
||||
</section>
|
||||
<section id="directives">
|
||||
<div class="page-header">
|
||||
<h1>Directives</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" id="line-chart" ng-controller="LineCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Line Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
|
||||
chart-click="onClick" chart-hover="onHover" chart-series="series" chart-options="options"
|
||||
chart-dataset-override="datasetOverride"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-line</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: x axis labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="line" class="chart chart-line" chart-data="data"
|
||||
chart-labels="labels" chart-series="series" chart-options="options"
|
||||
chart-dataset-override="datasetOverride" chart-click="onClick"
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {
|
||||
|
||||
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
$scope.onClick = function (points, evt) {
|
||||
console.log(points, evt);
|
||||
};
|
||||
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
|
||||
$scope.options = {
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
id: 'y-axis-1',
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
id: 'y-axis-2',
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-bar</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: x axis labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="bar" class="chart chart-bar"
|
||||
chart-data="data" chart-labels="labels"> chart-series="series"
|
||||
</canvas></code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
|
||||
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Bar Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
|
||||
chart-series="series" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Doughnut Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="doughnut" class="chart chart-doughnut chart-xs" chart-data="data"
|
||||
chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-doughnut</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: series labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="doughnut" class="chart chart-doughnut"
|
||||
chart-data="data" chart-labels="labels">
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
|
||||
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
|
||||
$scope.data = [300, 500, 100];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-radar</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: series labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="radar" class="chart chart-radar"
|
||||
chart-data="data" chart-options="options" chart-labels="labels">
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("RadarCtrl", function ($scope) {
|
||||
$scope.labels =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
|
||||
|
||||
$scope.data = [
|
||||
[65, 59, 90, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 96, 27, 100]
|
||||
];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Radar Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="area" class="chart chart-radar" chart-data="data"
|
||||
chart-labels="labels" chart-options="options" chart-click="onClick"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Pie Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="pie" class="chart chart-pie chart-xs" chart-data="data"
|
||||
chart-labels="labels" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-pie</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: series labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="pie" class="chart chart-pie"
|
||||
chart-data="data" chart-labels="labels" chart-options="options">
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
|
||||
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
|
||||
$scope.data = [300, 500, 100];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-polar-area</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: series labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="polar-area" class="chart chart-polar-area"
|
||||
chart-data="data" chart-labels="labels" chart-options="options">
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PolarAreaCtrl", function ($scope) {
|
||||
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
|
||||
$scope.data = [300, 500, 100, 40, 120];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Polar Area Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="polar" class="chart chart-polar-area" chart-data="data"
|
||||
chart-labels="labels" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" id="horizontal bar-chart" ng-controller="BarCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Horizontal Bar Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="horizontal" class="chart chart-horizontal-bar" chart-data="data"
|
||||
chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-horizontal-bar</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: x axis labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="base" class="chart-horizontal-bar"
|
||||
chart-data="data" chart-labels="labels" >
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl",
|
||||
function ($scope) {
|
||||
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-bubble</code>
|
||||
<ul>
|
||||
<li><code>chart-data</code>: series data</li>
|
||||
<li><code>chart-labels</code>: x axis labels</li>
|
||||
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
|
||||
<li><code>chart-click</code> (optional): onclick event handler</li>
|
||||
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
|
||||
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
|
||||
<li><code>chart-dataset-override</code> (optional): override datasets individually</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><!--see examples/bubble.html for random bubbles source code-->
|
||||
<canvas id="base" class="chart-bubble" chart-data="data"
|
||||
chart-series="series" >
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BubbleCtrl",
|
||||
function ($scope) {
|
||||
// see examples/bubble.js for random bubbles source code
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
|
||||
$scope.data = [
|
||||
[{
|
||||
x: 40,
|
||||
y: 10,
|
||||
r: 20
|
||||
}],
|
||||
[{
|
||||
x: 10,
|
||||
y: 40,
|
||||
r: 50
|
||||
}]
|
||||
];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12" id="bubble-chart" ng-controller="BubbleCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Bubble Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="bubble" class="chart chart-bubble" chart-data="data" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Dynamic Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
|
||||
chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Settings" class="settings">
|
||||
<div class="settings">
|
||||
<code>.chart-base</code>
|
||||
<ul>
|
||||
<li><code>chart-type</code>: chart type e.g. Bar, PolarArea, etc. or other plugins</li>
|
||||
<li>other options according to chart type</li>
|
||||
</ul>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="base" class="chart-base" chart-type="type"
|
||||
chart-data="data" chart-labels="labels" >
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BaseCtrl",
|
||||
function ($scope) {
|
||||
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
|
||||
$scope.data = [300, 500, 100, 40, 120];
|
||||
$scope.type = 'PolarArea';
|
||||
|
||||
$scope.toggle = function () {
|
||||
$scope.type = $scope.type === 'PolarArea' ?
|
||||
'Pie' : 'PolarArea';
|
||||
};
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="reactive">
|
||||
<div class="page-header">
|
||||
<h1>Reactive</h1>
|
||||
<p>All charts are reactive and will update automatically when data changes.</p>
|
||||
</div>
|
||||
<div class="row" ng-controller="DataTablesCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Reactive Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="tables" class="chart chart-line" chart-data="data" chart-options="options"
|
||||
chart-labels="labels" chart-colors="colors"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Chart Data</div>
|
||||
<div class="panel-body">
|
||||
<table class="table table-responsive table-condensed table-striped">
|
||||
<tr>
|
||||
<th ng-repeat="label in labels">{{label}}</th>
|
||||
</tr>
|
||||
<tr ng-repeat="dataSet in data">
|
||||
<td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
<button type="button" class="btn btn-primary pull-right" ng-click="randomize()">Randomize</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="mixed">
|
||||
<div class="page-header">
|
||||
<h1>Mixed type charts</h1>
|
||||
<p>It is possible to combine multiple types of charts on the same canvas e.g. bar and line.</p>
|
||||
</div>
|
||||
<div class="row" ng-controller="MixedChartCtrl">
|
||||
<div class="col-lg-6 col-sm-12 code">
|
||||
<tabset>
|
||||
<tab heading="Markup">
|
||||
<pre><code data-language="html"><canvas id="base" class="chart-bar"
|
||||
chart-data="data" chart-labels="labels" chart-colors="colors"
|
||||
chart-dataset-override="datasetOverride" >
|
||||
</canvas> </code></pre>
|
||||
</tab>
|
||||
<tab heading="Javascript">
|
||||
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("MixedChartCtrl",
|
||||
function ($scope) {
|
||||
$scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
|
||||
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.data = [
|
||||
[65, -59, 80, 81, -56, 55, -40],
|
||||
[28, 48, -40, 19, 86, 27, 90]
|
||||
];
|
||||
$scope.datasetOverride = [
|
||||
{
|
||||
label: "Bar chart",
|
||||
borderWidth: 1,
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
label: "Line chart",
|
||||
borderWidth: 3,
|
||||
hoverBackgroundColor: "rgba(255,99,132,0.4)",
|
||||
hoverBorderColor: "rgba(255,99,132,1)",
|
||||
type: 'line'
|
||||
}
|
||||
];
|
||||
});
|
||||
</code></pre>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Bar line Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
|
||||
chart-colors="colors" chart-dataset-override="datasetOverride"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>Designed and built by <a href="https://github.com/jtblin" target="_blank">Jerome Touffe-Blin</a></p>
|
||||
<p>Code licensed under <a href="https://github.com/jtblin/angular-chart.js/blob/master/LICENSE">BSD License</a>.</p>
|
||||
<p><a href="https://github.com/jtblin/angular-chart.js/issues?state=open">Issues</a></p>
|
||||
<p><strong>Credits</strong>: <a href="http://www.chartjs.org/">Chart.js</a> and <a href="https://angularjs.org/">AngularJS</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||
<script src="../node_modules/Rainbow/js/rainbow.min.js"></script>
|
||||
<script src="../node_modules/Rainbow/js/language/generic.js"></script>
|
||||
<script src="../node_modules/Rainbow/js/language/html.js"></script>
|
||||
<script src="../node_modules/Rainbow/js/language/javascript.js"></script>
|
||||
<script src="../angular-chart.js"></script>
|
||||
<script src="smoothscroll.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
25
www/lib/angular-chart.js/examples/commonjs.html
Normal file
25
www/lib/angular-chart.js/examples/commonjs.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>CommonJS</title>
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="app">
|
||||
<br/>
|
||||
<div class="container">
|
||||
<div class="row" ng-controller="CommonJSCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">CommonJS</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-line" chart-data="data" chart-series="series" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="commonjs.bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
19
www/lib/angular-chart.js/examples/commonjs.js
Normal file
19
www/lib/angular-chart.js/examples/commonjs.js
Normal file
@@ -0,0 +1,19 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var angular = require('angular');
|
||||
|
||||
var app = angular.module('app', [
|
||||
require('angular-chart')
|
||||
]);
|
||||
|
||||
app.controller('CommonJSCtrl', ['$scope', function ($scope) {
|
||||
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
$scope.data = [
|
||||
[65, 59, 80, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 86, 27, 90]
|
||||
];
|
||||
}]);
|
||||
|
||||
})();
|
||||
38
www/lib/angular-chart.js/examples/dataset-override.html
Normal file
38
www/lib/angular-chart.js/examples/dataset-override.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Charts with datasets overrides</title>
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="app">
|
||||
<br/>
|
||||
<div id="container" class="container">
|
||||
<div class="row" ng-controller="OverrideCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Mixed chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-bar" chart-data="data1" chart-labels="labels1"
|
||||
chart-colors="colors" chart-dataset-override="datasetOverride1"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Doughnut dataset override</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-doughnut" chart-data="data2" chart-labels="labels2"
|
||||
chart-colors="colors" chart-dataset-override="datasetOverride2"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../angular-chart.js"></script>
|
||||
<script src="dataset-override.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
www/lib/angular-chart.js/examples/dataset-override.js
Normal file
32
www/lib/angular-chart.js/examples/dataset-override.js
Normal file
@@ -0,0 +1,32 @@
|
||||
angular.module('app', ['chart.js']).controller('OverrideCtrl', ['$scope', function ($scope) {
|
||||
'use strict';
|
||||
|
||||
$scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
|
||||
|
||||
$scope.labels1 = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
$scope.data1 = [
|
||||
[65, -59, 80, 81, -56, 55, -40],
|
||||
[28, 48, -40, 19, 86, 27, 90]
|
||||
];
|
||||
$scope.datasetOverride1 = [
|
||||
{
|
||||
label: 'Override Series A',
|
||||
borderWidth: 1,
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
label: 'Override Series B',
|
||||
borderWidth: 3,
|
||||
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
|
||||
hoverBorderColor: 'rgba(255,99,132,1)',
|
||||
type: 'line'
|
||||
}
|
||||
];
|
||||
|
||||
$scope.labels2 = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||
$scope.data2 = [350, 450, 100];
|
||||
$scope.datasetOverride2 = {
|
||||
hoverBackgroundColor: ['#45b7cd', '#ff6384', '#ff8e72'],
|
||||
hoverBorderColor: ['#45b7cd', '#ff6384', '#ff8e72']
|
||||
};
|
||||
}]);
|
||||
1
www/lib/angular-chart.js/examples/smoothscroll.min.js
vendored
Normal file
1
www/lib/angular-chart.js/examples/smoothscroll.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
window.smoothScroll=function(){if(document.querySelectorAll===void 0||window.pageYOffset===void 0||history.pushState===void 0){return}var e=function(e){if(e.nodeName==="HTML")return-window.pageYOffset;return e.getBoundingClientRect().top+window.pageYOffset};var t=function(e){return e<.5?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1};var n=function(e,n,r,i){if(r>i)return n;return e+(n-e)*t(r/i)};var r=function(t,r,i){r=r||500;var s=window.pageYOffset;if(typeof t==="number"){var o=parseInt(t)}else{var o=e(t)}var u=Date.now();var a=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)};var f=function(){var e=Date.now()-u;window.scroll(0,n(s,o,e,r));if(e>r){if(typeof i==="function"){i(t)}}else{a(f)}};f()};var i=function(e){e.preventDefault();if(location.hash!==this.hash)window.history.pushState(null,null,this.hash);r(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll('a[href^="#"]'),t;for(var n=e.length;t=e[--n];){t.addEventListener("click",i,false)}});return r}()
|
||||
31
www/lib/angular-chart.js/examples/stacked-bars.html
Normal file
31
www/lib/angular-chart.js/examples/stacked-bars.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Stacked Bar chart</title>
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="examples">
|
||||
<br/>
|
||||
<div class="container"></div>
|
||||
<div id="container" class="container">
|
||||
<div class="row" ng-controller="StackedBarCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Stacked Bar Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
|
||||
chart-options="options" chart-series="series"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../node_modules/angular/angular.js"></script>
|
||||
<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||
<script src="../node_modules/chart.js/dist/Chart.js"></script>
|
||||
<script src="../angular-chart.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
45
www/lib/angular-chart.js/examples/tables.html
Normal file
45
www/lib/angular-chart.js/examples/tables.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Data tables</title>
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="examples">
|
||||
<div class="container"></div>
|
||||
<div id="container" class="container">
|
||||
<div class="row" ng-controller="DataTablesCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Chart Data</div>
|
||||
<div class="panel-body">
|
||||
<table class="table table-responsive table-condensed">
|
||||
<tr>
|
||||
<th ng-repeat="label in labels">{{label}}</th>
|
||||
</tr>
|
||||
<tr ng-repeat="dataSet in data">
|
||||
<td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
<input ng-click="randomize()" value="Randomize" type="button" class="pull-right"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Reactive Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="tables" class="chart chart-line" chart-data="data" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../angular-chart.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
33
www/lib/angular-chart.js/examples/tabs.html
Normal file
33
www/lib/angular-chart.js/examples/tabs.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Charts in tabs</title>
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="examples">
|
||||
<br/>
|
||||
<div id="container" class="container">
|
||||
<div class="row" ng-controller="TabsCtrl">
|
||||
<tabset>
|
||||
<tab heading="First tab" active="active">
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</tab>
|
||||
<tab heading="Second tab">
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-bar" chart-data="data" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../node_modules/angular/angular.js"></script>
|
||||
<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../angular-chart.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
30
www/lib/angular-chart.js/examples/ticks.html
Normal file
30
www/lib/angular-chart.js/examples/ticks.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Realtime ticks</title>
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="examples">
|
||||
<div class="container"></div>
|
||||
<div id="container" class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-sm-12" ng-controller="TicksCtrl">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Ticks Chart</div>
|
||||
<div class="panel-body">
|
||||
<canvas id="ticks" class="chart chart-line" chart-data="data"
|
||||
chart-options="options" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../node_modules/angular/angular.min.js"></script>
|
||||
<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../angular-chart.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18
www/lib/angular-chart.js/examples/webpack.commonjs.js
Normal file
18
www/lib/angular-chart.js/examples/webpack.commonjs.js
Normal file
@@ -0,0 +1,18 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// install with npm: npm i --save angular-chart.js
|
||||
// build with `npm bin`/webpack --config examples/webpack.commonjs.js --display-modules --progress
|
||||
module.exports = {
|
||||
entry: './examples/commonjs.js',
|
||||
output: {
|
||||
filename: './examples/commonjs.bundle.js'
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'angular-chart': '../angular-chart.js' // not required when you install with npm
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
12
www/lib/angular-chart.js/examples/webpack.config.js
Normal file
12
www/lib/angular-chart.js/examples/webpack.config.js
Normal file
@@ -0,0 +1,12 @@
|
||||
// install with npm: npm i --save angular-chart.js
|
||||
module.exports = {
|
||||
entry: './amd.js',
|
||||
output: {
|
||||
filename: './bundle.js'
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'angular-chart': '../angular-chart.js' // should not be required if you installed with npm
|
||||
}
|
||||
}
|
||||
};
|
||||
28
www/lib/angular-chart.js/examples/xy.html
Normal file
28
www/lib/angular-chart.js/examples/xy.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Charts with { x, y }</title>
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
</head>
|
||||
<body ng-app="app">
|
||||
<br/>
|
||||
<div id="container" class="container">
|
||||
<div class="row" ng-controller="LineCtrl">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">x y</div>
|
||||
<div class="panel-body">
|
||||
<canvas class="chart chart-line" chart-data="data" chart-series="series" chart-options="options"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../node_modules/angular/angular.js"></script>
|
||||
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="../angular-chart.js"></script>
|
||||
<script src="xy.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18
www/lib/angular-chart.js/examples/xy.js
Normal file
18
www/lib/angular-chart.js/examples/xy.js
Normal file
@@ -0,0 +1,18 @@
|
||||
angular.module('app', ['chart.js']).controller('LineCtrl', ['$scope', function ($scope) {
|
||||
'use strict';
|
||||
|
||||
$scope.series = ['Series A', 'Series B'];
|
||||
$scope.data = [
|
||||
[ {x: 0, y: 10}, {x: 0, y: 1}, {x: 1, y: 6}, {x: 4, y: 2} ],
|
||||
[ {x: 0, y: 2}, {x: 5, y: 7}, {x: 4, y: 2}, {x: 2, y: 9} ]
|
||||
];
|
||||
$scope.options = {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'linear',
|
||||
position: 'bottom'
|
||||
}]
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
Reference in New Issue
Block a user