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

Multiple HtmlCharts with drill down on the same page

1 Answer 122 Views

Chart (HTML5)

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

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

answered on 12 Feb 2016, 12:08 PM

RadAjaxManager-ajaxRequestWithTarget.zip

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