[Solved] Make Xaxis labels clickable links in bar chart

[Dave]

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>

[Danail Vasilev]

Hi Dave,

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

Regards,
Danail Vasilev
Telerik

 

 

[Dave]

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.

[Danail Vasilev]

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

 

 

[Dave]

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