JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<div id="chart"></div>
<p>Axis:</p>
<input type="radio" name="axisType" value="date" checked="checked"/> Date
<input type="radio" name="axisType" value="id" /> Id
JavaScript
$("input[type='radio'][name='axisType']").click(function() {
var axisType = $(this).val();
var chart = $("#chart").data("kendoChart");
if(axisType == "date") {
chart.dataSource.sort({field : "Date", dir: "asc"});
chart.options.categoryAxis.type = "date";
chart.options.categoryAxis.baseUnit = "day";
chart.options.categoryAxis.min = new Date("2014/01/05");
chart.options.categoryAxis.max = new Date("2014/01/20");
/*
chart.setOptions({
categoryAxis: {
type: "date",
baseUnit: "day",
min: new Date("2014/01/01"),
max: new Date("2014/01/31")
}
});
*/
for (var i = 0; i < chart.options.series.length; i++) {
chart.options.series[i].categoryField = "Date";
}
} else { //axisType == "id"
chart.dataSource.sort({field : "Id", dir: "asc"});
chart.options.categoryAxis.type = "category";
chart.options.categoryAxis.min = 1800;
chart.options.categoryAxis.max = 1950;
/*
chart.setOptions({
categoryAxis: {
type: "category",
min: 1800,
max: 1950
}
});
*/
for (var i = 0; i < chart.options.series.length; i++) {
chart.options.series[i].categoryField = "Id";
}
}
chart.refresh();
});
$("#chart").kendoChart({
dataSource: {
data: [
{ Date: new Date("2014/01/05"), Id: 1834, Type: "A", Total: 15 },
{ Date: new Date("2014/01/05"), Id: 1834, Type: "B", Total: 12 },
{ Date: new Date("2014/01/06"), Id: 1821, Type: "B", Total: 11 },
{ Date: new Date("2014/01/08"), Id: 1845, Type: "A", Total: 13 },
{ Date: new Date("2014/01/09"), Id: 1849, Type: "A", Total: 17 },
{ Date: new Date("2014/01/10"), Id: 1850, Type: "A",...