I have a set of series where some of the data will be null. With the line type chart it will just connect the previous and next point giving the illusion that the data is connected. I'd like to display a gap in the line for null values. Is there a work around for this?
Here's some sample relevant code:
$("#chart").kendoChart({
seriesDefaults: {
type: "line"
},
series: [{
name: "Gaps",
data: [null, 3.907, null, 7.848, null, 9.263, null, 3.890, 8.238, 9.552]
}, {
name: "No Gaps",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}],
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
}
});
Also a working Dojo:
http://dojo.telerik.com/ecOKU/2
Just add missingValues: "gap" to the series or seriesDefaults (API DOC):
seriesDefaults: {
type: "line",
missingValues: "gap"
},
Updated DOJO
Related
I have a simple data structure that I am pushing into a Kendo UI Barchart and stacking associated rows via a common grouped field in Kendo UI jQuery.
The Barchart is displayed as intended, but the ONLY customization I am unable to achieve is to show the "stacked" category labels which show what the elements have been grouped into, "Democrat" and "Republican" in the below sample.
Sample code:
function createChart() {
$("#stackie").kendoChart({
seriesDefaults: {
type: "bar",
stack: {
type: true
},
labels: {
visible: true,
background: "transparent",
position: "center",
template: "${series.name} ${value}"
}
},
series: [
{"stack": "Democrat", name: "New York", data: [854]},
{"stack": "Democrat",name: "Boston", data: [190]},
{"stack": "Republican",name: "Texas", data: [190]},
{"stack": "Democrat",name: "Philadelphia", data: [390]},
{"stack": "Democrat",name: "Atlanta", data: [390]},
{"stack": "Republican",name: "Florida", data: [390]},
{"stack": "Republican",name: "Alabama", data: [390]},
{"stack": "Republican",name: "Detroit", data: [390]}
],
valueAxis: {
labels: {
template: "#= kendo.format('{0:N0}', value) #"
},
line: {
visible: false
}
},
categoryAxis: {
field: "stack",
visible: true
},
legend: {
position: "none"
}
});
}
Whatever options I set for the "categoryaxis" seem to be ignored and I end up with a stacked barchart with no category grouping labels as below:
There doesnt seem to be an easy/intuitive way to get at the underlying "stacked" data. I would also want to show the aggregated totals for each "stack" too.
Any ideas? Thanks
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
}
}
});
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.
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
My chart has a calories vs time data. The calories has values every 15 min. I want to make the bars closer. I am posting a sample of the data and also a link to the jsFiddle. Also, is it possible to have the entire 24 hours displayed on the chart and show only the ones which are having values...
var data= [{"IntraDayFifteenMinuteActivityKey":443124,"id":"abcd","datetimedata":"7/20/2014 4:15:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443125,"id":"abcd","datetimedata":"7/20/2014 4:30:00 AM","caloriesOut":"20","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443126,"id":"abcd","datetimedata":"7/20/2014 4:45:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443127,"id":"abcd","datetimedata":"7/20/2014 5:00:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443128,"id":"abcd","datetimedata":"7/20/2014 5:15:00 AM","caloriesOut":"17","distance":"0.00442800018936396","elevation":"0","floors":"0","steps":"6","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"},
{"IntraDayFifteenMinuteActivityKey":443129,"id":"abcd","datetimedata":"7/20/2014 5:30:00 AM","caloriesOut":"17","distance":"0","elevation":"0","floors":"0","steps":"0","createddate":"7/20/2014 12:00:00 AM","distanceunit":"Km"}]
$("#IntraDayDataChart").kendoChart({
dataSource: data,
seriesColors: [color],
chartArea: {
background: ""
},
title: {
text: "Intraday Data",
font: "14px Arial,Helvetica,sans-serif bold"
},
legend: {
visible: false,
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "column",
overlay: {
gradient: "none"
},
gap: .1
},
series: [{
name: type,
field: type
}],
categoryAxis: {
field: "datetimedata",
majorGridLines: {
visible: false
},
majorTicks: {
visible:false
},
type: "date",
baseUnit: "minutes",
labels: {
dateFormats: {
minutes: "h tt"
},
step:180
}
},
valueAxis: {
majorGridLines: {
visible: true
},
majorTicks: {
visible:false
},
labels: {
visible: false
},
title: {
text: type,
font: "14px Arial,Helvetica,sans-serif"
},
visible: false
},
tooltip: {
visible: true,
template: '#=kendo.toString(new Date(dataItem.datetimedata),"g")# <br /> #=kendo.toString(Number(dataItem.' + type + '),"n2")# ' + type
}
});
}
}
Link to Fiddle
To make your chart lines thicker you need to decrease the gap in the series.
$("#chart").kendoChart({
series: [ {
gap: 0
}]
});
Here is the API reference
http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-series.gap
They have a tutorial of how to do this on the fly as well.
http://demos.telerik.com/kendo-ui/bar-charts/gap-spacing
For only displaying the time with data you would have to define the CategoryAxis as type 'category' instead of type 'date'. When you define it as a date kendo will fill in all the missing data points with blank so that it looks right. For this to work you may have to convert you dates to something that will order right as a category.
You instead could have kendo auto aggregate your data such that it will chunk together time. You can set this by setting the baseUnit in the CaregoryAxis to 'fit'
$("#chart").kendoChart({
categoryAxis: {
baseUnit: "fit"
}
});
I'm creating a stacked bar chart and almost everytime, the bars on my chart are overflowing.
I'm not sure what could be causing this, I found that people had issues with sorting data source in chrome but this is not specific to chrome. Sometime depending on the default sort I set, it would show up correctly, but if I changed the sorting, it would go back to messed up. On top of this, sometime the values are interchanged but if I checked the datasource.data(), it would still be okay.
I tried calling redraw, refresh on the chart, read on the datasource, I'm a bit lost here
Thanks for any help!
http://jsfiddle.net/2mMMC/
$(document).ready(function () {
var data = {
data: [{"name":"R-24","series":"Moving","Idle":0,"Moving":1396,"Stopped":0,"count":"0.39"},
{"name":"R-25","series":"Moving","Idle":0,"Moving":6795,"Stopped":0,"count":"1.89"},
{"name":"P-24","series":"Moving","Idle":0,"Moving":2622,"Stopped":0,"count":"0.73"},
{"name":"RF-24","series":"Stopped","Idle":0,"Moving":0,"Stopped":796,"count":"0.22"},
{"name":"RF-25","series":"Stopped","Idle":0,"Moving":0,"Stopped":27024,"count":"7.51"},
{"name":"P-24","series":"Stopped","Idle":0,"Moving":0,"Stopped":26430,"count":"7.34"}
],
group: [{
field: 'series'
}],
sort: [{
field: "series",
dir: "asc"
}]
};
$("#chart").kendoChart({
dataSource: data,
series: [{
field: 'count',
stack: true,
type: 'bar'
}],
categoryAxis: [{
field: 'name'
}],
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
});
I have on kendo stock chart in my application.And here my navigator format is just like this jun '11.But i want to display to display the format like this "jun '11 to July '11".How to change that format of that navigator?Is it possible?Any body please help me....
$("#stock-chart").kendoStockChart({
dataSource: {
data: chartData
},
series: [{
name: "Line Data",
type: "column",
field: "lineData"
},
{
name: "Column Data",
type: "column",
field: "columnData"
}],
categoryAxis: {
baseUnit: "auto"
},
dateField: "Period",
navigator: {
series: {
type: "area",
field: "lineData"
}
}
});
My jsbin is http://jsbin.com/ocevot/5/edit
Once try this one
categoryAxis: {
labels:
{
dateFormats:
{
days: "MMM'dd"
}
}
}
Example fiddle http://jsbin.com/ocevot/14/edit