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!