This is a migrated thread and some comments may be shown as answers.

Clickable Data Point Implementation

1 Answer 88 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Guohui
Top achievements
Rank 1
Guohui asked on 10 Dec 2013, 10:01 PM

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!

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 12 Dec 2013, 12:10 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Chart (Obsolete)
Asked by
Guohui
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or