I have created an HTML chart bound to a SQL data source. Following a client-side exampleI have added an event handler which echoes the value of the bar show in the attached file.
When I click on the indicated bar an alert pops up telling me the value is "5".
What I really want is the is the X axis value, which in this case is "1920".
The purpose will then be re-direct to a different URL with this number in the query string.
function OnSeriesClick(args) { alert("Click! Value=" + args.value);}
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="SqlDataSource1" Width="660px"> <ClientEvents OnSeriesClick="OnSeriesClick" OnLegendItemClick="OnLegendItemClick" /> <PlotArea> <CommonTooltipsAppearance Shared="true"> <SharedTemplate> <div>Composed in decade beginning #= category #</div> # for (var i = 0; i < points.length; i++) { # <div>#: points[i].series.name#: #: points[i].value #</div> # } # </SharedTemplate> </CommonTooltipsAppearance> <Series> <telerik:ColumnSeries DataFieldY="songs" Name="Songs"> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="date_range"> <LabelsAppearance RotationAngle="75" /> <TitleAppearance Text="Decade" /> <MajorGridLines Visible="false"></MajorGridLines> <MinorGridLines Visible="false"></MinorGridLines> </XAxis> <YAxis><%-- <TitleAppearance Text="Count" />--%> <MajorGridLines Visible="true" Color="#ffc5bf" Width="1"></MajorGridLines> <MinorGridLines visible="false"></MinorGridLines> </YAxis> </PlotArea> <Legend> <Appearance Visible="false" /> </Legend> <ChartTitle Text="Songs by Decade"> <Appearance BackgroundColor="White" Visible="True"> </Appearance> </ChartTitle></telerik:RadHtmlChart> <div class="admin_activity_toolbar"> <telerik:RadToolBar ID="ToolBar" Runat="server" OnButtonClick="ToolBar_ButtonClick" Orientation="Vertical" Width="120px"> <Items> <telerik:RadToolBarButton runat="server" Text="Done" Value="done"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Button 2" IsSeparator="True"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Pivot" Value="pivot" Enabled="False"> </telerik:RadToolBarButton> </Items> </telerik:RadToolBar>
7 Answers, 1 is accepted
Rank 1
Rank 2
David, the suggested solution "args.get_category()" gets me nothing, the alert fails.
Here is the original:
<script> function OnSeriesClick(args) { alert("Click! Value = " + args.value); }Here is the modification that fails:
<script> function OnSeriesClick(args) { alert("Click! Category = " + args.get_category()); }
Rank 1
hmmm. I used it on the OnClientSeriesClickedEvent. I don't know if that is the same as OnSeriesClick.
<telerik:RadHtmlChart ID="chart1" runat="server" Height="600px" RenderMode="Lightweight" Width="900px" OnClientSeriesClicked="OnClientSeriesClicked"></telerik:RadHtmlChart>
function OnClientSeriesClicked(sender, args) { var xyz = args.get_category();}
Rank 2
Sorry, this does not work either.
It is not the event that I am having trouble with, it is understanding how & what I can get from the chart at that point. I'm very aware of how to do this with standard controls such as a grid, but this is my first chart and it is way, way different.
Rank 1
Rank 1
Rank 2
David, thanks for your persistence. It is working now.
I was tripped up due to the deprecation of the older event (OnClientSeries) combined with my total lack of JavaScript knowledge, mixed in with my recent transition from VB to C#. A recipe for disaster, that's for sure!
l