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
Related
Here is a DOJO for the issue http://dojo.telerik.com/aweDi/2
I have a chart that I want to display two different lines for each grouped item. The legend shows the same grouped item twice, once for each series, I need that grouped item named different for each series. any clues how to do that?
$("#rightLine").kendoChart({
dataSource: {
data: ko.toJS(my.rightLine()),
group: { field: "Grp_Value" },
sort: {
field: "MonthTrxDateFirst",
dir: "asc"
},
schema: {
model: {
fields: {
date: {
type: "date"
}
}
}
}
},
legend: {
position: "top"
},
series: [{
type: "line",
field: col
}
, {
type: "line",
field: col2
}
],
categoryAxis: {
field: "MonthTrxDateFirst",
labels: {
rotation: -90,
dateFormats:
{
minutes: "HH:mm",
hours: "HH:mm",
days: "dd/MM",
months: "MMM 'yy",
years: "yyyy"
}
}, type: "Date", baseUnit: "months",
crosshair: {
visible: true
}
},
valueAxis: {
labels: {
format: ty
}
},
tooltip: {
visible: true,
format: ty,
background: "white",
// template: "#= series.name #: #= value #"
template: tmplate
}
});
Is it possible to use a custom tooltip text from datasource?
i have a datasource schema like this:
schema: {
data: "d",
model: {
fields: {
text: { type: "string" },
value: { type: "number" },
desc: { type: "string " }
}
}
}
and I want to use text for base bar values, and desc for tooltip so I have this configuration:
series: [{
field: "value",
categoryField: "desc"
}],
categoryAxis: [{
field: "text"
}]
and in the tooltip configuration:
tooltip: {
visible: true,
template: "#= category # : #= value # minutes"
}
this configuration does not seem to work. Is there any way I can use desc field only for tooltip?
Just use dataItem object in kendo template:
tooltip: {
visible: true,
template: "#= dataItem.desc # minutes"
}
Here is dojo example: http://dojo.telerik.com/IYOZO.
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 currently trying to build a chart showing number of downloads of a product per date.
A sample of the current code is as follows:
var downloads = [
{ value: 48, date: new Date("2013/11/01") },
{ value: 50, date: new Date("2013/11/02") },
{ value: 55, date: new Date("2013/11/03") },
{ value: 35, date: new Date("2013/11/04") }
];
$("#chart").kendoChart({
dataSource: {
data: downloads
},
series: [{
type: "line",
aggregate: "avg",
field: "value",
categoryField: "date"
}],
categoryAxis: {
baseUnit: "days",
min: new Date("2013/10/31"),
max: new Date("2013/11/10"),
labels: {
dateFormats: {
days: "dd/MM"
}
}
}
});
It works fine if I have to display data for one product only. How would I proceed to display download data for another product, i.e. adding another series to the chart?
Right! I figured it out myself. Here it is:
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
},
type:"line",
aggregate:"avg",
field:"value",
categoryField:"date"
},
series: [{
name: "Product 1",
data: [{ value: 48, date: new Date("2013/11/01") }, { value: 50, date: new Date("2013/11/02") }]
},
{
name: "Product 2",
data: [{ value: 55, date: new Date("2013/11/03") }, { value: 35, date: new Date("2013/11/04") }]
}],
categoryAxis: {
baseUnit: "days",
min: new Date("2013/10/31"),
max: new Date("2013/11/10"),
labels: {
dateFormats: {
days: "dd/MM"
}
}
}
});
I use kendo dataviz chart and want to add notes. This is the code I've written
$("#resultChart").kendoChart({
dataSource: resultsDataSource,
title: {
text: "Results"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line"
},
series: [{
field: "Points",
name: "Points",
noteTextField: "EventName",
notes: {
label: {
position: "outside"
},
position: "bottom"
}
}],
valueAxis: {
labels: {
format: "{0}"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
field: "EventDate",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
Everything is working as needed, i.e. chart is drawn with appropriate data, but notes aren't shown.
Please help me find out why notes aren't shown, if there's data in "EventName" property(I've checked). I want to mention that I am using kendo ui 2013.1.514 version.
Thank you in advance.
In your series definition, you have noteTextField: "EventName", which means you must have the property EventName defined for each item in your DataSource, as #ccsakuweb alluded to.
This means that in your DataSource, the data items should look something like this:
var data = [
{ Id: 1, Name: "Result #1", EventName: "Note 1" },
{ Id: 2, Name: "Result #2", EventName: "Note 2" }
];
Kendo's documentation about the Notes feature is located at http://docs.telerik.com/kendo-ui/dataviz/chart/notes .