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? :(
I am creating a dynamic line chart (see previous https://www.telerik.com/account/support-center/view-ticket/1623605) I am facing another issue with the line chart - in which entries are appending for some apparent reason at the end. Instead of the horizontal (x) axis being a consecutively ordered, the chart itself restarts the axis for the second series of data.
Here is an image of the current issue I am facing.
As you can see above, instead of filling these entries in back at the beginning, the entire horizontal axis restarts from 0.
The only points that work "correctly" are points that exactly match each other in the beginning.
At 4:54:00 both points share that exact "second" in time so the "green" point appears appropriately.
If the point does not "match" exactly, it is added and appended to the very end of the horizontal axis as I showed above.
What is causing this? Why does the horizontal axis restart?
My code is as follows:
<div id="example">
<div class="demo-section wide">
<div id="chart"></div>
</div>
<script>
var testNum = "Test Data for #" + '@Model.testNum';
var datareader = JSON.parse(Model.dynamicDataRetrievedFromCSV);
function createChart() {
$("#chart").kendoChart({
renderAs: "canvas",
title: {
text: testNum
},
legend: {
visible: true
},
seriesDefaults: {
type: "line",
/*stack: true,*/
labels: {
visible: false,
format: "{0}",
background: "transparent"
}
},
valueAxis: {
labels: {
format: "{0}"
},
line: {
visible: false
},
min: 0,
max: 300
},
categoryAxis: {
majorGridLines: {
visible: false
},
min: 0,
max: 10
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
},
pannable: {
},
zoomable: {
mousewheel: {
rate: 0.1
},
selection: {
}
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
$(document).ready(function () {
let chart = $("#chart").data("kendoChart");
var dataParsed = datareader;
let ds = new kendo.data.DataSource({
data: dataParsed,
group: "label"
});
chart.setOptions({
dataSource: ds,
series: [{
field: "value",
categoryField: "time",
visible: false
}]
});
});
</script>
</div>
Thank you for any help, and thanks for the support you guys have provided over the last couple weeks!