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

Getting more than args.value when clicking on a bar in the chart

7 Answers 187 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Tomica
Top achievements
Rank 2
Tomica asked on 21 Sep 2015, 12:13 AM

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

Sort by
0
David
Top achievements
Rank 1
answered on 22 Sep 2015, 04:59 PM
Try args.get_category()
0
Tomica
Top achievements
Rank 2
answered on 22 Sep 2015, 05:15 PM

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());
    }

0
David
Top achievements
Rank 1
answered on 22 Sep 2015, 08:21 PM

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();
 
}

0
Tomica
Top achievements
Rank 2
answered on 22 Sep 2015, 10:59 PM

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.

0
David
Top achievements
Rank 1
answered on 23 Sep 2015, 12:32 PM
You are correct on using OnSeriesClick..(see link below)  I'm doing the same thing that you are trying to do.  I get that value, and redirect them to a different url with the value as a querystring.  http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/client-side-programming/events/onclientseriesclicked%28deprecated%29
0
David
Top achievements
Rank 1
answered on 23 Sep 2015, 12:37 PM
0
Tomica
Top achievements
Rank 2
answered on 23 Sep 2015, 06:11 PM

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

Tags
Chart (HTML5)
Asked by
Tomica
Top achievements
Rank 2
Answers by
David
Top achievements
Rank 1
Tomica
Top achievements
Rank 2
Share this question
or