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

Multiple HtmlCharts with drill down on the same page

1 Answer 95 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Nikos
Top achievements
Rank 1
Nikos asked on 09 Feb 2016, 05:05 PM

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

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 12 Feb 2016, 12:08 PM
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
Tags
Chart (HTML5)
Asked by
Nikos
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or