Created
June 3, 2016 11:57
-
-
Save cdaniel77/6562ce4446f0e8720e627c034df5b1c5 to your computer and use it in GitHub Desktop.
Area charts: multi axis
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="./chart"></require> | |
| <div style="position: absolute; width: 0; height: 0;"> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> | |
| <defs> | |
| <pattern id="pattern1" width="4" height="4" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse"> | |
| <line x1="0" y1="0" x2="0" y2="1" style="stroke:black; stroke-width:2" /> | |
| </pattern> | |
| </defs> | |
| </svg> | |
| </div> | |
| <button ak-button type="button" k-on-click.delegate="doStuff()" disabled.bind="isDisabled">TEST</button> | |
| <button ak-button type="button" k-on-click.delegate="setDisabled()">RUN TEST</button> | |
| <chart></chart> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class MultiAxis { | |
| constructor(){ | |
| this.isDisabled = false; | |
| } | |
| setDisabled(){ | |
| if(this.isDisabled){ | |
| this.isDisabled = false; | |
| } else { | |
| this.isDisabled = true; | |
| } | |
| alert(this.isDisabled); | |
| } | |
| doStuff(){ | |
| alert("Stuff Done"); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <ak-chart k-title.bind="{text: 'Hybrid car mileage report'}" | |
| k-legend.bind="{position: 'top'}" | |
| k-series.bind="series" | |
| k-value-axis.bind="valueAxis" | |
| k-category-axis.bind="categoryAxis"> | |
| </ak-chart> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class Chart { | |
| series = [{ | |
| type: 'column', | |
| data: [20, 40, 45, 30, 50], | |
| stack: true, | |
| name: 'on battery', | |
| color: 'url(#pattern1)' | |
| }, { | |
| type: 'column', | |
| data: [20, 30, 35, 35, 40], | |
| stack: true, | |
| name: 'on gas', | |
| color: '#0399d4' | |
| }, { | |
| type: 'area', | |
| data: [30, 38, 40, 32, 42], | |
| name: 'mpg', | |
| color: '#642381', | |
| axis: 'mpg' | |
| }, { | |
| type: 'area', | |
| data: [7.8, 6.2, 5.9, 7.4, 5.6], | |
| name: 'l/100 km', | |
| color: 'url(#pattern1)', | |
| axis: 'l100km' | |
| }]; | |
| valueAxis = [{ | |
| title: { text: 'miles' }, | |
| min: 0, | |
| max: 100 | |
| }, { | |
| name: 'km', | |
| title: { text: 'km' }, | |
| min: 0, | |
| max: 161, | |
| majorUnit: 32 | |
| }, { | |
| name: 'mpg', | |
| title: { text: 'miles per gallon' }, | |
| color: '#642381' | |
| }, { | |
| name: 'l100km', | |
| title: { text: 'liters per 100km' }, | |
| color: '#e5388a' | |
| }]; | |
| categoryAxis = { | |
| categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], | |
| axisCrossingValues: [0, 0, 10, 10] | |
| }; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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