Interval (step) for seconds in kendo ui chart - charts

Question

I am working on Kendo chart. I am trying to load date on the X axis and decimal value on Y.
I have generated 500 points using controller. Here is my controller.
List<jsonmodel> arrret = new List<jsonmodel>();
DateTime start = new DateTime(2015, 09, 14, 01, 20, 00);
Random rnd = new Random();
for (int i = 0; i < 500; i++)
{
decimal randomnumber = rnd.Next(10, 40);
DateTime secondsincreament = new DateTime();
secondsincreament = start;
arrret.Add(new jsonmodel()
{
close = randomnumber,
date = secondsincreament.ToString(),
});
start = start.AddSeconds(3);
}
return Json(arrret, JsonRequestBehavior.AllowGet);
I have started from 14/09/2015 01:20:00 and incremented 3 seconds with each loop for X axis and a random number for Y axis.
Using ajax in Jquery, I have created and array and pushed points to that array.
dataSource.push({ "x": new Date(data.date), "y": data.close });
And then, the Kendo chart goes as following.
$("#chart").kendoChart({
title: {
text: "time stamp chart"
},
dataSource: {
data: dataSource
},
series: [{
type: "scatterLine",
aggregate: "avg",
xField: "x",
yField: "y",
}],
xAxis: {
min: new Date("2015/09/14 01:18:00"),
max: new Date("2015/09/14 01:46:00"),
labels: {
template: "#= kendo.toString(value,'MM/dd/yyyy HH:mm:ss')#",
baseUnit: "seconds",
},
crosshair: {
visible: true,
tooltip: {
template: "#= kendo.toString(value,'MM/dd/yyyy HH:mm:ss')#",
visible: true,
},
},
},
yAxis: {
crosshair: {
visible: true,
tooltip: {
visible: true,
},
},
},
autoBaseUnitSteps: {
seconds: [3]
}
});
Problem is, Data is loading properly on the chart but not all dates (with seconds generated from the controller) are displayed on X axis.
I cant figure how to set interval (steps) for seconds on scatterLine chart.
Can anyone please help me out?
Thanks