<!DOCTYPE html>
<html>
<head>
<link data-require="kendoUI@2015.1.318" data-semver="2015.1.318" rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" />
<link data-require="kendoUI@2015.1.318" data-semver="2015.1.318" rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css" />
<script data-require="jquery@*" data-semver="1.9.1" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script data-require="angularjs_1_3_15@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script data-require="angularjs_1_3_15@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-animate.min.js"></script>
<script data-require="angularjs_1_3_15@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-aria.min.js"></script>
<script data-require="kendoUI@2015.1.318" data-semver="2015.1.318" src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js"></script>
<meta charset="utf-8" />
<title>KendoUI Template</title>
</head>
<body ng-app="app" ng-controller="mainCtrl">
<div>
<button ng-click="onButtonClick($event)">Refresh the data source</button>
</div>
<div kendo-chart="theChart" k-options="chartOptions" k-data-source="modelDetermination"></div>
<div kendo-chart k-options="barOptions"></div>
</body>
</html>
// Code goes here
var app = angular.module('app', ['kendo.directives']);
app.controller('mainCtrl', function($controller, $scope, $log, $timeout) {
'use strict';
/*SAMPLE CHART*/
$scope.barOptions = {
dataSource: [{
"country": "United States",
"year": "2005",
"value": 67.96,
"color": "blue"
}, {
"country": "United States",
"year": "2006",
"value": 68.93,
"color": "green"
}, {
"country": "United States",
"year": "2007",
"value": 75,
"color": "yellow"
}, {
"country": "United States",
"year": "2008",
"value": 74,
"color": "pink"
}, {
"country": "United States",
"year": "2009",
"value": 78,
"color": "red"
}],
title: {
text: "Gross domestic product growth /GDP annual %/"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
format: "{0}%"
}
},
series: [{
field: "value",
colorField: "color"
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
field: "year",
color: "#ff0000"
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
};
/*Stacked Bar chart data*/
$scope.chartOptions = {
legend: {
visible: false
},
seriesDefaults: {
type: 'column',
stack: '100%',
labels: {
visible: false,
format: '{0}'
}
},
axisDefaults: {
categoryAxis: {
line: {
width: 3,
color: "#72777d"
},
labels: {
rotation: -45
},
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
},
valueAxis: {
visible: false,
labels: {
visible: false
},
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
},
categories: [
'Total repair cost', 'OTRL'
]
},
series: [
{ field: 'totalRepairCost', name: 'Total Repair Cost', gap: .1 },
{ field: 'otrl', name: 'OTRL' },
{ field: 'fillRateAdj', name: 'Fill Rate' },
{ field: 'depotAdj', name: 'Depot' }
],
tooltip: {
visible: true,
format: '{0:c}',
template: '#= series.name #: #= kendo.format(\'{0:C}\',value) #'
}
};
$scope.onSeriesHover = function(e) {
$log.log(kendo.format("event :: seriesHover ({0} : {1})", e.series.name, e.value));
};
$scope.modelDetermination = [{
totalRepairCost: 300
}, {
otrl: 19,
fillRateAdj: 89,
depotAdj: 112
}];
$scope.onButtonClick = function(event) {
$log.log("Button clicked");
//This doesn't work!
//$scope.theChart.dataSource = new kendo.data.DataSource($scope.modelDetermination);
$timeout(function() {
var dataSource = new kendo.data.DataSource({
data: $scope.modelDetermination
});
$scope.theChart.dataSource = dataSource;
dataSource.read();
$scope.theChart.refresh();
}, 2000);
$scope.theChart.dataSource = new kendo.data.DataSource();
$scope.theChart.refresh();
};
});
/* Styles go here */
Example of stacked column chart.
Along with a typical kendo demo chart, this demo has a kendo chart that displays several pieces of functionality.
Demonstrates:
Kendo-ui
chart
applying data source to chart
applying chart options to chart using angular
column chart
stacking column chart
chart tooltip
angled/rotated category labels
removing all lines from chart
For more information on the kendo charting components, see:
http://demos.telerik.com/kendo-ui/bar-charts/column