Highlight "selected" series

[Mikael]

Hello,

We are currently using the RadHtmlChart for displaying financial data (we use many different types, i.e. Line, Bar, Pie, etc). At the moment, we only use categorical types, not scatter charts etc.

One thing we are going to implement is to have the notion of a "selected" series/category combination.

For instance, the attached picture is an example of what it could look like if the selection is Sales/2008. (it's not a pretty mockup, just showing the idea).

I think I have to use Javascript for this, since the only thing I think I can control on the series/category combination is the color, and that is not enough.

Also, given that I need to "select-hightlight" many different types of points to indicate its selection state (the select marker in a Line or Area, the bar on a Bar, the bar segment on a stacked bar, the segment in a pie, etc. it would be great if there was some kind of common feature that I could use, like that imagined "kendoWidget.series[0].category[1].select = true;"

I know that property doesn't exist, but is there something I could use and not have to write lots of Javascript code that is specific for each chart type?

For instance, I am thinking about the highlighting that takes place when you hover the mouse over the chart, i.e the hovered series/category becomes a little dimmer than the rest. Can I "hook" into that mechanism somehow?

A little difficult to explain, but I hope you get my idea.

Thanks,

Fredrik

 

[Vessy]

Hi Fredrik,

The arguments of the OnSeriesClick event of the chart contains a reference to the clicked series element, so you can change the element border color/width from there. Please, note, though, that the changed stroke will remain part of the hovered series element even when it is not clicked, unless the chart is redrawed, so you will need to have your own logic for clearing it. 

If you decide to go in this direction, you can see a possible way to change the stroke color like follows:

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
            <ClientEvents OnSeriesClick="onSeriesClick" on />
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries DataFieldY="values" Name="Series 1"></telerik:ColumnSeries>
                </Series>
                <XAxis DataLabelsField="labels"></XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
        <script>
            function onSeriesClick(e) {
                var el = $telerik.$(e.element);
                el.attr("stroke", "red");
                el.attr("stroke-width", "5");
                el.attr("stroke-opacity", "1");
            }
        </script>

 

Regards,
Vessy
Progress Telerik

[Mikael]

Thanks, Vessy!

That would work, but I realized that I would have to implement logic that would change the stroke color depending on the selected skin, so that the highlighted/selected color stands out from the color of the segment in a "good" way.

But, it struck me that this is exactly what the hovering effect does. If I could make a selected segment look like a segment does when it is hovered, I think that would be ideal. Is there a way to use that effect in some way, in my javascript. A bit like applying a CSS-class, "hovered" on the selected item (and clearing it when it is un-selected), and the "hovered" class depends on the selected skin.

Hope you understand my intention.

/Fredrik

[Rumen]

Hi Fredrik,

Thank you for the extra details and explanation!

Please check the screenshot below to see the difference between the hovered and not hovered bar:

This is the inline style="display: none;" style which hides the path element when the bar is not hovered:

<path d="M1137.5 62.5 L 1326.5 62.5 1326.5 372.5 1137.5 372.5Z" stroke="#fff" stroke-width="1" stroke-opacity="0.2" fill="#fff" fill-opacity="0.2" style="display: none;"></path>

You can try to show the hover effect by programmatically updating with JavaScript the display attribute from none to block or empty string.

You can find it in the DOM via its neighbor stroke="#fff" white attribute.

 

Best Regards,
Rumen
Progress Telerik

[Mikael]

Thanks a lot, Vessy!

Turns out that the hover idea didn't really work, since the difference between hovered and non-hovered isn't enough to make the selection state stand out enough.

I think I have to go with your original proposal, which looks promising (although I need to come up with a way to differentiate the stroke color based on the color of the inner part of the segment).

Your proposal doesnt fully work, though. Like you said, the  change remains part of the hovered series element. Also, the change disappears when another series element is hovered. I don't understand what is happening here. Can you explain, or better yet suggest how I can work around the problem? :-) The expected behaviour is that the "selected" change should remain until another series item is clicked.

Thanks!

/Fredrik

[Rumen]

Hi Fredrik,

Yes, the change disappears when another series element gets hovered due the internal logic of the control. This is by design and expected - there are two elements one visible and one hidden - on hover the hidden becomes visible and vise versa, on click the hovered elements gets hidden again. Vessy and I just provided ideas of how you can find a way to implement your custom logic but there isn't build in way to stop the default behavior of the control. Now you know how the hover effect works, which elements are behind its implementation and how to attach to the  <ClientEvents OnSeriesClick event and the OnSeriesHover event which fires when the user hovers the chart series. You need to go through all elements and depending on which one you'd like to highlight to highlight it, and to remove the select hover effect from the already selected one.

Best Regards,
Rumen
Progress Telerik

[Mikael]

It turned out this wasn't so difficult after all, but with a slightly different approach than the one suggested:

I can't share the entire code, but for those interested, here is some info:

I attach an event handler to seriesClick. This event-handler adds the clicked item (series data point) to an array (we support multiple selection) and then calls refresh() on the Kendo Chart. 

I also register a JS function to generate custom visuals. (This function will be executed for each series data point when refresh() is called above). The function checks the array to detect if this data point has been selected or not, and returns the applicable visual.