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

8 posts, 0 answers
  1. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 20 Sep 2015 Link to this post

    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>

     

  2. David
    David avatar
    15 posts
    Member since:
    Aug 2006

    Posted 22 Sep 2015 Link to this post

    Try args.get_category()
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 22 Sep 2015 in reply to David Link to this post

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

  5. David
    David avatar
    15 posts
    Member since:
    Aug 2006

    Posted 22 Sep 2015 in reply to Tomica Link to this post

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

  6. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 22 Sep 2015 in reply to David Link to this post

    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.

  7. David
    David avatar
    15 posts
    Member since:
    Aug 2006

    Posted 23 Sep 2015 in reply to Tomica Link to this post

    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
  8. David
    David avatar
    15 posts
    Member since:
    Aug 2006
  9. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 23 Sep 2015 Link to this post

    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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017