Skip to content

Instantly share code, notes, and snippets.

@adriatic

adriatic/app.html

Last active July 19, 2016 18:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save adriatic/73625e67f3ee28fc8af42471a39b0b28 to your computer and use it in GitHub Desktop.
Save adriatic/73625e67f3ee28fc8af42471a39b0b28 to your computer and use it in GitHub Desktop.
Download ZIP
Area charts: date axis
Raw
app.html
<template>
<ak-chart view-model.ref="chart"
k-title.bind="{text: 'GDP growth and standard deviation'}"
k-data-source.bind="datasource"
k-series.bind="series"
k-category-axis.bind="categoryAxis">
</ak-chart>
<div class="box-col">
<h4>Base date unit</h4>
<ul class="options">
<li>
<input id="baseUnitAuto" name="baseUnit"
type="radio" value="" autocomplete="off" />
<label for="baseUnitAuto">Automatic (default)</label>
</li>
<li>
<input id="baseUnitYears" name="baseUnit"
type="radio" value="years" autocomplete="off" />
<label for="baseUnitYears">Years</label>
</li>
<li>
<input id="baseUnitMonths" name="baseUnit"
type="radio" value="months" autocomplete="off" />
<label for="baseUnitMonths">Months</label>
</li>
<li>
<input id="baseUnitWeeks" name="baseUnit"
type="radio" value="weeks" checked="checked" autocomplete="off" />
<label for="baseUnitWeeks">Weeks</label>
</li>
<li>
<input id="baseUnitDays" name="baseUnit"
type="radio" value="days" autocomplete="off" />
<label for="baseUnitDays">Days</label>
</li>
</ul>
</div>
</template>
Raw
app.js
export class DateAxis {
datasource = {
data: [
{ value: 30, date: new Date('2011/12/20') },
{ value: 50, date: new Date('2011/12/21') },
{ value: 45, date: new Date('2011/12/22') },
{ value: 40, date: new Date('2011/12/23') },
{ value: 35, date: new Date('2011/12/24') },
{ value: 40, date: new Date('2011/12/25') },
{ value: 42, date: new Date('2011/12/26') },
{ value: 40, date: new Date('2011/12/27') },
{ value: 35, date: new Date('2011/12/28') },
{ value: 43, date: new Date('2011/12/29') },
{ value: 38, date: new Date('2011/12/30') },
{ value: 30, date: new Date('2011/12/31') },
{ value: 48, date: new Date('2012/01/01') },
{ value: 50, date: new Date('2012/01/02') },
{ value: 55, date: new Date('2012/01/03') },
{ value: 35, date: new Date('2012/01/04') },
{ value: 30, date: new Date('2012/01/05') }
]
};
series = [{
type: 'line',
aggregate: 'avg',
field: 'value',
categoryField: 'date'
}];
categoryAxis = {
baseUnit: 'weeks'
};
refresh() {
let widget = this.chart.widget;
let baseUnitInputs = $('input:radio[name=baseUnit]');
let aggregateInputs = $('input:radio[name=aggregate]');
for (let i = 0, length = widget.options.series.length; i < length; i++) {
widget.options.series[i].aggregate = aggregateInputs.filter(':checked').val();
}
widget.options.categoryAxis.baseUnit = baseUnitInputs.filter(':checked').val();
this.chart.refresh();
}
attached() {
$('.box-col').bind('change', () => this.refresh());
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</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 src="./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());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment