Lines are missing in the Line chart

[Revanthkumar]

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.

[Vessy]

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

[Revanthkumar]

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.

[Revanthkumar]

any suggestions please 

[Vessy]

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

[Revanthkumar]

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!

[Vessy]

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

[Revanthkumar]

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

[Vessy]

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

[Revanthkumar]

Project

 

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

[Vessy]

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

[Revanthkumar]

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.

 

[Vessy]

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