Dashboard Loading in Browser But the Graphs are not Loaded

[Ssekamatte James]

Dear Syncfusion,

I have created a .cshtml razor page (PAU.cshtml) in my browser application to enable me call Syncfusion Dashboards in my application. However, when I load the dashboard in the application, the dashboard is loaded but the graphs are not drawn yet it shows the data is being picked from the database.

When I happen to inspect, it is complaining about the uncaught type error as shown in the image below.

I have provided more attachments in regard to my razor page, the syncfusion dashboard in designer mode and the preview that works when you run the dashboard in preview.

I shall be glad for your response.

Thank You 

Attachment: DashBoard_94c3dfb7.rar

[Prince Solomon Bala Subramani]

Hi James,  

Thanks for contacting Syncfusion Support.  

We have investigated the reported issue in our end and found the below reason for the issue  

  

1. The reference of JQuery.noConflict() is causing the issue. In your provided code snippets the Jquer.noConflict() is not needed. It is only needed when you are using the jQuery version higher than 1.10.2. So remove the reference and use the $ instead.

 

 

To Know how to use the JQuery.noConflict() in the Dashboard Platform SDK follow the below KB article here 

https://www.syncfusion.com/kb/10283/jquery-noconflict-mode-in-dashboard-viewer 

 

2. Also the below script reference is required only when the Syncfusion Dashboard and other Syncfusion Components are embedded in the same page. If you are embedding only dashboard component please remove the below files

 

Please let us know if you need further assistance on this. We are happy to help you.  

Regards 

Prince Solomon  

[Ssekamatte James]

Thank You Solomon for your response, by you saying " So remove the reference and use the $ instead" what do you exactly mean by I should use $.

More clarity and example will be appreciated.

Thank You

[Ssekamatte James]

Thank You Very Much Solomon.

I have been able to solve the problem.

Below is how I changed the changed.

 $(function (e) {

        $("#dashboard").css({ "width": "99%", "height": "90vh" })

        $("#dashboard").ejDashboardViewer({

            ////IBS Office Server Dashboard Url

            //serviceUrl: "http://102.68.174.102/DashBoardService/DashboardService.svc",

            //dashboardPath: dashboardpathAgyw,

            ////Azure Server Dashboard Url

            //serviceUrl: "http://52.188.137.38:8080/DashBoardService/DashboardService.svc",

            //dashboardPath: dashboardpathAgyw,

            ////Local Dashboard Url

            serviceUrl: "http://localhost/DashBoardService/DashboardService.svc",

            dashboardPath: dashboardpathpau,

        });

    });

[Sathish Kanniyappan]

Hi James, 

 

Ok, we are glad to hear from you that the reported issue has been resolved from your end. Please let us know if you need further assistance on this, we will happy to assist you. 

 

Regards,
Sathish. K