How to create a function to get the month as Jan,feb.. displayed in kendo chart x axis.
var internetUsers = [ {
"Month": "1",
"year": "2010",
"value": 1
}, {
"Month": "2",
"year": "2010",
"value": 2
}, {
"Month": "3",
"year": "2010",
"value": 3
}, {
"Month": "4",
"year": "2010",
"value": 4
}, {
"Month": "5",
"year": "2010",
"value": 5
},
{
"Month": "6",
"year": "2010",
"value": 6
}, {
"Month": "7",
"year": "2010",
"value": 7
}, {
"Month": "8",
"year": "2010",
"value": 8
}];
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
dataSource: {
data: internetUsers,
group: {
field: "year"
},
sort: {
field: "year",
dir: "asc"
}
},
title: {
text: "Sales"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [{
field: "value"
}],
valueAxis: {
labels: {
format: "{0}$"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
field: "Month"
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(function() {
setTimeout(function() {
// Initialize the chart with a delay to make sure
// the initial animation is visible
createChart();
$("#example").bind("kendo:skinChange", function(e) {
createChart();
});
}, 400);
});
</script>
You could use kendoui's time format function:
kendo.toString(new Date(2000, value, 1), "MMMM"); // if value = 9, it would output September
Check out kendoui's date format page. It is VERY helpful. http://docs.telerik.com/kendo-ui/getting-started/framework/globalization/dateformatting
First add an array to hold the month names, like so:
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"];
then modify the categoryAxis to use this array
categoryAxis: {
field: "Month",
labels: {
template: "#=monthNames[value - 1]#"
},
},
来源：https://stackoverflow.com/questions/17586680/how-to-get-the-month-names-in-kendo-chart-by-using-function