Clickable Data Point Implementation

[Guohui]

I am looking at RadHtmlChart. At the moment, I don’t know how to make the data points clickable easily.

In our scenario, the URL values for each data point will be constructed during the process of binding the data to the chart on the server side.

Can anybody advise?

Thanks!

[Danail Vasilev]

Hello Guohui,

I have already answered to the support ticket opened by you, so I am pasting my replay here so it is available for the rest members of the forum:

You can use the OnClientSeriesClicked event of the RadHtmlChart where you can obtain values in fields (e.g. field that contains urls) from the data source through the DataItem object and use them appropriately (.e.g. open the url in a new window). For example:
JavaScript:

<script>
    function OnClientSeriesClicked(sender, args) {
        var url = args.get_dataItem().urls;
        window.open(url);
    }
</script>

ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px" OnClientSeriesClicked="OnClientSeriesClicked">
    <PlotArea>
        <Series>
            <telerik:ScatterLineSeries DataFieldY="yValues" DataFieldX="xValues">
            </telerik:ScatterLineSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    RadHtmlChart1.DataSource = GetData();
    RadHtmlChart1.DataBind();
}

protected DataTable GetData()
{
    DataTable dt = new DataTable();

    dt.Columns.Add("ID");
    dt.Columns.Add("xValues");
    dt.Columns.Add("yValues");
    dt.Columns.Add("urls");

    dt.Rows.Add(1, 1, 11, "http://www.google.com");
    dt.Rows.Add(2, 2, 15, "http://www.bing.com");
    dt.Rows.Add(3, 3, 16, "http://www.telerik.com");

    return dt;
}

Regards,
Danail Vasilev
Telerik