AmplifyJS, tbd and kendoUI
HTML
<script src="https://github.com/appendto/amplify/raw/master/core/amplify.core.js"></script>
<script src="https://github.com/appendto/amplify/raw/master/request/amplify.request.js"></script>
<script src="https://raw.github.com/aaronpowell/tbd/master/lib/tbd.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<button>Click me!</button>
<div id="chart"></div>
JavaScript
//setup our request
amplify.request.define('get-data', 'ajax', {
url: '/get-data',
dataType: 'json',
type: 'GET'
});
//let's pretend this is in a different file ok :P
amplify.request.define('get-data', function (settings) {
var data = tbd.from({})
.prop('category').use(tbd.utils.random('a', 'b', 'c', 'd', 'e')).done()
.prop('value').use(tbd.utils.range(10, 100)).done()
.make(tbd.utils.range(3, 8)());
settings.success({
status: 'success',
items: data
});
});
$('button').click(function () {
amplify.request('get-data', function (response) {
$("#chart").kendoChart({
theme: "default",
legend: {
position: "bottom"
},
seriesDefaults: {
labels: {
visible: true,
format: "{0}"
}
},
series: [{
type: 'pie',
data: response.items
}],
tooltip: {
visible: true,
format: "{0}"
}
});
});
}).click();