Loading multiple RadHtmlChart controls asynchronously

9 posts, 0 answers
  1. nick
    nick avatar
    12 posts
    Member since:
    May 2018

    Posted 02 Apr Link to this post

    Hi

    I hope you can help. We are implementing a .NET reporting dashboard whereby our page will consist of multiple RadHtmlChart controls. Each control sits in its own web part called from the parent page and housed in RadDocks.

    For performance reasons we'd like the charts to render asynchronously. We have tried to achieve this using a web service in the manner shown below.

    However, the charts do not render at all. Any other control we place in our web parts work fine (dropdown, radgrid etc.). Just not RadHtmlChart. Have you any ideas why this would be? Should we be using another method of doing this?

     

    function DockInitialize(dock, args) {

                logIt("INVOKE WidgetsWebService:" + dock.get_id());
                    var dockID = dock.get_id();
                    var CompanyID = $get(dockID).attributes["CompanyID"].value;
                    Revolution.WidgetsWebService.GetData(CompanyID, function (result) {
                        $get(dockID + "_C").innerHTML = result;
                        logIt("END INVOKE WidgetsWebService:" + dock.get_id());
                    });
            }

    <asp:ScriptManager ID="ScriptManager1" runat="server">
                <Services>
                    <asp:ServiceReference Path="~/Services/WidgetsWebService.asmx" />
                </Services>
    </asp:ScriptManager>

    ------------------------------------------------------------------------------------------------------------------------------

    <System.Web.Script.Services.ScriptService()>
    <System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
    <System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
    <ToolboxItem(False)> _
    Public Class WidgetsWebService
        Inherits System.Web.Services.WebService

        <WebMethod()>
        Public Function GetData(ByVal elementID As String) As String
            Thread.Sleep(2000)

            If elementID = String.Empty Then
                Throw New Exception("No Value argument is provided to the webservice!")
            End If

            Return ViewManager.RenderView("~/Dev/Consultants/Dashboard/Widgets/Other/TestControl.ascx")

        End Function

    End Class

    ------------------------------------------------------------------------------------------------------------------------------

    Public Shared Function RenderView(ByVal path As String) As String
            Thread.Sleep(200)

            Dim pageHolder As Test = New Test()
            Dim tempForm As HtmlForm = New HtmlForm()
            tempForm.ID = "TempForm"

            pageHolder.Controls.Add(tempForm)
            Dim viewControl As UserControl = CType(pageHolder.LoadControl(path), UserControl)
            viewControl.ID = Guid.NewGuid().ToString()

            Dim scriptManager As New ScriptManager()
            tempForm.Controls.Add(scriptManager)
            tempForm.Controls.Add(viewControl)

            Dim output As StringWriter = New StringWriter()
            HttpContext.Current.Server.Execute(pageHolder, output, False)

            Dim result As String = output.ToString()
            Return result
        End Function

    ------------------------------------------------------------------------------------------------------------------------------

    and this is our TestControl.ascx web part

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="TestControl.ascx.vb" Inherits="Revolution.TestControl" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <div id="content">
        <telerik:RadHtmlChart runat="server" ID="ColumnChart">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Wooden Table">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="25000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="1"></telerik:AxisItem>
                    </Items>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Quarters">
                    </TitleAppearance>
                </XAxis>
                <YAxis>
                    <LabelsAppearance DataFormatString="{0} sales" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Sales">
                    </TitleAppearance>
                </YAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>

     

     

  2. Attila Antal
    Admin
    Attila Antal avatar
    426 posts

    Posted 12 Apr Link to this post

    Hi Nick,

    You can try the following and see if that would help in your scenario:
    • A website can only have one ScriptManager control. Please ensure that you are not adding any extra ScriptManager to it. If using MasterPages, then the control must be placed there. If in case, you're trying this scenario on a SharePoint site, the site already has a ScriptManager and no need to add another one. Revise the RenderView function and remove the lines that are adding additional ScriptManagers.
    • Once done, set the RegisterWithScriptManager property of the Chart within the UserControl to false. "If RegisterWithScriptManager is set to false the control can be rendered on the page using Web Services or normal callback requests/page methods."

    I hope this will prove useful.


    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. nick
    nick avatar
    12 posts
    Member since:
    May 2018

    Posted 24 Apr in reply to Attila Antal Link to this post

    Hi Attila

    Thanks for your response. We have implemented your suggested changes but are still seeing the same behaviour. Asynchronous loading seems to work for any Telerik control apart from RadHtmlChart. Do you have any other suggestions because we are at a loss really?

    Thank you

    Nick

  4. Attila Antal
    Admin
    Attila Antal avatar
    426 posts

    Posted 29 Apr Link to this post

    Hi Nick,

    You can load multiple charts into a WebForms page, one after the other, even from WebUserControls and each of the control calls its own method to bind to data. To demonstrate that I have attached a sample for you. Asynchronous loading on the other hand, is not supported by the Telerik Web UI for ASP.NET AJAX components. 

    Take a look at the sample I have attached to get a better idea of this scenario. I hope this will prove helpful.

    Kind Regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. nick
    nick avatar
    12 posts
    Member since:
    May 2018

    Posted 29 Apr in reply to Attila Antal Link to this post

    Hi Attila

    Thanks for your reply. I don't see your attachment however.

    Nick

  6. Attila Antal
    Admin
    Attila Antal avatar
    426 posts

    Posted 29 Apr Link to this post

    Hi Nick,

    It was indeed missing. Could you check my previous post again? I have re-attached the file and now it seems to be visible.

    Kind Regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. nick
    nick avatar
    12 posts
    Member since:
    May 2018

    Posted 14 May Link to this post


    Hi Attila, we have followed your implementation suggestion and are getting thw following error.

    XmlHttpPanel loading error:
    Exception=Not Found

    Here is our code. I hope you are able to help.

    --------------------------------------------
    1 - aspx page
    --------------------------------------------
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Revolution.WebForm1" %>

    <%@ Register Src="~/Dev/Consultants/Dashboard/Widgets/Other/Chart1.ascx" TagPrefix="uc1" TagName="Chart1" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>

            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            </telerik:RadAjaxManager>
            <uc1:Chart1 runat="server" ID="Chart1" />
        </form>
    </body>
    </html>

    --------------------------------------------
    2 - code behind
    --------------------------------------------
    [‎14/‎05/‎2019 11:29]  Chaithanya Choodalingaiah:  
    No Title 
    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Chart1.ascx.vb" Inherits="Revolution.Chart1" %>

    <div id="content">
        <script type="text/javascript" async="async">
            function f() {
                $find("<%=XmlHttpPanelWCF1.ClientID %>").set_value();
                Sys.Application.remove_load(f);
            }
            Sys.Application.add_load(f);

            function setDataFromService1(sender, args) {
                //Get the returned data
                var newData = args.get_content();
                var arr = Array.parse(newData.d);
                var chart = $find('<%= RadHtmlChart1.ClientID %>');
                //Set the new datasource to the RadHtmlChart
                chart.set_dataSource(arr);

                //Repaint the RadHtmlChart
                chart.repaint();

                //Avoid raising the OnClientResponseEnded client-side event
                //avoid setting the received data as content for the RadXmlHttpPanel
                args.set_cancel(true);
            }
        </script>

        <telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelWCF1" WcfRequestMethod="GET"
            OnClientResponseEnding="setDataFromService1" WcfServicePath="WidgetsWCFService.svc"
            WcfServiceMethod="getJsonData" RegisterWithScriptManager="false">
        </telerik:RadXmlHttpPanel>

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
            <ChartTitle Text="Countries Exporting Crude Oil the United States (in Thousands of Barrels)">
            </ChartTitle>
            <PlotArea>
                <Series>
                    <telerik:PieSeries DataFieldY="Barrels" ColorField="Color" ExplodeField="IsExploded"
                        NameField="Country">
                        <LabelsAppearance DataFormatString="{0:N0} bbl"></LabelsAppearance>
                        <TooltipsAppearance Color="White" />
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div> 

    --------------------------------------------
    3 - wcf service implementation
    --------------------------------------------
    [‎14/‎05/‎2019 11:30]  Chaithanya Choodalingaiah:  
    No Title 
    Imports System
    Imports System.Collections.Generic
    Imports System.Linq
    Imports System.Runtime.Serialization
    Imports System.ServiceModel
    Imports System.ServiceModel.Activation
    Imports System.ServiceModel.Web
    Imports System.Web.Script.Serialization
    Imports Revolution

    <AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)>
    Public Class WidgetsWCFService
        Implements IWidgetsWCFService

        Private Function getJsonData() As String Implements IWidgetsWCFService.getJsonData
            Dim dataSourceJson As List(Of HtmlChartFields) = New List(Of HtmlChartFields)()
            dataSourceJson.Add(New HtmlChartFields With {
                .Color = "Black",
                .Barrels = 36808,
                .IsExploded = True,
                .Country = "Nigeria"
            })
            dataSourceJson.Add(New HtmlChartFields With {
                .Color = "Gray",
                .Barrels = 16731,
                .IsExploded = False,
                .Country = "Iraq"
            })
            dataSourceJson.Add(New HtmlChartFields With {
                .Color = "DarkGray",
                .Barrels = 19659,
                .IsExploded = False,
                .Country = "Algeria"
            })
            dataSourceJson.Add(New HtmlChartFields With {
                .Color = "LightGray",
                .Barrels = 17986,
                .IsExploded = False,
                .Country = "Angola"
            })
            dataSourceJson.Add(New HtmlChartFields With {
                .Color = "DarkRed",
                .Barrels = 12130,
                .IsExploded = False,
                .Country = "Russia"
            })
            Dim oSerializer As JavaScriptSerializer = New JavaScriptSerializer()
            Dim sJSON As String = oSerializer.Serialize(dataSourceJson)
            Return sJSON
        End Function

        <DataContract>
        Public Class HtmlChartFields
            <DataMember>
            Public Property Color As String
            <DataMember>
            Public Property Barrels As Integer
            <DataMember>
            Public Property IsExploded As Boolean
            <DataMember>
            Public Property Country As String
        End Class


    End Class

    -------------------------------------------- 
    4 -  web.config settings for wcf service
    --------------------------------------------
    [‎14/‎05/‎2019 11:31]  Chaithanya Choodalingaiah:  
    No Title 
    <system.serviceModel>
        <behaviors>
          <endpointBehaviors>
            <behavior name="WidgetsWCFBehavior">
              <webHttp />
            </behavior>
          </endpointBehaviors>
          <serviceBehaviors>
            <behavior name="">
              <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
              <serviceDebug includeExceptionDetailInFaults="false" />
            </behavior>
            <behavior name="WidgetsWCFBehavior">
              <serviceMetadata httpGetEnabled="true" />
              <serviceDebug includeExceptionDetailInFaults="true" />
            </behavior>
          </serviceBehaviors>
        </behaviors>
    <services>
          <service behaviorConfiguration="WidgetsWCFBehavior" name="WidgetsWCFService">
            <endpoint address="" binding="webHttpBinding" contract="IWidgetsWCFService"
            behaviorConfiguration="WidgetsWCFBehavior"/>
          </service>
        </services>
      </system.serviceModel> 
     

  8. Attila Antal
    Admin
    Attila Antal avatar
    426 posts

    Posted 17 May Link to this post

    Hi Nick,

    Attached you can find a Visual Studio project you can download and run it once the Telerik.Web.UI and Telerik.Web.UI.Skins assemblies are added to it. This project shows how you can load multiple charts as User controls. This time the project uses RadClientDataSource instead of RadXmlHttpPanel.

    I hope this will help you get a better understanding on this scenario.

    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. nick
    nick avatar
    12 posts
    Member since:
    May 2018

    Posted 14 Jun in reply to Attila Antal Link to this post

    Hi Attila. Just a note to say thanks for the code. It wasn't straightforward to adapt to our own needs but we have it working perfectly. Your help has been very much appreciated.

     

Back to Top