Multiple HtmlCharts with drill down on the same page

2 posts, 0 answers
  1. Nikos
    Nikos avatar
    8 posts
    Member since:
    Sep 2015

    Posted 09 Feb Link to this post

    Hi!

    I am trying to build a page using multiple radHtmlCharts, all of them with drill down functionality.

    Followed the steps described in the demo page: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/drilldownchart/defaultvb.aspx?show-source=true

    I am using onClientSeriesClicked event and the AjaxRequest event of the Ajax Manager to force drill down. As far as i understand I can have only one Ajax Manager in my page and all of my htmlCharts points to the same AjaxRequest.

    Here is the code (sample) in my .aspx page:

        <head runat="server">
        ...

            <script src="script.js" type="text/javascript"></script>
        </head>

        ...
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                 <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadHtmlChartAverageImageResolutionOfCountries" LoadingPanelID="AjaxLoadingPanel1" />
                 </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                 <UpdatedControls>
                      <telerik:AjaxUpdatedControl ControlID="RadHtmlChartAverageComplianceOfCountries" LoadingPanelID="AjaxLoadingPanel1" />
                 </UpdatedControls>
           </telerik:AjaxSetting>
            ...
        </telerik:RadAjaxManager>
     
     <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Skin="BlackMetroTouch">
     </telerik:RadAjaxLoadingPanel>
     
     <telerik:RadCodeBlock ID="RadCodeBlock65" runat="server">
        <script type="text/javascript">
            function getAjaxManager()
                {
                     return $find("<%=RadAjaxManager1.ClientID%>");
                }
        </script>
     </telerik:RadCodeBlock>
        ...
        <div class="col4">
     
                <telerik:RadHtmlChart runat="server" ID="RadHtmlChartAverageImageResolutionOfCountries" OnClientSeriesClicked="AverageImageResolutionOfCountriesOnClientSeriesClicked" Skin="Black"  Height="280"
              <Appearance>
         <FillStyle BackgroundColor="#262626"></FillStyle>
      </Appearance>
      <ChartTitle Text="XXXXX1"></ChartTitle>
       <PlotArea>
        <Series>
          <telerik:ColumnSeries Name="Countries" DataFieldY="AverageImageResolution">

           ...

          </telerik:ColumnSeries>
       </Series>
       <XAxis DataLabelsField="Country">
       </XAxis>
       <YAxis>
       </YAxis>
     </PlotArea>
     </telerik:RadHtmlChart>
        </div>
        ...
        <div class="chart3">
     <telerik:RadHtmlChart runat="server" ID="RadHtmlChartAverageComplianceOfCountries" OnClientSeriesClicked="AverageComplianceOfCountriesOnClientSeriesClicked"  Skin="Black" Height="300">
       <ChartTitle Text="XXXXXX2">
               </ChartTitle>
       <PlotArea>
         <Series>
          <telerik:ColumnSeries Name="Countries" DataFieldY="Compliance">
                     ...
          </telerik:ColumnSeries>
         </Series>
         <XAxis DataLabelsField="Country">
         </XAxis>
         <YAxis>
         </YAxis>
      </PlotArea>
     </telerik:RadHtmlChart>
       </div>

       ...

     

    So, if i try to drill down a specific radHtmlChart  all the other charts are also getting refreshed and if they use the same categories (ColumnSeries: Countries) then they also drill down (if not, then they just load empty).

    The script i am using (script.js):

    (function (global, undefined) {
        global.AverageImageResolutionOfCountriesOnClientSeriesClicked = function (sender, args) {
            var ajaxManager = global.getAjaxManager();
     
            if (args.get_seriesName() !== "Sites") {
                ajaxManager.ajaxRequest(args.get_category());
            }
     
     
        }
    })(window);
     
    (function (global, undefined) {
        global.AverageComplianceOfCountriesOnClientSeriesClicked = function (sender, args) {
            var ajaxManager = global.getAjaxManager();
     
            if (args.get_seriesName() !== "Sites") {
                ajaxManager.ajaxRequest(args.get_category());
            }
        }
    })(window);
     

    And in VB code:

    Protected Sub RadAjaxManager1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs)
     
            ' Drill down for Average Image Resolution ''''''''''''''''''''''''''''''''''''''''''''''''''''''
            Dim seriesNameRes As String = RadHtmlChartAverageImageResolutionOfCountries.PlotArea.Series(0).Name
            If seriesNameRes = "Countries" Then
                 
                Dim CountryRes As String = (e.Argument).ToString
                RadHtmlChartAverageImageResolutionOfCountries.PlotArea.XAxis.DataLabelsField = "Site"
                RadHtmlChartAverageImageResolutionOfCountries.PlotArea.Series(0).DataFieldY = "AverageImageResolution"
                RadHtmlChartAverageImageResolutionOfCountries.PlotArea.Series(0).Name="Sites"
                RadHtmlChartAverageImageResolutionOfCountries.DataSource = GetAverageImageResolutionOfCountrySites(CountryRes)
                RadHtmlChartAverageImageResolutionOfCountries.DataBind()
             
               End If
             
     
            ' Drill down for Compliance ''''''''''''''''''''''''''''''''''''''''''''''''''''''
            Dim seriesNameCmpl As String = RadHtmlChartAverageComplianceOfCountries.PlotArea.Series(0).Name
            If seriesNameCmpl = "Countries" Then
                 
                Dim CountryCmpl As String = (e.Argument).ToString
                RadHtmlChartAverageComplianceOfCountries.PlotArea.XAxis.DataLabelsField = "Site"
                RadHtmlChartAverageComplianceOfCountries.PlotArea.Series(0).DataFieldY = "Compliance"
                RadHtmlChartAverageComplianceOfCountries.PlotArea.Series(0).Name="Sites"
                RadHtmlChartAverageComplianceOfCountries.DataSource = GetAverageComplianceOfCountrySites(CountryCmpl)
                RadHtmlChartAverageComplianceOfCountries.DataBind()
             
               End If
     
            End Sub

    How could i refresh only the HtmlChart for which i am calling the onClientSeriesClicked event?

    Thanks!

    Thanasis

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 12 Feb Link to this post

    Hi Nikos,

    I have already replied to the support ticket that was opened by you on this regards, so that I paste my answer below for the community.

    What I can suggest is that you do the following:
       - Add two RadButtons on your page and place them in a hidden element, so that they are not visible.
       - Configure the RadAjaxManager, so that the first RadButton updates the first chart and the second RadButton updates the second chart.
        - In the OnClientClicked event of the first chart pass the desired argument from the clicked series to the first RadButton's commandName property and execute an ajax request with target this RadButton. Do the same for the second pair chart-button.
         - On the server you can obtain the passed argument through the commandName property of the corresponding RadButton and execute some custom server logic
          - Set the desired RadLoadingPanel to the corresponding chart.

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top