How to make Chart Title a hyperlink - HtmlChart

[Paul]

Hi,

Is there a way to turn the chart title of a RadHtmlChart into a hyperlink when you click on it like you could with the RadChart using the ActiveRegion properties?

Many thanks,

Andy

 

[Vasil]

Hi Andy,

With the current version it can not be done out of the box using the provided configuration.

It can be done using custom JavaScript, since the SVG supports links. You can find the header element(by it's text) and wrap it inside <a> tag with xlink set.

Regards,
Vasil
Telerik

[Paul]

Thanks for the tip Vasil. I managed to get the functionality I wanted using JavaScript. My situation was complicated by the fact there could be many charts on one page. I've included code below in case anyone else needs it.

RadHtmlChart.ChartTitle.Text = "RadHtmlChartTitle" & RadHtmlChart.ChartTitle.Text
RadHtmlChart.Attributes("titlelink") = "yourlocationhere"
RadHtmlChart.ClientEvents.OnLoad = "RadHtmlChart_OnLoad"

function RadHtmlChart_OnLoad(sender) {

    // Get the value of the hyperlink from the main chart div
    var titleLink = $("#" + sender.get_id())[0].getAttribute("titlelink");

    // Find the SVG text element for the chart title (identified by the RadHtmlChartTitle prefix)
    var title = $("#" + sender.get_id() + " text:contains('RadHtmlChartTitle')");

    // Remove the prefix from the actual title text
    title[0].textContent = title[0].textContent.replace("RadHtmlChartTitle", "");

    // Create an SVG "a" element and set its href tag to titleLink
    var svg = $("#" + sender.get_id() + " svg")[0];
    var svgNS = svg.getAttribute('xmlns');
    var svgXLinkNS = svg.getAttribute('xmlns:xlink');
    var a = document.createElementNS(svgNS, "a");
    a.setAttributeNS(svgXLinkNS, "xlink:href", titleLink);

    // Wrap the title text element with the "a" element
    title.wrap(a);

}

All the best,

Andy

 

[Zach]

I'm trying to use this example code on my site.  It works in IE, but not Firefox or Chrome.  Anybody else having that issue?

[Paul]

Hi Zach,

Good job you asked. I ended up changing my approach again because I needed to keep the hyperlink if a user clicked on the legend to add/remove a series or the chart was in a tab strip. I haven't tested the below because its a sub-set of my actual code. It also doesn't have to be so complicated if you don't need to worry about tab strips. It does work in IE, Firefox and Chrome though...

RadChart.ChartTitle.Text = yourtitle
RadChart.Attributes("titletext") = RadChart.ChartTitle.Text
RadChart.ClientEvents.OnLoad = "RadHtmlChart_OnLoad"
RadChart.ClientEvents.OnLegendItemClick = "RadHtmlChart_AfterLegendClick"

RadTabStrip.OnClientTabSelected = "RadHtmlChart_TabSelected"

RadChart.Attributes("titlelink") = yourlink

var HTMLCharts = [];

function RadHtmlChart_OnLoad(sender) {

    HTMLCharts[HTMLCharts.length] = sender.get_id();

    // timeout required for use in tab control
    setTimeout(function () { RadHtmlChart_TitleLink(sender.get_id()); }, 50);

}

function RadHtmlChart_TabSelected(sender, eventArgs) {

    // Re-link titles after tab change
    for (var i = 0; i < HTMLCharts.length; i++) {
        RadHtmlChart_TitleLink(HTMLCharts[i]);
    }

}

function RadHtmlChart_AfterLegendClick(args) {

    var ChartTitleId = args.sender.element[0].id;
    setTimeout(function () { RadHtmlChart_TitleLink(ChartTitleId); }, 50);

}

function RadHtmlChart_TitleLink(id) {

    // Get the value of the hyperlink from the main chart div
    var titleLink = $("#" + id)[0].getAttribute("titlelink");
    var titleText = $("#" + id)[0].getAttribute("titletext");

    if ((titleLink) && (titleText)) {

        var title = $("#" + id + " text:contains('" + titleText + "')");

        // Turn title text into a hyperlink using onclick
        if (title.length > 0) {

            title[0].setAttribute("style", title[0].getAttribute("style") + "cursor:pointer;");
            title[0].setAttribute("onclick", "top.location.href = '" + titleLink + "';");

        }

    }

}

All the best,

Andy