Is there any way to display a label other than the value in the Value Axis in Kendo Chart?
What I want is the right image's labels instead of the left one's (the original).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
// these are the labels I want to replace for the number values.
const yAxisLabels = ["A", "B", "C", "D", "E"];
$("#chart").kendoChart({
series: [
{
type: "line",
data: [2, 3, 4]
}
],
valueAxis: {
min: 1,
max: 5,
majorUnit: 1
}
});
</script>
</body>
</html>
There is - templates are what you are looking for. However, from your question there is no way to help with exactly how to accomplish what you want since there is no code/or explanation of where your alternate values come from. That said, the following is one way to customize those labels.
Dojo example: https://dojo.telerik.com/OsuWirih
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [ [1, 2] ]
}
],
yAxis: {
labels: {
template: "X: #: value #"
}
}
});
</script>
More info here: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/yaxis.labels#yaxislabelstemplate
EDIT:
From your comment, I'm still not sure what is driving the A,B,C to replace values. Here is one way to accomplish it if the underlying values line up with the A, B, C... labels you want:
<script>
let dict = {0:'A',0.5:'B',1:'C',1.5:'D',2:'E',2.5:'F'};
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [ [1, 2] ]
}
],
yAxis: {
labels: {
template: "#: dict[value] #"
}
}
});
</script>
and in a dojo: https://dojo.telerik.com/EpElOFAy/2
Related
dynamically Change The Kendo chart legend unselect on apply custom color
$("#chart").kendoChart({
series: [
{ data: [6, 2, 3], name: "Task 1" },
{ data: [1, 5, 2], name: "Task 2" }
],
legendItemClick: function(e){
e.sender.options.legend.inactiveItems.markers.color = "red";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
$("#chart").kendoChart({
series: [
{ data: [6, 2, 3], name: "Task 1" },
{ data: [1, 5, 2], name: "Task 2" }
],
legendItemClick: function(e){
e.sender.options.legend.inactiveItems.markers.color = "red";
}
});
e.sender.options.legend.inactiveItems.markers.color = "<Use Your Custom Color>";
This Line Of Code Place At LegendItemClick Templet Or Function.I think.... This is Use full To Succeed Your need.
I'm new to kendo and I would like to know whether is there a way to program my kendo grid like the image below.
I had saw some sample online where they use kendo-grid grouping but it doesn't generate the layout I needed
Output
Yes, it is possible by using a column template with a script expression that will transform the array of child items into an HTML list:
http://dojo.telerik.com/AqezO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Grid</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var sampleData = [
{ id: 1, name: "name", items: ["foo", "bar"] }
];
$(function () {
var dataSource = new kendo.data.DataSource({
data: sampleData,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
name: { },
items: { }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "id" },
{ field: "name" },
{ field: "items", template: "#= showItems(items) #" }
]
});
});
function showItems(arr) {
return "<ul><li>" + arr.join("</li><li>") + "</li></ul>";
}
</script>
</body>
</html>
I am using Kendo TreeList to display hierarchical data. Application allows user to add new rows to the displayed data, or edit existing ones. I am not using inline editing.
Right now I add new rows by this piece of code:
treeList.dataSource.data().push(vm);
And if user edited some row, it is updated in dataSource:
for (i = 0; i < dsData.length; i++) {
if (dsData[i].get("TaskUid") === vm.get("TaskUid")) {
dsData[i] = vm;
var curId = vm.get("VisualId");
vm.set("VisualId", curId);
grid.dataSource.read();
onDataBound();
}
}
There is a side effect - upon calling dataSource.read() newly added items disappear from the TreeList control.
Question is - how am I supposed to add data and refresh data in treeList without such a side effect?
Probably you should consider to use
dataSource.pushCreate to add new element to the dataSource and
dataSource.pushUpdate to edit existing element inside the
dataSource
I copy some example of basic dropdownlist, and add 3 button
first button will add a new parent node
second button will edit the first parent node which is jane smith
third button add new child node on jane smith
Do it like this :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<!-- Define the HTML div that will hold the TreeList -->
<div id="treelist"></div>
<button id="new">Add new</button>
<button id="editParent">Edit Jane Smith</button>
<button id="addChild">Add child node to Jane Smith</button>
<!-- Initialize the TreeList -->
<script>
$(document).ready(function() {
$("#treelist").kendoTreeList({
columns: [{
field: "Name"
}, {
field: "Position"
}],
dataSource: {
data: [{
id: 1,
parentId: null,
Name: "Jane Smith",
Position: "CEO"
}, {
id: 2,
parentId: 1,
Name: "Alex Sells",
Position: "EVP Sales"
}, {
id: 3,
parentId: 1,
Name: "Bob Price",
Position: "EVP Marketing"
}]
}
});
});
$("#new").on("click", function() {
var newElement = {
id: 4,
parentId: null,
Name: "John Doe",
Position: "HRD"
};
$("#treelist").data("kendoTreeList").dataSource.pushCreate(newElement);
});
$("#editParent").on("click", function() {
var updatedElement = {
id: 1,
parentId: null,
Name: "Scooby Doo",
Position: "CEO Pet"
};
$("#treelist").data("kendoTreeList").dataSource.pushUpdate(updatedElement);
});
$("#addChild").on("click", function() {
var newElement = {
id: 5,
parentId: 1,
Name: "Ricky Martin",
Position: "EVP Legal"
};
$("#treelist").data("kendoTreeList").dataSource.pushCreate(newElement);
});
</script>
</body>
</html>
I am using kendo line chart in my application, the x axis values/labels are overlapping. The xAxis.labels.step property doesn't work in my case as the categoryaxis is bind to an datasource that can contain a date difference in days/moths/years. How can i avoid ovelapping?
I have used rotation to fix this issue, but is there any other approach?
Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var seriesData = [
{
year: new Date(Date.parse("12/12/2011")),
value: 1
},
{
year: new Date(Date.parse("13/12/2012")),
value: 3
},
{
year: new Date(Date.parse("23/12/2012")),
value: 4
}
];
$("#chart").kendoChart({
categoryAxis: {
min: new Date("12/1/2011"),
max: new Date("23/12/2012"),
baseUnit: "days",
type: "date",
field: "year",
labels: {
dateFormats: {
days: "MM/dd/yy"
},
}
},
chartArea: {
width: 300,
height: 200
},
series: [
{
field: "value",
type: "line"
}
],
dataSource: {
data: seriesData
}
});
</script>
</body>
</html>
Kendo chart's x-axis labels can be adjusted dynamically using dataBound-event with the following dataBound function.
function dataBound(e) {
var chart = $("#chart").data("kendoChart");
if (seriesData.view().length > 2) {
chart.options.categoryAxis.labels.step = 5;
}
else {
chart.options.categoryAxis.labels.step = 1;
}
}
See full demo -> JSFIDDLE
I have a linechart using jqplot with two lines. One line represents max values and other one represents min values. With my code legend does not display correctly and y axis label overlaps with y axis ticks What am I doing wrong? Thanks for your help!
[EDIT] Jqplot version is jquery.jqplot.1.0.0b2_r1012
My code displays this chart:
I want a legend like the one in this
image
Here's my code:
<link rel="stylesheet" type="text/css" hrf="../plugins/jqplot/jquery.jqplot.min.css" />
<script type="text/javascript" src="../plugins/jqplot/jquery.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.canvasOverlay.min.js"></script>
<script>
$(document).ready(function(){
var maxPoints86 = [3.000000,4.000000,4.500000,5.000000,7.000000,7.000000,5.500000,8.500000,6.700000,5.200000,4.000000,5.500000,0.200000,7.500000,5.000000,5.200000,5.000000];
var minPoints86 = [2.000000,1.000000,3.000000,4.000000,5.000000,4.800000,5.000000,6.000000,4.000000,2.500000,2.500000,5.000000,0.100000,6.000000,3.500000,5.000000,5.000000];
var plot86 = $.jqplot('chart', [maxPoints86, minPoints86],
{
title:'Errores en facturación',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes: {
xaxis: {
label: "Monthly",
},
yaxis: {
label: "Percentage"
}
},
legend: {
show: true,
location: 'se',
labels:['Max','Min'],
showSwatch: true,
predraw: false,
placement:"insideGrid",
},
series:[
{
lineWidth:5,
markerOptions: { style:"circle", size:10 }
},
{
lineWidth:5,
markerOptions: { style:"filledSquare", size:10 }
}
]
}
);
});
</script>
<div id="chart" style="width:500px;height:300px;"></div>
Solved by Mark in his comment. My stylesheet link was wrong, href should be href. Thanks a lot Mark!