For this example:
http://dojo.telerik.com/arIhI/2
$("#chart").kendoChart({
dataSource: {
data: [
{ score: 1.1, legend: 'a' },
{ score: 2.5, legend: 'b' },
{ score: 3.25, legend: 'c' }
]
},
series: [{
field: "score",
labels: {
visible: true,
template: "Score is: #: value #% legend is: ????"
},
}]
});
2 questions:
1) is it possibly to add html to the template ( say Value is: ....)?
2) is it possible to add multiple values to the label. I'd like to add score and the legend.
-Thanks.
1) Sure
template: "<b>Score is:</b> #: value #% legend is: ????"
is valid template.
2) Do it like this:
template: "Score is: #= dataItem.score #% legend is: #= dataItem.legend #"
or by using a function which I think is more convenient:
template: function(e) { return "Score is: " + e.dataItem.score + "% legend is: " + e.dataItem.legend }
UPDATE:
It currently is not possible to add html to series.labels.templates.
Related
I have created a stacked bar chart using Kendo UI. I want to show tooltip for each tile in stacked bar chart and use another array for this purpose which contains the values to be shown as tooltip.
For ex: When I hover over, USA for year 2000, tooltip should show, NYC: 60% & SFO: 40% (as shown in image).
Here is a fiddle.
This is what I am trying to achieve (in this case showing tooltip for year 2000 for USA):
Problem is when I use series click or series hover events, I am not able to identify tile (inside the stacked bar chart) which is making it harder to show tooltip.
This is the code:
html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
var CityData = [{country: "USA", children:[{"NYC": ["60%", "70%", "80%"]}, {"SFO": ["40%", "30%", "20%"]}]},
{country: "Mexico", children:[{"Mexico City": ["80%", "80%", "80%"]}, {"Cancun": ["20%", "20%", "20%"]}]},
{country: "Canada", children:[{"Toronto": ["50%", "60%", "60%"]}, {"Vancouver": ["50%",
"40%", "40%"]}]}
];
function createChart() {
$("#chart").kendoChart({
title: {
text: "City data"
},
legend: {
visible: false
},
seriesDefaults: {
type: "column",
stack: {
type: "100%"
}
},
series: [{
name: "USA",
stack: {
group: "Country"
},
data: [854622, 925844, 984930]
}, {
name: "Canada",
stack: {
group: "Country"
},
data: [490550, 555695, 627763]
}, {
name: "Mexico",
stack: {
group: "Country"
},
data: [379788, 411217, 447201]
}
],
seriesColors: ["yellow", "green", "red"],
valueAxis: {
line: {
visible: false
}
},
categoryAxis: {
categories: [2000, 2005, 2010],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.stack.group #, city #= series.name #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
You need to set tooltip: { shared: true } and it will work, I included other customizable properties of tooltip below also.
Working demo: https://dojo.telerik.com/OfeMiHUb/4
Snippet:
tooltip: {
shared: true,
visible: true,
background: "#000",
template: "#= series.stack.group #, city #= series.name #"
}
or you can try this if you want another template of your tooltip: https://dojo.telerik.com/OfeMiHUb/3
UPDATE:
What changed?:
tooltip: {
template: `USA- #= cityData[0]
.children
.map(itm => Object.keys(itm)[0]) #`
}
OP clarified further what he wanted, as per new information, please see new working example: https://dojo.telerik.com/OfeMiHUb/9
You can retrieve your city-data through indexing the keys of the children-object like this: cityData[0].children.map(itm => Object.keys(itm)[0])
Possible additions:
If you want the series.name to be dynamically added to the tooltip, instead of explicitly typing it in. You can use: series.name.
Like this:
tooltip: {
template: `#= series.name # - #=
cityData[0]
.children
.map(itm => Object.keys(itm)[0]) #`}
Change the ArrayIndex of cityData[index] to select a nations cities.
i.e.
0: USA
1: Canada
2: Mexico
UPDATE 2:
After reading through what you wrote (3000x) + looking at the image, I am interpreting that u also want the percentage showing (even tho it seems like in the clarifying comment below that u dont?).
Anyhow:
series: [{
name: "USA",
stack: {
group: "Country"
},
tooltip: {template: `#= series.name # - #=
cityData[0]
.children
.map(itm => '[' + Object.keys(itm)[0] + ']' + ' : ' + Object.values(itm)[0][0]) #`},
data: [854622, 925844, 984930]
}, {
name: "Canada",
stack: {
group: "Country"
},
tooltip: {template: `#= series.name # - #=
cityData[1]
.children
.map(itm => '[' + Object.keys(itm)[0] + ']' + ' : ' + Object.values(itm)[0][0]) #`},
data: [490550, 555695, 627763]
}, {
name: "Mexico",
stack: {
group: "Country"
},
tooltip: {template: `#= series.name # - #=
cityData[2]
.children
.map(itm => '[' + Object.keys(itm)[0] + ']' + ' : ' + Object.values(itm)[0][0]) #`},
data:[379788, 411217, 447201]
}
],
Almost got the percentage / series working.
Right now I'm struggling with extracting the series-index in this selector: Object.values(itm)[0][SERIES_INDEX_SHOULD_BE_HERE]
TO BE CONTINUED...
I have the following kendo definition:
$("#availabilityChart").kendoChart({
seriesDefaults: {
type: "column"
},
legend: {
position: "bottom",
},
seriesColors: ["#1C64AF"],
series: [{
name: availabilityDataSelector,
data: seriesData,
field: "metricValue",
categoryField: "month",
}],
categoryAxis: [{
type: "date",
baseUnit: "months",
labels: {
dateFormats: {
days: "MMM"
}
}
}],
valueAxis: [{
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: 0
}],
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
Firstly, the chart is not the full width of the containing div - which I would like to have.
Secondly, when I click on an item in the legend (I only have one) the chart resizes and becomes a 100% width - how can I have this from the start?
Lastly, I want to disable the click on the legend. I just want it to show but remove the ability to click on items.
Thank you.
To prevent legend click behavior use the legendItemClick event:
legendItemClick : function ( e ){
e.preventDefault();
},
Unless you have some CSS overriding the width, the chart should automatically fill the container width.
DEMO
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.
Is it possible to use the Kendo-Dataviz pie chart as a button control. I want every piece to be a different control.
I could not find anything like that in the documentation.
You might define a seriesClick event. Something like:
$("#chart").kendoChart({
series: [
{
type: "pie",
categoryField: "type",
data: [
{ value: 1, type: "Category 1" },
{ value: 2, type: "Category 2" }
]
}
],
seriesClick : function (e) {
alert("You clicked on: " + JSON.stringify(e.dataItem));
}
});
See it running here : http://jsfiddle.net/rS3T4/
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 .