I test simple chart example with below data. it contains one DATE typed data and two NUMBER typed data. actually I make a chart with DATE category and NUMBER value :
<DATA : data_small.json>
[
{
"START_DATE": "2011-11-02T00:00:00",
"USE_PERCENTAGE": 38,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 32400
},
{
"START_DATE": "2011-11-03T00:00:00",
"USE_PERCENTAGE": 75,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 64800
},
{
"START_DATE": "2011-11-04T00:00:00",
"USE_PERCENTAGE": 71,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 61200
},
{
"START_DATE": "2011-11-05T00:00:00",
"USE_PERCENTAGE": 72,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 0
},
{
"START_DATE": "2011-11-10T00:00:00",
"USE_PERCENTAGE": 60,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 0
},
{
"START_DATE": "2011-11-15T00:00:00",
"USE_PERCENTAGE": 90,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 77400
},
{
"START_DATE": "2011-11-20T00:00:00",
"USE_PERCENTAGE": 61,
"RESOURCE_ID": "RS_ASSEMBLER",
"USE_TIME": 52200
},
{
"START_DATE": "2011-11-02T00:00:00",
"USE_PERCENTAGE": 49,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 0
},
{
"START_DATE": "2011-11-03T00:00:00",
"USE_PERCENTAGE": 24,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 20400
},
{
"START_DATE": "2011-11-04T00:00:00",
"USE_PERCENTAGE": 18,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 15000
},
{
"START_DATE": "2011-11-05T00:00:00",
"USE_PERCENTAGE": 30,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 0
},
{
"START_DATE": "2011-11-10T00:00:00",
"USE_PERCENTAGE": 85,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 0
},
{
"START_DATE": "2011-11-15T00:00:00",
"USE_PERCENTAGE": 14,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 12000
},
{
"START_DATE": "2011-11-20T00:00:00",
"USE_PERCENTAGE": 18,
"RESOURCE_ID": "RS_BOX_PACKER",
"USE_TIME": 15000
}
]
with codes below, I get the result like "reslut1". I didnt set categoryAxis.type. the result is : chart shows every DATE category data but without formatting it.
actually I like it. because this is matchs with my indend. but I want DATE category should be formatted.
<CODE1>
<script>
function makeBody() {
$.ajax({
type: 'GET',
dataType: 'json',
url: './data_small.json',
success: function (data) {
var chartData = data;
var chart = $("#chart").data("kendoChart");
var chartDataSource = chart.dataSource;
chartDataSource.data(chartData);
},
error : function(a, b, c){
console.log("error a:" + a +" b:" + b + " c:"+ c);
}
});
}
function makeChart() {
var stocksDataSource = new kendo.data.DataSource({
group: {
field: "RESOURCE_ID"
},
sort: {
field: "START_DATE",
dir: "asc"
},
schema: {
model: {
fields: {
START_DATE: {
type: "date"
}
}
}
}
});
function createChart() {
$("#chart").kendoChart({
title: { text: "Test chart" },
dataSource: stocksDataSource,
series: [{
type: "line",
field: "USE_PERCENTAGE"
}],
legend: {
position: "bottom"
},
categoryAxis: {
field: "START_DATE",
crosshair: {
visible: true
},
// type: "date",
labels: {
rotation: "auto",
format: "yyyy-MM-dd" // 날짜 형식
}
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
}
makeChart();
makeBody();
</script>
after this, I tried with 'type: "date",' (which is commented in above code) .(result2) I hope I get the same result with the result1 but DATE category is formatted well. but I find there are some more data than my original data. I think kendo makes some additional data with 'type=date'. am I right?
then how can I get the result like 'result1 with formatted DATE category'?
thanks in advance.
1 Answer, 1 is accepted
When using date axis the data is aggregated for a particular period and this cannot be prevented (documentation link). In order to achieve the expected result you should set categoryAxis.type "category". For your convenience here is a dojo.
Regards,
Iliana Nikolova
Telerik