I am trying to create a KendoChart, then I wanted to have the bars to be on a stripes format. How to do that? I think I need to add "style" in "seriesDefaults" section or in the "series" section.
I have the code snippets below:
$("#chart").kendoChart({
title: {
text: "Sample"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848]
},{
name: "World",
data: [1.988, 2.733, 3.994]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
categories: [2002, 2003, 2004],
majorGridLines: {
visible: false
},
labels: {
rotation: "auto"
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
Related
I have a multiselect dropDownList and a chart,i want my chart to by dynamic to plot more based on my multiselect dropdownlist,but i have no idea, I would appreciate if you give me a hint by a demo or an example.because in the following code,i have a chart which works only based normal dropdownlist not the multiplechioce,
Here is Multiselect:
$('#multiselect').kendoMultiSelect({
dataTextField: "Text",
dataValueField: "Text",
valuePrimitive: true,
dataSource: result.list_of_parks,
})
here is the chart:
function createChart(data, data_wind) {
$("#topMonth").kendoChart({
series: [{
data: data,
type: "column",
axis: "l100km",
field: "productionvalue",
categoryField: "name",
color: "#228B22"
},
{
axis: "ava",
data: data_wind,
type: "line",
field: "windvalue",
categoryField: "name",
color: "#007eff",
},
],
valueAxes: [
{
name: "l100km",
title: { text: "Production (MW/H)" },
// min: 0,
// max: 2000000,
// majorUnit: 200000,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
},
{
name: "ava",
title: { text: "Averge Wind Speed(KM/H)" },
min: 0,
// max: 20,
majorUnit: 1,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
}
],
categoryAxis: {
majorGridLines: {
visible: false
}
,
labels: {
padding: {
left: -20,
buttom: 0
},
rotation: 340
},
axisCrossingValues: [0, 20],
},
tooltip: {
visible: true,
// majorUnit:10,
template: " #= value #"
},
});
$(window).on("resize", function () {
kendo.resize($(".chart-wrapper"));
});
}
}
});
});
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
}
});
I'm creating a grouped bar chart like this:
$("#chart").kendoChart({
dataSource: {
data: rawdata,
group: { field: "Serie" },
},
legend: {
position: "top"
},
plotArea: {
background: "white",
},
seriesDefaults: {
type: "column",
style: "smooth",
stack: true
},
series: [
{
field: 'Valor1',
labels: {
visible: true,
background: '',
format: 'p1',
color: 'white',
position: 'center'
},
}
],
valueAxis: {
max: 1,
labels: {
format: "p2"
},
line: {
visible: false
},
axisCrossingValue: -10,
},
categoryAxis: {
field: "Segmento",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name # <br /> " +
"Valor = #= kendo.format('{0:p2}', value) # <br/> " +
"Tooltip = #= dataItem.Tooltip # ",
}
});
My data has four properties: Serie, Segmento, Valor1, Tooltip. Example of one data point:
{
"Serie": "S1",
"Segmento": "C1",
"Valor1": 0.31500380634422465,
"Tooltip": 20,
}
The values of the stack bar are incorrect in chrome but in firefox and ie it's fine.
Correct graph in firefox and ie:
Incorrect graph in chrome:
Here is a live demo: http://trykendoui.telerik.com/anET/9
How can i solve this?
This is a problem with Chrome's implementation of Array.sort; see this discussion.
You can fix it by sorting the data source explicitly:
dataSource: {
data: rawdata,
group: { field: "Serie" },
sort: [{ field: "Serie", dir: "asc"}, { field: "Segmento", dir: "asc"} ]
},
(updated demo)
Is there a possibility to add notes on the categoryAxis in a Kendo Chart.
As seen in the documentation it should be possible, but even after setting every single option i dont see any notes. I couldn't find any example of somebody doing that. Has anybody managed or used this feature?
my try on jsFiddle
categoryAxis: {
field: "age",
justified: true,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
min: 10,
max: 30,
labels: {
step: 5
},
notes: {
data: [{
value: { age: 15 },
position: "top",
icon: {
visible: true,
size: 16,
type: "circle",
background: "#585858",
border: {
color: "#FFFFFF"
}
},
line: {
length: 16
},
label: {
visible: false,
text: " "
}
}]
}
}
Thank you
The value property for notes on the categoryAxis appears to represent each category value.
Here's an example notes configuration:
notes: {
label: {
template: "Value: #: value #"
},
icon: {
visible: true,
size: 16,
type: "circle",
background: "#585858",
border: {
color: "#FFFFFF"
}
},
line: {
length: 16
},
data: [{ value: 1}, { value: 5 },{ value: 10 }, { value: 15 }, { value: 20 }]
}
Check out this updated fiddle.
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 .