Skip to content

Instantly share code, notes, and snippets.

@dtaalbers

dtaalbers/app.html

Forked from gist-master/app.html
Last active November 23, 2016 11:06
Show Gist options
  • Save dtaalbers/69625befa725816d8f74cbdb59ba1000 to your computer and use it in GitHub Desktop.
Save dtaalbers/69625befa725816d8f74cbdb59ba1000 to your computer and use it in GitHub Desktop.
Download ZIP
Line charts: binding to grouped data
Raw
app.html
<template>
<require from="aurelia-kendoui-bridge/chart/chart"></require>
<ak-chart k-widget.bind="widget" k-data-source.bind="datasource" k-legend.bind="{position: 'bottom'}" k-series-defaults.bind="seriesDefaults"
k-series.bind="series" k-value-axis.bind="valueAxis" k-category-axis.bind="categoryAxis" k-tooltip.bind="tooltip"
view-model.ref="chart">
</ak-chart>
</template>
Raw
app.js
import stockdata from './stock-data-2011.json!json';
export class BindingToGroupedArea {
datasource = new kendo.data.DataSource({
transport: {
read: function(options) {
options.success(stockdata);
}
},
group: {
field: 'costcenter'
},
sort: {
field: 'date',
dir: 'asc'
},
schema: {
model: {
fields: {
date: {
type: 'date'
}
}
}
}
});
seriesDefaults = {
type: 'line',
color: 'color'
};
series = [
{
field: 'costs',
color: 'color'
}
];
valueAxis = {
labels: {
format: '€ {0}'
},
line: {
visible: true
}
};
categoryAxis: {
field: 'date',
labels: {
format: 'DDD'
},
majorGridLines: {
visible: false
},
line: {
visible: false
}
}
tooltip = {
visible: true,
format: '€ {0}',
template: '${series.name} - € ${value}'
};
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia KendoUI bridge</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-kendoui-bridge');
aurelia.start().then(a => a.setRoot());
}
Raw
stock-data-2011.json
[
{
"costcenter": "1 Verkoop nieuw",
"costs": 948,
"date": "2016-11-21T23:00:00.000Z",
"distance": 79,
"color": "#1C4E7F",
"rides": 1
},
{
"costcenter": "1 Verkoop gebruikt",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#379CFF",
"rides": 0
},
{
"costcenter": "1 Verkoop werkplaats",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#0E2740",
"rides": 0
},
{
"costcenter": "1 Verkoop marketing",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#266AAD",
"rides": 0
},
{
"costcenter": "1 Verkoop magazijn",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#1E548A",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop nieuw",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#530F7F",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop gebruikt",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#A71FFF",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop werkplaats",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#2A0840",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop marketing",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#5A118A",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop magazijn",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#5A118A",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop nieuw",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#006936",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop gebruikt",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#007F42",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop werkplaats",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#00FF83",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop marketing",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#004021",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop magazijn",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#008A47",
"rides": 0
},
{
"costcenter": "[SCHADE]",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#CF0C00",
"rides": 0
},
{
"costcenter": "2",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#000000",
"rides": 0
},
{
"costcenter": "[EXTERN]",
"costs": 0,
"date": "2016-11-21T23:00:00.000Z",
"distance": 0,
"color": "#FF790A",
"rides": 0
},
{
"costcenter": "1 Verkoop nieuw",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#1C4E7F",
"rides": 0
},
{
"costcenter": "1 Verkoop gebruikt",
"costs": 324,
"date": "2016-11-20T23:00:00.000Z",
"distance": 27,
"color": "#379CFF",
"rides": 1
},
{
"costcenter": "1 Verkoop werkplaats",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#0E2740",
"rides": 0
},
{
"costcenter": "1 Verkoop marketing",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#266AAD",
"rides": 0
},
{
"costcenter": "1 Verkoop magazijn",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#1E548A",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop nieuw",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#530F7F",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop gebruikt",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#A71FFF",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop werkplaats",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#2A0840",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop marketing",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#5A118A",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop magazijn",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#5A118A",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop nieuw",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#006936",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop gebruikt",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#007F42",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop werkplaats",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#00FF83",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop marketing",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#004021",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop magazijn",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#008A47",
"rides": 0
},
{
"costcenter": "[SCHADE]",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#CF0C00",
"rides": 0
},
{
"costcenter": "2",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#000000",
"rides": 0
},
{
"costcenter": "[EXTERN]",
"costs": 0,
"date": "2016-11-20T23:00:00.000Z",
"distance": 0,
"color": "#FF790A",
"rides": 0
},
{
"costcenter": "1 Verkoop nieuw",
"costs": 672,
"date": "2016-11-23T23:00:00.000Z",
"distance": 56,
"color": "#1C4E7F",
"rides": 1
},
{
"costcenter": "1 Verkoop gebruikt",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#379CFF",
"rides": 0
},
{
"costcenter": "1 Verkoop werkplaats",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#0E2740",
"rides": 0
},
{
"costcenter": "1 Verkoop marketing",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#266AAD",
"rides": 0
},
{
"costcenter": "1 Verkoop magazijn",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#1E548A",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop nieuw",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#530F7F",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop gebruikt",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#A71FFF",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop werkplaats",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#2A0840",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop marketing",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#5A118A",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop magazijn",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#5A118A",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop nieuw",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#006936",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop gebruikt",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#007F42",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop werkplaats",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#00FF83",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop marketing",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#004021",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop magazijn",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#008A47",
"rides": 0
},
{
"costcenter": "[SCHADE]",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#CF0C00",
"rides": 0
},
{
"costcenter": "2",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#000000",
"rides": 0
},
{
"costcenter": "[EXTERN]",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#FF790A",
"rides": 0
},
{
"costcenter": "1 Verkoop nieuw",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#1C4E7F",
"rides": 0
},
{
"costcenter": "1 Verkoop gebruikt",
"costs": 1272,
"date": "2016-11-24T23:00:00.000Z",
"distance": 106,
"color": "#379CFF",
"rides": 1
},
{
"costcenter": "1 Verkoop werkplaats",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#0E2740",
"rides": 0
},
{
"costcenter": "1 Verkoop marketing",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#266AAD",
"rides": 0
},
{
"costcenter": "1 Verkoop magazijn",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#1E548A",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop nieuw",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#530F7F",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop gebruikt",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#A71FFF",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop werkplaats",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#2A0840",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop marketing",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#5A118A",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop magazijn",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#5A118A",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop nieuw",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#006936",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop gebruikt",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#007F42",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop werkplaats",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#00FF83",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop marketing",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#004021",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop magazijn",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#008A47",
"rides": 0
},
{
"costcenter": "[SCHADE]",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#CF0C00",
"rides": 0
},
{
"costcenter": "2",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#000000",
"rides": 0
},
{
"costcenter": "[EXTERN]",
"costs": 0,
"date": "2016-11-24T23:00:00.000Z",
"distance": 0,
"color": "#FF790A",
"rides": 0
},
{
"costcenter": "1 Verkoop nieuw",
"costs": 2616,
"date": "2016-11-23T23:00:00.000Z",
"distance": 218,
"color": "#1C4E7F",
"rides": 1
},
{
"costcenter": "1 Verkoop gebruikt",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#379CFF",
"rides": 0
},
{
"costcenter": "1 Verkoop werkplaats",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#0E2740",
"rides": 0
},
{
"costcenter": "1 Verkoop marketing",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#266AAD",
"rides": 0
},
{
"costcenter": "1 Verkoop magazijn",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#1E548A",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop nieuw",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#530F7F",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop gebruikt",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#A71FFF",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop werkplaats",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#2A0840",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop marketing",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#5A118A",
"rides": 0
},
{
"costcenter": "[ROOS] Verkoop magazijn",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#5A118A",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop nieuw",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#006936",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop gebruikt",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#007F42",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop werkplaats",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#00FF83",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop marketing",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#004021",
"rides": 0
},
{
"costcenter": "[VENT] Verkoop magazijn",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#008A47",
"rides": 0
},
{
"costcenter": "[SCHADE]",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#CF0C00",
"rides": 0
},
{
"costcenter": "2",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#000000",
"rides": 0
},
{
"costcenter": "[EXTERN]",
"costs": 0,
"date": "2016-11-23T23:00:00.000Z",
"distance": 0,
"color": "#FF790A",
"rides": 0
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment