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/69301cf79e16e6d5ffbf45f690df3e2b to your computer and use it in GitHub Desktop.
Save adriatic/69301cf79e16e6d5ffbf45f690df3e2b to your computer and use it in GitHub Desktop.
Download ZIP
Area charts: logarithmic axis
Raw
app.html
<template>
<ak-chart k-title.bind="{text: 'Spain electricity production (GWh)'}"
k-data-source.bind="datasource"
k-legend.bind="{position: 'top'}"
k-series-defaults.bind="{type: 'area'}"
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 LogarithmicAxis {
datasource = new kendo.data.DataSource({
transport: {
read: function(options) {
return System.import('spain-electricity.json!json')
.then(data => options.success(data));
}
},
sort: {
field: 'year',
dir: 'asc'
}
});
series = [{
field: 'nuclear',
name: 'Nuclear'
}, {
field: 'hydro',
name: 'Hydro'
}, {
field: 'wind',
name: 'Wind'
}];
categoryAxis = {
field: 'year',
labels: {
rotation: -90
},
crosshair: {
visible: true
}
};
valueAxis = {
type: 'log',
labels: {
format: 'N0'
}
};
tooltip = {
visible: true,
shared: true,
format: 'N0'
}
}
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.4/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());
}
Raw
spain-electricity.json
[
{
"country": "Spain",
"year": "2008",
"unit": "GWh",
"solar": 2578,
"hydro": 26112,
"wind": 32203,
"nuclear": 58973
},
{
"country": "Spain",
"year": "2007",
"unit": "GWh",
"solar": 508,
"hydro": 30522,
"wind": 27568,
"nuclear": 55103
},
{
"country": "Spain",
"year": "2006",
"unit": "GWh",
"solar": 119,
"hydro": 29831,
"wind": 23297,
"nuclear": 60126
},
{
"country": "Spain",
"year": "2005",
"unit": "GWh",
"solar": 41,
"hydro": 23025,
"wind": 21176,
"nuclear": 57539
},
{
"country": "Spain",
"year": "2004",
"unit": "GWh",
"solar": 56,
"hydro": 34439,
"wind": 15700,
"nuclear": 63606
},
{
"country": "Spain",
"year": "2003",
"unit": "GWh",
"solar": 41,
"hydro": 43897,
"wind": 12075,
"nuclear": 61875
},
{
"country": "Spain",
"year": "2002",
"unit": "GWh",
"solar": 30,
"hydro": 26270,
"wind": 9342,
"nuclear": 63016
},
{
"country": "Spain",
"year": "2001",
"unit": "GWh",
"solar": 24,
"hydro": 43864,
"wind": 6759,
"nuclear": 63708
},
{
"country": "Spain",
"year": "2000",
"unit": "GWh",
"solar": 18,
"hydro": 31807,
"wind": 4727,
"nuclear": 62206
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment