What I want to achieve is changing the colour of a group on a series based on its category. I have an example below.
So if "Group 1" had a sub group value of "B" the colour is set based on that combination. And that colour might be different to "Group 2" + "B".
Does anyone have any idea on how to create a chart with Axis like this with the Kendu UI for JQuery?
Specifically I'm trying to recreate the Y Axis.
Hi. I have a single JSON Array like this:
[{
"country": "Spain",
"year": "2008",
"unit": "GWh",
"solar": 2578,
"hydro": 26112,
"wind": 32203,
"nuclear": 58973
}];
And, What I want to do is make this single array into a chart. (I hope the name of the series is the same as the axis text.)
Like this.
but, If I write code like this... All series are included in one category. How can I solve this?
var tempData = [{
"country": "Spain",
"year": "2008",
"unit": "GWh",
"solar": 2578,
"hydro": 26112,
"wind": 32203,
"nuclear": 58973
}];
$("#chart").kendoChart({
dataSource: {
data : tempData
},
series:
[{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
categoryAxis: {
categories: ["Nuclear", "Hydro", "Wind"]
}
});
Hi,
Are there any new properties that have been added in version 2022.3.913 where we can defined the width/height of the labels within the axis.
If the labels are set for 20% and the text is longer than the space defined then it will add ellipses for that section.
Similar to the image below.
Thanks!
Hello , i have an issue with converting the milliseconds to human readable date,
I cannot find the solution for vue, but I have found multiple solutions for jquery.
What am i doing wrong ?
I noticed in the jquery example, the have this : labels: {
template: "#= kendo.toString(new Date(value), 'HH:mm') #"
}
i have tried adding this code :
it does not work, any suggestions would be greatly appreciated. Thank you
I have a line chart and an area chart.
I would like the area chart to be shown inside of the line chart.
How can I control the area chart's height or top margin? To keep it inside the line chart?
Here is what my chart looks like. I would like to keep the green area inside of the red. Is this possible?
https://dojo.telerik.com/@jerry/owIdiWes
So I have data in this format
{
name: health
data:[[1,2],[2,2],[3,4]]
type:"area"
visible:true
},
{
name: health2
data:[[1,2],[2,2],[3,4]]
type:"line"
visible:true
}
I have attached a screenshot of what i want to achieve need guidance to do this I'm new to kendo .
i have controller using java as @RequestMapping("/charts") and it return in Json format but my question this data is not reflected in my Grid why.
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: function(options)
{ return "${pageContext.request.contextPath}/charts";
},
dataType: "json",
type: "GET"
}
},
schema:{
model: {
fields: {
id: { type: "number" },
fullName : { type: "string" },
address: { type: "string" },
email : { type: "string" },
password: { type: "string" },
designation: { type: "string" },
salary: { type: "number" }
}
}
},
aggregate: [ { field: "fullName", aggregate: "count" },
{ field: "salary", aggregate: "sum" }
]
,pageSize: 8 },
sortable: true,
scrollable: false,
pageSize: 5,
pageSizes: true,
hieght:20,
pageable: {
pageSizes: [4, 6,10,"all"],
buttonCount: 5
},
columns: [
{ field: "id", title: "ID", width: 180 },
{ field: "fullName", title: "Name",width:300,
template: "<div style=color:red>#=fullName#</div>" ,footerTemplate: "Total Count: #=count#" },
{ field: "address", title: "Address",width:300 },
{ field: "email", title: "Email",width:200},
{ field: "password", title: "Password" ,width:200},
{ field: "designation", title: "Designation" ,width:300},
{ field: "salary", title: "Salary" ,width:200,footerTemplate: "Total Sum: #=sum#"},
{ width:200,
template: "<a class='k-button' href='/Home/Index'>Redirect</a>" }
]
});
Hi
I've implemented a bar chart to show the amount a customer has bought in USD but on the Y axis the 0 is showing with three decimals.
Understandable since I've added "n3" to the format property but how to remove the trailling zeros from it?
$("#chart_year").kendoChart({ title: { text: '"Year To Date Purchases' }, seriesDefaults: { type: "column", }, series: [ { //Dummy Data before getting real data data: [122.142, 222.672], color: "rgb(0,125,195)", name: "Total", }, ], legend: { labels: { font: "Jost", } }, valueAxis: { labels: { culture: "en-US", format: "${0:n3}", font: "Jost" }, axisCrossingValue: 0 }, categoryAxis: { categories: previousYearsArray.reverse(), labels: { padding: {top: 5}, font: "Jost" }, majorGridLines: { visible: true } }, tooltip: { visible: true, format: "{0}", template: "#= series.name #: $#= value #" } });
Hi,
I'm dynamically creating doughnuts and when clicking the legend it sets all the other doughnuts to the value of the last dynamically created value. Please see Dojo: https://dojo.telerik.com/AQucizad
i.e Click on Complete on "Demo-1 - chart-1" legend and in the Console it will output the values for chart two instead (if i didn't have the preventDefaults, it would also update Demo-1 as Demo-2 value)
How do i get it to reference the correct data? :(