Hi,
i've encountered some issue while displaying in stockchart. If the last date is exactly the same time as the last element's date, it will not display.
Here's my stockchart config:
$(
"#chart"
).kendoStockChart({
dataSource:chart_data,
dateField:
"date"
,
chartArea: {
width: 1000,
},
seriesDefaults:{
type:
"column"
,
},
series: [{
field: aField,
name: aName
},{
field: bField,
name: bName
}],
tooltip: {
visible:
true
,
shared:
true
,
sharedTemplate:
"#= $.format.date(new Date(category), 'yyyy-MM-dd') # </br>"
+
"# for (var i = 0; i < points.length; i++) { #"
+
"#= points[i].series.name #: #= points[i].value.toLocaleString('en-US') # </br>"
+
"# } #"
+
"GAP: #= points[1].value-points[0].value # </br>"
+
compareName+
": #= (points[0].value/points[1].value*100).toFixed(2) #%"
},
valueAxis: {
labels:{
template:
"#= value #"
},
},
categoryAxis: {
justified:
true
,
baseUnit:
"days"
,
baseUnitStep:
"auto"
,
labels:{
step: 0,
},
autoBaseUnitSteps: {
days: [0]
}
},
legend:{
visible:
true
,
position:
"top"
,
labels: {
font:
"20px sans-serif"
,
color:
"grey"
}
},
navigator: {
series: [{
type:
"line"
,
field: aField
},{
type:
"line"
,
field: bField
}],
categoryAxis: {
labels: {
rotation:
"auto"
},
justified:
true
}
}
});
Any advice would be helpful!
Bob
9 Answers, 1 is accepted
Hello 儒 段,
Thank you for the provided code snippet and screenshot.
This appears to be related to a bug that has been logged in our public GitHub repository, see https://github.com/telerik/kendo-ui-core/issues/5200.
I have raised the priority of the issue, however I cannot give you an exact date for a fix.
Workaround
In the meantime have a look at this dojo sample, which includes a workaround for the problem https://dojo.telerik.com/@gdenchev/AVuxogek.
The basic idea behind the solution is to obtain the last date in our dataSource, create a new date from it and add a single second. Then add this new date to the dataSource. After that select the dates from the first item in our dataSource to the newly added date. This is going to display the last item.
I have added comments to the code, I hope they will be of use to you. Please accept my apologize for any inconvenience this is causing.
Best Regards,
Georgi Denchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi Georgi,
Thanks for answering. Hope this bug can be fixed ASAP. I've tried your solution and encountered some issues.
I kept getting undefined for "navigator"; however, I can confirm that "$("#chart").data("kendoStockChart")" has "navigator" when I console.log( $("#chart").data("kendoStockChart")). Is it familiar with you?
var fix_chart = $("#chart").data("kendoStockChart");
// Get the current data of the chart.
var fix_chartData = $("#chart").data("kendoStockChart").dataSource.data();
// Get the navigator of the chart.
var navigator = $("#chart").data("kendoStockChart").navigator;
console.log(navigator);
// Get the last date in the chart data.
var lastDate = new Date(fix_chartData[fix_chartData.length - 1].Date);
// Add a second to the last date.
lastDate.setSeconds(lastDate.getSeconds() + 1);
// Add the new date to the chart data without modifying anything else.
fix_chart.dataSource.add({Date: lastDate});
// Get the first Date from our data.
let fix_startDate = new Date(fix_chartData[0].Date);
navigator.select(
// Set the start date to the first date in our data.
fix_startDate,
// Set the end date to the newly added date.
lastDate
);
Hello 儒 段,
Could you double check if your provided code snippet is located inside a document.ready() function? The chart might not be fully initialized when we attempt to obtain the navigator.
<script>
$(document).ready(function() {
/* Code goes here */
})
</script>
Let me know if the issue continues to persist.
Best Regards,
Georgi Denchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello Georgi,
Sorry for not replying promptly. All the code block is put inside document.ready.
Hi 儒 段,
Could you please provide me with a dojo sample that reproduces the problem? This way I can examine it locally and return back to you with an appropriate answer.
I am looking forward to your reply.
Best Regards,
Georgi Denchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi Georgi,
I've post some code that reproduce the issue.
https://dojo.telerik.com/UcIkoheC
Best,
Ru
Hi 儒 段,
Thank you for the provided sample.
It seems the navigator isn't yet initialized when we attempt to obtain a reference for it. What you can do is create a Timeout with a few milliseconds and then execute the rest of the code inside of it.
Here is a link to an updated version of the provided dojo.
Let me know if you have any questions.
Best Regards,
Georgi Denchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi George,
Thanks for you excellent job. The updated dojo does display as expected; however, is not working for my current project. I use a button to trigger a function which does the work for initialize stockchart. I added the timeout function in this function after stockchart's initialization. It turned out only displayed the last element. If I rearranged the navigator's selected scale the last element cannot display again. After some debug work, I found that my $("#chart").data("kendoStockChart").dataSource.data() will incorrectly generate one additional data, which was the same as last element. After change lastDate to $("#chart").data("kendoStockChart").dataSource.data().length -2, it works!
Thanks for helping!
Best,
Ru
Hello 儒 段,
I am glad you managed to resolve the issue and thank you for sharing the additional details with us. This information could prove useful to other users in the future.
Best Regards,
Georgi Denchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.