Make Xaxis labels clickable links in bar chart

Thread is closed for posting
5 posts, 0 answers
  1. Dave
    Dave avatar
    5 posts
    Member since:
    Feb 2014

    Posted 26 Jun 2014 Link to this post

    Hello,

    I have a RadHtmlChart Bar chart that is using an ObjectDataSource  to bind data.  The Xaxis is customer name and I'd like to make the customer name a clickable link that would redirect the user to a customer page.  Is this possible?

    I've been able to make the bars clickable using javascript for the OnClientSeriesClicked event but my requirements are to make the labels into link.  Any advise would be appreciated

    Below is my chart:

    <telerik:RadHtmlChart runat="server" ID="BarChart" Height="400" Transitions="true" DataSourceID="ChartsDataSource" OnClientSeriesClicked="OnClientSeriesClicked">
                <PlotArea>
                    <Appearance>
                        <FillStyle BackgroundColor="#c5d291"></FillStyle>
                    </Appearance>
                     <Series>
                        <telerik:BarSeries DataFieldY="PercentPaid">
                            <Appearance FillStyle-BackgroundColor="#729021"></Appearance>
                            <LabelsAppearance Position="InsideBase" Color="White">
                                <ClientTemplate>
                                    $#=dataItem.PaidToDate#
                                </ClientTemplate>
                            </LabelsAppearance>
                        </telerik:BarSeries>
                    </Series>
                    <XAxis DataLabelsField="CustomerName" Reversed="false" >
                        <TitleAppearance Text="Customer Name" Visible="false">
                            <TextStyle Margin="20" />
                        </TitleAppearance>
                        <MajorGridLines Visible="false" Width="0" />
                        <MinorGridLines Visible="false" />
                    </XAxis>
                    <YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside"
                 MinorTickSize="1" MinorTickType="Outside" MinValue="0" MaxValue="100" Reversed="false">
                       <LabelsAppearance DataFormatString="{0}%" RotationAngle="30" Skip="0" ></LabelsAppearance>
                       <MajorGridLines Color="#EFEFEF" Width="0"></MajorGridLines>
                       <MinorGridLines Color="#F7F7F7" Width="0"></MinorGridLines>
                       <TitleAppearance Position="Center" RotationAngle="0" Text="Percent Paid" ></TitleAppearance>
                    </YAxis>              
                </PlotArea>
            </telerik:RadHtmlChart>
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 01 Jul 2014 Link to this post

    Hi Dave,

    You can attach to the axisLabelClick event as illustrated in this feedback item.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dave
    Dave avatar
    5 posts
    Member since:
    Feb 2014

    Posted 01 Jul 2014 in reply to Danail Vasilev Link to this post

    Thanks for the response Danail.  I'm getting closer to my goal.  When I use "OnClientSeriesClicked" to make the Bar clickable I reference args.get_dataItem().CustomerID.  Do you know a way for me to use get_dataItems() in the axisLabelClick event?  So far it appears I can only reference the xaxis label value in  the axisLabelClick event.
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 02 Jul 2014 Link to this post

    Hi Dave,

    You can obtain the index of the clicked x-axis category and use it, in order to find series values for this category. For example:
    JavaScript:
    <script>
        function pageLoad() {
            var chart = $find("<%=ColumnChart1.ClientID%>");
            chart._chartObject.bind("axisLabelClick", chart_axisLabelClick);
        }
        function chart_axisLabelClick(e) {
            var categoryIndex = e.index;
            var firstSeries = e.sender.options.series[0];
            alert('First series value for the clicked category is: ' + firstSeries.data[categoryIndex].value);
        }
    </script>

    ASPX:
    <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Name="Product 1">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="15000" />
                        <telerik:CategorySeriesItem Y="23000" />
                        <telerik:CategorySeriesItem Y="10000" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
            <XAxis>
                <Items>
                    <telerik:AxisItem LabelText="Item 1" />
                    <telerik:AxisItem LabelText="Item 2" />
                    <telerik:AxisItem LabelText="Item 3" />
                </Items>
            </XAxis>
        </PlotArea>
        <ChartTitle Text="Product sales for 2011">
        </ChartTitle>
        <Legend>
            <Appearance Position="Bottom" />
        </Legend>
    </telerik:RadHtmlChart>



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Dave
    Dave avatar
    5 posts
    Member since:
    Feb 2014

    Posted 02 Jul 2014 in reply to Danail Vasilev Link to this post

    Thanks for the response Danail!  I was able to grab another data item value using a function like this:

            function chart_axisLabelClick(e) {
                var url = "CustomerDetails?c=" + e.dataItem.CustomerID;
                window.location = url;
            }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017