Show all week days in chart in Kendo Chart? - kendo-ui

Question

I am trying to achieve a behaviour as below:
But my chart is shown as below. It has only one record in the json array
Even if there is no data for some days on a week, i need to show the weekdays as in the first image.
Fiddle here
$("#kk").kendoChart({
dataSource: {
data:_data
},
seriesColors: ["Orange"],
seriesDefaults: {
type: "column",
gap: .5,
overlay: {
gradient: "none"
}
},
series: [{
name: "weight",
field: "weight",
categoryField: "createddate",
aggregate: "avg",
}],
categoryAxis: {
type: "date",
baseUnit: "weeks",
labels: {
rotation: -45,
dateFormats: {
weeks: "ddd"
}
},
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
}
});

Answer 1

So all you need to do is append end points to your array of data. You can do this in your controller that returns data or later with JavaScript (which will cause you to redraw the chart unless you catch the data before you place it in the chart.)
You will need to make an array of Json objects like the rest of your data. It may look somthing like this. startDate and endDate being your chosen range.
function endPoints(){
return [{createddate:startDate,weight:0},{createddate:endDate,weight:0}];
}
You can append these data points with something like this.
function addDataToChart(data) {
var ds = $('#kk').data('kendoChart').dataSource;
ds.data($.merge(data, endPoints()));
//You can use ds.data() if you want to use the data that is already in the chart
}
In my own Dashboard project I would get the data with my own Ajax calls and append endPoints before it was placed in the chart. The full ajax function could look like this.
$.ajax({
url:'URLtoReturnData'
dataType:'json',
success:function(data){addDataToChart(data);},
error:function(e){errorHandler(e);}
});
I hope this helps.

Answer 2

This a workaround to get dates with no values to be displayed. The workaround is to have weight as 0.000000000000000001 for dates that has got no weight values against it. Also i have updated the category baseunit to days and added some sample data for you so that you can have a look at it how it appears. What you can do is put 0.000000000000000001 for dates that have 0 value against it when you are returning the JSON Markup. Code as below:
#*Sample Data:*#
var _data=[{"weight":149.91,"createddate":"8/1/2014"},
{"weight":0.000000000000000001,"createddate":"8/2/2014"},
{"weight":200,"createddate":"8/3/2014"},
{"weight":0.000000000000000001,"createddate":"8/4/2014"}]
$("#kk").kendoChart({
dataSource: {
data:_data
},
seriesColors: ["Red"],
seriesDefaults: {
type: "column",
},
series: [{
name: "weight",
field: "weight",
categoryField: "createddate",
}],
categoryAxis: {
type: "date",
baseUnit: "days",
labels: {
rotation: -45,
dateFormats: {
days: "ddd"
}
},
}
});
Please have a look at this JSFiddle for the same to see output