Kendo Chart Testing

by mlhDevelopment

HTML

<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css">
<div id="container"></div>

CSS

body { padding: 30px; }

JavaScript

// Setup the data
var kendoChartOptions = JSON.parse('{"series":[{"field":"Amount","categoryField":"PaymentDate"}],"transitions":false,"legend":{"visible":false},"seriesDefaults":{"type":"column","gap":0.5},"axisDefaults":{"minorGridLines":{"visible":false},"majorGridLines":{"visible":false}},"valueAxis":{"labels":{"format":"{0:C0}"},"axisCrossingValue":0,"majorUnit":47000,"max":255885.388},"categoryAxis":{"baseUnit":"years","labels":{"step":1,"padding":{"top":0}}},"tooltip":{"visible":true,"format":"{0:C}"},"chartArea":{"height":150,"width":894},"seriesColors":["rgb(28, 97, 142)"],"dataSource":{"data":[{"Amount":232623.08,"PaymentDate":"2020-01-31T05:00:00.000Z"},{"Amount":21574.51,"PaymentDate":"2012-01-31T05:00:00.000Z"},{"Amount":22872.62,"PaymentDate":"2013-01-31T05:00:00.000Z"},{"Amount":24244.99,"PaymentDate":"2014-01-31T05:00:00.000Z"},{"Amount":25699.68,"PaymentDate":"2015-01-31T05:00:00.000Z"}]}}')
for(var i = 0; i < kendoChartOptions.dataSource.data.length; i++) {
    kendoChartOptions.dataSource.data[i].PaymentDate = new Date(kendoChartOptions.dataSource.data[i].PaymentDate);
}

// Create the chart for the first time
$("#container").kendoChart(kendoChartOptions);

// Wait for a little before updating the chart
setTimeout(function() {
    // Update the charting settings
    var localchart = $("#container").data("kendoChart");
    localchart.options.valueAxis.min = 0;
    localchart.options.valueAxis.max = 28269.648;
    localchart.options.valueAxis.majorUnit = 5100;
    
    // Update the charting data
    var data = JSON.parse('[{"Amount":21574.51,"PaymentDate":"2012-01-31T05:00:00.000Z"},{"Amount":22872.62,"PaymentDate":"2013-01-31T05:00:00.000Z"},{"Amount":24244.99,"PaymentDate":"2014-01-31T05:00:00.000Z"},{"Amount":25699.68,"PaymentDate":"2015-01-31T05:00:00.000Z"}]')
    for(var i = 0; i < data.length; i++) {
        data[i].PaymentDate = new Date(data[i].PaymentDate);
    }
    var localdatasource = new kendo.data.DataSource({ data: data });
   ...