As shown in the image, I have the y-axis with the labels in it
valueAxis: {
majorGridLines: {
visible: true
},
labels: {
template: "#= kendo.format('{0}',value/1000)#K"
},
title: {
text: "Steps",
font: "14px Arial,Helvetica,sans-serif"
}
}
I want the labels to remain , but hide the axis line. Is it possible in Kendo?
Figured it out
valueAxis: {
majorGridLines: {
visible: true
},
line: {
visible:false
},
labels: {
template: "#= kendo.format('{0}',value/1000)#K"
},
title: {
text: "Steps",
font: "14px Arial,Helvetica,sans-serif"
}
}
Related
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 #"
}
});
In the example: http://jsbin.com/AreqameT/1/edit Can the labels below the bar chart made clickable in kendo charts?
The text "Sales and Contracting" and other labels should be made clickable. Can this be done?
JS code:
$("#chart").kendoChart({
legend: {
position: "bottom"
},
seriesDefaults: {
labels:{
visible:true,
template: '#=kendo.format("{0:0}", value)#'
}
},
series: [
{
type: "verticalBullet",
currentField: "score",
targetField: "average",
labels: {
visible: true,
template: '#alert(1)#"'
},
target: {
color: "transparent",
border: {
width: 2,
dashType: "dot",
color: "#444"
},
line: {
width: 0
}
},
data: [
{
score: 93.7,
average: 65.2
}, {
score: 80.2,
average: 22.2
}, {
score: 60.8,
average: 35.2
}, {
score: 82.1,
average: 45.2
}, {
score: 74.2,
average: 55.2
}
]
}
],
categoryAxis: {
labels: { rotation: -45 },
categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
line: {
visible: false
},
color: "#444",
axisCrossingValue: [0, 0, 100, 100]
},
tooltip: {
visible: false
}
}).data("kendoChart");
HTML code:
<body>
<div id="chart"></div>
</body>
Thanks in advance.
Using a newer version of Kendo (your jsBin uses a 2013 version... update to 2014.2) you can use categoryAxis.labels.template to add a link to your labels.
categoryAxis: {
labels: {
rotation: -45,
template: '<a xlink:href="http://www.google.com">#: value #</a>'
},
(note the addition of xlink: in the tag)
To better explain, the labels are actually part of an SVG image, not plain HTML. However, SVG supports links: http://www.w3.org/TR/SVG/linking.html#Links
For some reason the older 2013 version of Kendo seem to remove the link from the template though. I tried it with 2014.2.716 and it seemed to work.
Your Jsbin eg not working. Attach a event axisLabelClick or legendItemClick
axisLabelClick: function(e) {
console.log(e.axis.type, e.value);
}
legendItemClick: function(e) {
console.log(e.axis.type, e.value);
}
this might work
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)
Here is the link for kendo UI bar chart: http://jsfiddle.net/nayanakalkur/ZPUr4/119/
In the fiddle example, X-axis is at '0'. How can i move the axis up or down the Y axis?
Suppose i want have the X-axis at 'y' value 10? How can this be done?
Code for the same:
HTML code:
<div id="example" class="k-content">
<div id="chart"></div>
</div>
Javascript code:
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent",
}
},
series: [{
name: "Total Visits",
data: series1,
gap: 1.0,
spacing: 0
}, {
name: "Unique visitors",
data: series2,
gap: 1.0
}],
valueAxis: {
line: {
visible: false
},
title: {
text: "Availability"
}
},
categoryAxis: {
majorGridLines: {
visible: true,
position: "bottom"
}
},
tooltip: {
visible: true,
format: "{0}"
}
});
}
var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];
$(document).ready(function () {
createChart();
$("#example").bind("kendo:skinChange", createChart);
var chart = $("#chart").data("kendoChart"),
firstSeries = chart.options.series;
});
Thanks in advance.
Set valueAxis.min to 10:
valueAxis: {
min: 10,
line: {
visible: false
},
title: {
text: "Availability"
}
},
Your JSFiddle modified in here: http://jsfiddle.net/OnaBai/ZPUr4/120/
EDIT: If you want that the axis crosses at one specific value, then set valueAxis.axisCrossingValue to the value.
Example:
valueAxis: {
axisCrossingValue: -50000,
line: { visible: false },
title: { text: "Availability" },
},
And the JSFiddle modified http://jsfiddle.net/OnaBai/ZPUr4/126/
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.