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

Click series in Chart1 and update Chart2 with RadAjaxManagerProxy

0 Answers 59 Views

Chart

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

bdrennen asked on 17 Jan 2019, 06:42 PM

I have two charts, and I'd like to make it so the second chart updates when the series in the first chart is clicked. There's a master page with my RadAjaxManager, so I'm using a RadAjaxManagerProxy with these two charts. I'm having trouble converting the code samples I see in the documentation to work with my RadAjaxManagerProxy.

Here are my two charts:

<telerik:RadHtmlChart ID="Chart_Referrals_By_Month" runat="server" DataSourceID="ReferralsByMonth" Skin="Windows7" RenderMode="Lightweight" Height="250">

<ClientEvents OnSeriesClick="OnSeriesClick"/>

<PlotArea>

<Series>

<telerik:LineSeries Name="Column1" DataFieldY="AVERAGE_REFERRALS">

<TooltipsAppearance Visible="false"></TooltipsAppearance>

<Appearance>

<FillStyle BackgroundColor="#add8e6"></FillStyle>

</Appearance>

</telerik:LineSeries>

</Series>

<XAxis DataLabelsField="MONTH_NAME" Color="black" MajorTickSize="0" MinorTickSize="2" MinorTickType="Outside">

<LabelsAppearance RotationAngle="-45" />

<MajorGridLines Visible="false" />

<MinorGridLines Visible="true" />

</XAxis>

<YAxis AxisCrossingValue="0" Color="black" MajorTickSize="2" Step="1">

<LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" />

<TitleAppearance Position="Center" RotationAngle="0" Text="Percent" Visible="false" />

<MajorGridLines Visible="false" />

<MinorGridLines Visible="false" />

</YAxis>

</PlotArea>

<ChartTitle Text="Referrals per Day by Month - Average"></ChartTitle>

<Legend>

<Appearance BackgroundColor="Transparent" Position="Bottom" Visible="false"></Appearance>

</Legend>

</telerik:RadHtmlChart>

<telerik:RadHtmlChart ID="Chart_Referrals_By_Day" runat="server" DataSourceID="ReferralsByDay" Skin="Windows7" RenderMode="Lightweight" Height="250">

<PlotArea>

<Series>

<telerik:LineSeries Name="Column1" DataFieldY="PERCENT_REFERRALS">

<TooltipsAppearance Visible="false"></TooltipsAppearance>

<Appearance>

<FillStyle BackgroundColor="#add8e6"></FillStyle>

</Appearance>

</telerik:LineSeries>

</Series>

<XAxis DataLabelsField="DAY_NAME_LONG" Color="black" MajorTickSize="0" MinorTickSize="2" MinorTickType="Outside">

<LabelsAppearance RotationAngle="-45" />

<MajorGridLines Visible="false" />

<MinorGridLines Visible="true" />

</XAxis>

<YAxis AxisCrossingValue="0" Color="black" MajorTickSize="2">

<LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" />

<TitleAppearance Position="Center" RotationAngle="0" Text="Percent" Visible="false" />

<MajorGridLines Visible="false" />

<MinorGridLines Visible="false" />

</YAxis>

</PlotArea>

<ChartTitle Text="Referrals by Day - %"></ChartTitle>

<Legend>

<Appearance BackgroundColor="Transparent" Position="Bottom" Visible="false"></Appearance>

</Legend>

</telerik:RadHtmlChart>

Here's my JavaScript:

function OnSeriesClick(args) {

var kendoWidget = args.sender;

if (args.value > 0) {

$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(args.category);

}

} // end OnSeriesClick

What I don't know is how to handle this on the server side. From the Implementing Drill-Down Functionality example, I have:

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e) {

string seriesName = Chart_Referrals_By_Month.PlotArea.Series[0].Name;

} // end RadAjaxManager1_AjaxRequest

However, this line never executes. I'm missing a step here, and I was hoping you could point out what I need.

Thank you!

Click series in Chart1 and update Chart2 with RadAjaxManagerProxy

No answers yet. Maybe you can help?