or
I've created an area chart, illustrating the status of many media players throughout a single day. The data has a granularity of one minute.
I want there to be a major gridline at every hour, and a minor gridline at every half hour. I cannot see where you can set the "step" of the grid line.
Here's how I'm currently setting it up:
$("#chart").kendoChart({
theme: "blueOpal",
title: {
visible:false
},
chartArea: {
height: 800
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "area",
stack: true
},
series: [],
valueAxis: {
labels: {
format: "{0}",
visible: true
}
},
categoryAxis: {
categories: [],
labels: {
visible: true,
step:60
},
minorGridLines: {
visible: false
},
majorGridLines: {
visible: true,
},
majorTicks: {
visible: false,
size: 2
}
},
tooltip: {
visible: true,
format: "{0}"
},
seriesColors: [
'#336699',
'#EBAD60',
'#FF0000',
'#9582BB',
'#028482'
]
});
And it looks like the attached image. In this image there are so many lines that they stop serving a purpose.
var MatjazChooser = kendo.ui.Widget.extend({ init: function(element, options) { var that = this; kendo.ui.Widget.fn.init.call(that, element, options); that.wrapper = that.element; element = that.element; element.addClass('k-chooser'); var template = that.options.template; if (template == "") { template = '<span class="k-button" data-group="# if (data.group != undefined) { ##=data.group##} else {#default#}#" data-uid="#= data.uid #">'; template += '# if (data.imageUrl != undefined) { #'; template += '<img src="#= data.imageUrl #"><br>'; template += '#}#'; template += '#= text #'; template += '</span>'; } that.template = kendo.template(template); that._dataSource(); },