This is a migrated thread and some comments may be shown as answers.

Lines are missing in the Line chart

12 Answers 20 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Revanthkumar
Top achievements
Rank 1
Revanthkumar asked on 23 Mar 2021, 12:02 PM

hi,

we are creating the line chart using the below code when i create the line chart side by side line are missing in one of the chart sometimes. below is the code used to build the line chart attached are the images of the line chart. Please help.

12 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 23 Mar 2021, 12:50 PM

Hi Revanthkumar,

Are you creating the charts on AJAX request or a full PostBack? If the former is true, it is possible that the second request is triggered before the end of the first one thus the chart is not fully rendered. 

If the chart are initially not visible you will need to call their repaint() method after the data-binding. Can you test if the missing lines are shown if you call the repaint() method of their parent chart in the browser Console?

Regards,
Vessy
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/.

0
Revanthkumar
Top achievements
Rank 1
answered on 23 Mar 2021, 01:44 PM

Thanks For you quick reply.

yes it was made on post back.

but when i have 2 charts or 1 chart sometimes the chart still not loading even in not post back that mean when page loaded very fist time.

i tried but its giving me an error not sure weather i called it correctly or not. Please help me fix this 
how i can repaint all my charts.

0
Revanthkumar
Top achievements
Rank 1
answered on 24 Mar 2021, 01:01 PM
any suggestions please 
0
Vessy
Telerik team
answered on 24 Mar 2021, 05:44 PM

Hi Revanthkumar,

The repaint() method is part of the client-side object of RadHtmlChart thus it cannot be accessed through its html element:

https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/client-side-programming/overview

You can access it like follows:

$find("DataList1_ctl01_linechart").repaint();

 

Another option you can try is loading the following script on the page after the charts are shown, it will repaint all of the automatically:

            $telerik.$(".RadHtmlChart").each(function () {
                var chart = this.control.get_kendoWidget();
                if (chart) {
                    chart.resize();
                }
            })

 

Regards,
Vessy
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/.

0
Revanthkumar
Top achievements
Rank 1
answered on 25 Mar 2021, 05:53 AM

Thanks Vessy for your reply the repaint method from the console giving me the results but when i add your script to the my page i was getting $telarik undefined issue. 

after some  research I found we need to add some handlers to config file which i already tried and failed. please help me attaching you the console and config Screen shots for reference. 

 

please help Thanks in Advance!

0
Vessy
Telerik team
answered on 25 Mar 2021, 03:12 PM

Hi Revanthkumar,

Can you remove all runtimeVersionv2.0 preconditions from the web.config and see if the issue persists? The precondition has to contain only "integratedMode".

If the problem persists, please, send me a runnable sample where I can reproduce the error and examine the exact setup leading to it.

Regards,
Vessy
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/.

0
Revanthkumar
Top achievements
Rank 1
answered on 25 Mar 2021, 05:44 PM

this is so funny,

not sure about the reason when i tried to create the sample page for you the charts in side that page was working fine. 

sharing you the sample page and the other page i was facing issue to you. please help me 

this is not a runnable page at least if you could able to help me out by seeing could be so help full for me

ActualPage we are working

Sample Page I created

ConfigFile

0
Vessy
Telerik team
answered on 30 Mar 2021, 09:10 AM

Hi Revanthkumar,

Thanks a lot for the provided files but unfortunately I am not able to access them. Can you, please, ensure that they are given with permissions, sufficient to download the files?

Regards,
Vessy
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/.

0
Revanthkumar
Top achievements
Rank 1
answered on 30 Mar 2021, 10:13 AM

Project

 

Here am attaching it again please let me know if you have any difficulties 

0
Vessy
Telerik team
answered on 01 Apr 2021, 07:45 PM

Hi Revanthkumar,

Thanks a lot for the provided project.

Any client-side logic applied to our controls has to be added inside a function/event handler and cannot be placed directly inside the script tag.

A possible approach would be to define a function holding the charts-repainting logic

        function repaintCharts() {
            setTimeout(function () { //to ensure that the charts are rendered
                $telerik.$(".RadHtmlChart").each(function () {
                    var chart = this.control.get_kendoWidget();
                    if (chart) {
                        chart.resize();
                    }
                })
            }, 100);
        }

 

and call it on the server-side after the charts are created (e.g. you can do it at the end of the try block of the bindchartheaders() method):

 

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "repaintCharts();", True)

 

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Revanthkumar
Top achievements
Rank 1
answered on 02 Apr 2021, 10:27 AM

Thank you so much for your support  Vessy!

its still not working for me with the script function you shared me its still giving me error. 

after some research on repaint function I changed the repaint function a bit which is giving me the results. now I want to know the difference between these two. and what makes the difference. if i use the function i modified will there be any issues in long run. please explain.

 

0
Accepted
Vessy
Telerik team
answered on 02 Apr 2021, 11:17 AM

Hi Revanthkumar,

I am glad you have managed to resolved the issue. Calling the repaint method directly of the RadHtmlchart object is a perfectly acceptable solution. Actually, it is based on the kendo chart's widget resize method and is the same like the following:

        function repaintCharts() {
            setTimeout(function () { //to ensure that the charts are rendered
                $telerik.$(".RadHtmlChart").each(function () {
                    var chart = this.control.get_kendoWidget();
                    if (chart) {
                        chart.resize();
                    }
                })
            }, 100);
        }

I have updated my previous replies with this method as well.

Regards,
Vessy
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/.

Tags
General Discussions
Asked by
Revanthkumar
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Revanthkumar
Top achievements
Rank 1
Share this question
or