Skip to content

Instantly share code, notes, and snippets.

View adriatic's full-sized avatar
💭
I may be slow to respond.

Nikolaj Ivancic adriatic

💭
I may be slow to respond.
25 followers · 6 following
  • Congral, LLC
  • Ann Arbor, MI
  • 07:31 (UTC -04:00)
View GitHub Profile
@adriatic
adriatic / app.html
Last active July 19, 2016 18:49
Bar chart: Binding to grouped data
<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>
@adriatic
adriatic / app.html
Last active July 19, 2016 18:49
Bar chart: Binding to local data
<template>
<ak-chart k-title.bind="{text: 'Comments per day', align: 'left'}"
k-data-source.bind="{data: json.blogComments}"
k-legend.bind="{ visible: false }"
k-series-defaults.bind="seriesDefaults"
k-series.bind="series"
k-value-axis.bind="valueAxis"
k-category-axis.bind="categoryAxis"
k-tooltip.bind="tooltip">
</ak-chart>
@adriatic
adriatic / app.html
Last active July 19, 2016 18:49
Bar chart: Binding to remote data
<template>
<ak-chart k-title.bind="{text: 'Spain electricity production (GWh)'}"
k-data-source.bind="datasource"
k-legend.bind="{position: 'top'}"
k-series.bind="series"
k-series-defaults.bind="{type: 'column'}"
k-value-axis.bind="valueAxis"
k-category-axis.bind="categoryAxis"
k-tooltip.bind="tooltip">
</ak-chart>
@adriatic
adriatic / app.html
Last active July 19, 2016 18:49
Bar chart: Column chart
<template>
<ak-chart k-title.bind="{text: 'Gross domestic product growth /GDP annual %/'}"
k-legend.bind="{position: 'top'}"
k-series-defaults.bind="seriesDefaults"
k-series.bind="series"
k-value-axis.bind="valueAxis"
k-category-axis.bind="categoryAxis"
k-tooltip.bind="tooltip">
</ak-chart>
</template>
@adriatic
adriatic / app.html
Last active July 19, 2016 18:49
Bar chart: Custom pan and zoom
<template>
<ak-chart k-render-as="canvas"
k-data-source.bind="dataSource"
k-category-axis.bind="{field: 'category'}"
k-value-axis.bind="{min: 0, max: 12}"
k-series.bind="[{type: 'column', field: 'val'}]"
k-transitions.bind="false"
k-on-drag.delegate="onDrag($event)"
k-on-drag-end.delegate="onDragEnd($event)"
k-on-zoom.delegate="onZoom($event)">
@adriatic
adriatic / app.html
Last active July 19, 2016 18:49
Bar chart: Custom visuals
<template>
<ak-chart k-title.bind="{text: 'Site Visitors Stats /thousands/'}"
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"
k-panes.bind="panes">
</ak-chart>
@adriatic
adriatic / app.html
Last active July 19, 2016 18:49
Bar chart: Date axis
<template>
<ak-chart k-widget.bind="chart"
k-data-source.bind="datasource"
k-series.bind="series"
k-category-axis.bind="categoryAxis"
k-tooltip.bind="tooltip">
</ak-chart>
<div class="box-col">
<h4>Base date unit</h4>
@adriatic
adriatic / app.html
Last active July 19, 2016 18:49
Bar chart: Error bars
<template>
<ak-chart k-title.bind="{text: 'Gross domestic product growth and standard error'}"
k-legend.bind="{position: 'top'}"
k-series-defaults.bind="seriesDefaults"
k-series.bind="series"
k-value-axis.bind="valueAxis"
k-category-axis.bind="categoryAxis"
k-tooltip.bind="tooltip">
</ak-chart>
</template>
@adriatic
adriatic / index.html
Last active July 19, 2016 18:49
Bar chart: Gap and spacing
<!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">
@adriatic
adriatic / app.html
Last active July 19, 2016 18:49
Bar chart: Logarithmic axis
<template>
<ak-chart k-title.bind="{text: 'Fibonacci sequence'}"
k-series.bind="series"
k-value-axis.bind="valueAxis">
</ak-chart>
</template>