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
Related
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"
}
}
How to change the color of bars in the negative axis? currently the bar has green color. How would i change the color to red? Here is the link for the jsfiddle: http://jsfiddle.net/ZPUr4/160/
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,
} ],
valueAxis: {
min: -200000,
max: 200000,
axisCrossingValue: 50000,
line: {
visible: true
},
title: {
text: "Availability"
},
minorGridLines: {
visible: false,
},
color: 'blue'
},
categoryAxis: {
color: "blue",
width: 25,
majorGridLines: {
visible: false,
position: "bottom"
},
line: {
width: 3,
}
},
tooltip: {
visible: true,
format: "{0}"
}
});
}
var series1=[56000, -63000, 74000, 91000, 117000, 158000];
$(document).ready(function () {
createChart();
$("#example").bind("kendo:skinChange", createChart);
var chart = $("#chart").data("kendoChart"),
firstSeries = chart.options.series;
});
Thanks!
The color option of the series can be set as a function:
series: [{
name: "Total Visits",
data: series1,
gap: 1.0,
spacing: 0,
color: function(data) {
if (data.value < 0) {
return "green";
}
}
}
The Kendo UI version in your jsfiddle however is too old (from 2012) and doesn't support this. You should upgrade to a more recent one.
Here is the updated fiddle: http://jsfiddle.net/ZPUr4/166/
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/
How to draw a vertical line in a line chart using Html5 and kendo UI ? can anyone help me out to solve this problem ?
Try this:
// let chart be the id
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
data: [{
value: new Date(2012, 0, 3),
label: {
text: "-" //text you want to show
}
}]
}
}
});
Demo: http://jsbin.com/obuweca/26
/* WITHOUT CIRCLE */
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
icon: {
border: {
width: 0
}
},
// Initial notes
data: [{
value: new Date(2012, 0, 3)
}]
}
}
});
DEMO: http://jsbin.com/obuweca/29/
In kendo documentation is example how do draw custom lines on chart. Horizontal and vertical.
http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands
You can customize lines by editing stroke:
stroke: {
color: "red",
width: 1,
dashType:"dash"
}
You can also try to use the column-Chart.
Just extend the series:
series: [{
type: "line",
field: "value",
categoryField: "date"
},
{
type:"column",
field: "valueColumn",
gap: 300
}]
and the dataSource.data with a new field like: valueColumn.
See also the Example.
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.