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

Hand cursor on series for drilldown

2 Answers 61 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
RBeco
Top achievements
Rank 1
RBeco asked on 20 Nov 2013, 09:57 AM
I have implemented drill down functionality for a column chart but I want my users to actually see they can click it by changing the cursor to the hand cursor on mouseover. I can see no way to get that done. Hoping someone can help.

Thanks!

2 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 25 Nov 2013, 09:46 AM
Hello,

The chart does not render as standard HTML you can style with CSS to control the pointer. This means that generally such functionality cannot be achieved.

Nevertheless, you can try adding some code that will change the pointer globally when the mouse is over certain series (their names are up to your custom logic) and then the mouse moves out of the chart you can restore the default cursor. For example:

ASPX:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" DataSourceID="SqlDataSource1"
    onmouseout="onmouseoutHandler();" OnClientSeriesClicked="OnClientSeriesClicked"
    OnClientSeriesHovered="OnClientSeriesHovered">
    <ChartTitle Text="Revenue">
    </ChartTitle>
    <PlotArea>
        <Series>
            <telerik:ColumnSeries DataFieldY="Rev" Name="Years">
            </telerik:ColumnSeries>
        </Series>
        <XAxis DataLabelsField="Year">
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>

JavaScript:
function OnClientSeriesHovered(sender, args)
{
    //removes the document handler to avoid the fact that
    //the event bubbles to the body and the browser will reset the cursor
    document.onmouseover = null;
    if (args.get_seriesName() != "Months")
    {
        //if a certain series is hovered - change the pointer.
        //With a timeout to allow for the first event bubble to pass
        setTimeout(function () {
            document.body.style.cursor = "pointer"
        }, 50);
    }
    return false;
}
  
//attached to onmouseout of the chart wrapper to restore the cursor
//as soon asthe mouse moves on the chart
function onmouseoutHandler(e)
{
    document.body.onmouseover = restoreCursor;
}
//the handler that restores the cursor for the page
function restoreCursor()
{
    document.body.style.cursor = "";
}
//resets the cursor
document.body.onmouseover = restoreCursor;

Note that I cannot guarantee this will work in all cases, scenarios and browsers. It seems to do fine on my end when integrated in the drilldown demo. You can further optimize the logic, use better approaches to attach the handlers, etc.

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.
0
RBeco
Top achievements
Rank 1
answered on 26 Nov 2013, 08:59 AM
Thank you for this. I implemented your code and it works like a charm!
Tags
Chart (HTML5)
Asked by
RBeco
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
RBeco
Top achievements
Rank 1
Share this question
or