Skip to content

Instantly share code, notes, and snippets.

@adriatic

adriatic/app.html

Last active July 19, 2016 18:49
Show Gist options
  • Save adriatic/4f31267fe54a591848168ff2834146d5 to your computer and use it in GitHub Desktop.
Save adriatic/4f31267fe54a591848168ff2834146d5 to your computer and use it in GitHub Desktop.
Download ZIP
Line charts: binding to grouped data
Raw
app.html
<template>
<ak-chart k-title.bind="{text: 'Stock Prices'}"
k-data-source.bind="datasource"
k-legend.bind="{position: 'bottom'}"
k-series.bind="series"
k-value-axis.bind="valueAxis"
k-category-axis.bind="categoryAxis"
k-tooltip.bind="tooltip">
</ak-chart>
</template>
Raw
app.js
export class BindingToGroupedArea {
datasource = new kendo.data.DataSource({
transport: {
read: function(options) {
return System.import('./stock-data-2011.json!json')
.then(data => options.success(data));
}
},
group: {
field: 'symbol'
},
sort: {
field: 'date',
dir: 'asc'
},
schema: {
model: {
fields: {
date: {
type: 'date'
}
}
}
}
});
series = [{
type: 'line',
field: 'close',
name: '${group.value} (close)'
}];
valueAxis = {
labels: {
format: '${0}',
skip: 2,
step: 2
},
line: {
visible: false
},
max: 700
};
categoryAxis = {
field: 'date',
labels: {
format: 'MMM'
},
line: {
visible: false
},
majorGridLines: {
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.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.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/0.3.5/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', kendo => kendo.pro());
aurelia.start().then(a => a.setRoot());
}
Raw
stock-data-2011.json
[
{
"date": "12/30/2011",
"close": 405,
"volume": 6414369,
"open": 403.51,
"high": 406.28,
"low": 403.49,
"symbol": "2. AAPL"
},
{
"date": "11/30/2011",
"close": 382.2,
"volume": 14464710,
"open": 381.29,
"high": 382.276,
"low": 378.3,
"symbol": "2. AAPL"
},
{
"date": "10/31/2011",
"close": 404.78,
"volume": 13762250,
"open": 402.42,
"high": 409.33,
"low": 401.05,
"symbol": "2. AAPL"
},
{
"date": "9/30/2011",
"close": 381.32,
"volume": 19553550,
"open": 387.12,
"high": 388.89,
"low": 381.18,
"symbol": "2. AAPL"
},
{
"date": "8/31/2011",
"close": 384.83,
"volume": 18643770,
"open": 390.57,
"high": 392.08,
"low": 381.86,
"symbol": "2. AAPL"
},
{
"date": "7/29/2011",
"close": 390.48,
"volume": 22550900,
"open": 387.64,
"high": 395.15,
"low": 384,
"symbol": "2. AAPL"
},
{
"date": "6/30/2011",
"close": 335.67,
"volume": 11526680,
"open": 334.7,
"high": 336.13,
"low": 332.84,
"symbol": "2. AAPL"
},
{
"date": "5/31/2011",
"close": 347.83,
"volume": 14869200,
"open": 341.1,
"high": 347.83,
"low": 341,
"symbol": "2. AAPL"
},
{
"date": "4/29/2011",
"close": 350.13,
"volume": 29776300,
"open": 346.78,
"high": 353.95,
"low": 346.666,
"symbol": "2. AAPL"
},
{
"date": "3/31/2011",
"close": 348.5075,
"volume": 9779020,
"open": 346.36,
"high": 349.8,
"low": 346.06,
"symbol": "2. AAPL"
},
{
"date": "2/28/2011",
"close": 353.21,
"volume": 14356740,
"open": 351.24,
"high": 355.05,
"low": 351.12,
"symbol": "2. AAPL"
},
{
"date": "1/31/2011",
"close": 339.32,
"volume": 13457510,
"open": 335.8,
"high": 340.04,
"low": 334.3,
"symbol": "2. AAPL"
},
{
"date": "12/30/2011",
"close": 173.1,
"volume": 4279069,
"open": 173.36,
"high": 175.17,
"low": 172.49,
"symbol": "3. AMZN"
},
{
"date": "11/30/2011",
"close": 192.29,
"volume": 7700490,
"open": 194.76,
"high": 195.3,
"low": 188.75,
"symbol": "3. AMZN"
},
{
"date": "10/31/2011",
"close": 213.51,
"volume": 7336799,
"open": 215.79,
"high": 218.89,
"low": 213.04,
"symbol": "3. AMZN"
},
{
"date": "9/30/2011",
"close": 216.23,
"volume": 6549641,
"open": 218.19,
"high": 223,
"low": 215.21,
"symbol": "3. AMZN"
},
{
"date": "8/31/2011",
"close": 215.23,
"volume": 7397287,
"open": 212.27,
"high": 216.17,
"low": 211.35,
"symbol": "3. AMZN"
},
{
"date": "7/29/2011",
"close": 222.52,
"volume": 5166268,
"open": 221.29,
"high": 225.75,
"low": 219.51,
"symbol": "3. AMZN"
},
{
"date": "6/30/2011",
"close": 204.49,
"volume": 4446007,
"open": 200.78,
"high": 205.2,
"low": 200.5,
"symbol": "3. AMZN"
},
{
"date": "5/31/2011",
"close": 196.69,
"volume": 3405698,
"open": 195.94,
"high": 198.44,
"low": 195.03,
"symbol": "3. AMZN"
},
{
"date": "4/29/2011",
"close": 195.81,
"volume": 5697726,
"open": 194.38,
"high": 196.59,
"low": 193.78,
"symbol": "3. AMZN"
},
{
"date": "3/31/2011",
"close": 180.13,
"volume": 4824628,
"open": 179.31,
"high": 181.57,
"low": 178.5,
"symbol": "3. AMZN"
},
{
"date": "2/28/2011",
"close": 173.29,
"volume": 6781774,
"open": 173.91,
"high": 175.89,
"low": 172.15,
"symbol": "3. AMZN"
},
{
"date": "1/31/2011",
"close": 169.64,
"volume": 6716002,
"open": 170.16,
"high": 171.44,
"low": 167.41,
"symbol": "3. AMZN"
},
{
"date": "12/30/2011",
"close": 645.9,
"volume": 1780941,
"open": 642.02,
"high": 646.76,
"low": 642.02,
"symbol": "1. GOOG"
},
{
"date": "11/30/2011",
"close": 599.39,
"volume": 3390173,
"open": 597.95,
"high": 599.51,
"low": 592.09,
"symbol": "1. GOOG"
},
{
"date": "10/31/2011",
"close": 592.64,
"volume": 2557538,
"open": 595.09,
"high": 599.69,
"low": 591.67,
"symbol": "1. GOOG"
},
{
"date": "9/30/2011",
"close": 515.04,
"volume": 2723353,
"open": 520.21,
"high": 524,
"low": 514.38,
"symbol": "1. GOOG"
},
{
"date": "8/31/2011",
"close": 540.96,
"volume": 2689989,
"open": 544.74,
"high": 546.3,
"low": 536,
"symbol": "1. GOOG"
},
{
"date": "7/29/2011",
"close": 603.69,
"volume": 4133695,
"open": 604.23,
"high": 614.96,
"low": 603.69,
"symbol": "1. GOOG"
},
{
"date": "6/30/2011",
"close": 506.38,
"volume": 2427330,
"open": 501.99,
"high": 506.67,
"low": 501.5,
"symbol": "1. GOOG"
},
{
"date": "5/31/2011",
"close": 529.02,
"volume": 2685830,
"open": 525,
"high": 529.05,
"low": 523.5,
"symbol": "1. GOOG"
},
{
"date": "4/29/2011",
"close": 544.1,
"volume": 3522997,
"open": 540,
"high": 544.1,
"low": 538.51,
"symbol": "1. GOOG"
},
{
"date": "3/31/2011",
"close": 586.76,
"volume": 2028228,
"open": 583,
"high": 588.1612,
"low": 581.74,
"symbol": "1. GOOG"
},
{
"date": "2/28/2011",
"close": 613.4,
"volume": 2281411,
"open": 610,
"high": 616.49,
"low": 608.01,
"symbol": "1. GOOG"
},
{
"date": "1/31/2011",
"close": 600.36,
"volume": 2804332,
"open": 603.6,
"high": 604.47,
"low": 595.55,
"symbol": "1. GOOG"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment