Graph Interactivity (Clickable column chart bars; Hover features)

[Joey]

Hi,

I'm working with the Standalone Report Designer.  I have a bar chart (column variation), and I am aiming to have more interactivity with it.  I am looking to be able to:

(1) Click on the individual bars in the graph to generate another graph based off of which bar was selected.  For example, if I click on the bar corresponding to the state NY, then another graph would generate below the clickable graph with its origin state parameter being NY.

(2) Hover over a bar to display additional information (such as the numerical value of the bar or the name of the item the selected bar is referring to).

Are either or both of these options feasible?  If not, are there any workarounds or ideas to achieve similar functionality?

Thanks,

Joey

[Stef]

Hello Joey,

Tooltips are not supported. Please feel free to vote for the logged feature request in order to raise its priority.

About displaying another graph, there is support for actions like TogglevisibilityAction and NavigateToReportAction. The first allows you to display more details about a slot of the Graph e.g. How to: Add Drilldown action to the Graph item, and the second to navigate to another report in the same viewer and to pass information via report parameters - check the SeriesGroups' Action property.


I hope this information helps.

Regards,
Stef
Telerik by Progress

[Vasssek]

Hello,

because this PITS has status completed, could you please show community how we can add on hover tooltip with series values in

HTML5-based report viewers ?

Thank you

[Stef]

Hello Vassek,

You can have custom UI that shows/hide on hover. The functionality is available as of R3 2016 - Custom Action and Interactive Action Events.

Please check How to add interactivity to a report using action event handlers in HTML5-based report viewers.


Regards,
Stef
Telerik by Progress

[Vasssek]

Hello,

I've read that article, but I still don't know the steps which I have to do to achieve requested functionality. How to get series values and how to join them to on hover graph points ? I used Graph NeedDataSource event. Should I bind it there or ?

Thank you

 

 

[Stef]

Hello Vasssek,

In the report you can configure Custom actions where possible e.g. Graph.SeriesGroups.Action or Graph.CategoryGroups.Action. On configuring the action you can determine what values to be passed to the preview e.g. fields, parameters and other expressions - How to: Add a Custom Action.

The you can use the viewer's interactive events to style the preview and to display tooltips over elements with configured custom actions e.g.:

<telerik:ReportViewer
           ID="reportViewer1"
           Width="1300px"
           Height="900px"
           runat="server"
           ClientEvents-InteractiveActionLeave="CustomActionEnd" ClientEvents-InteractiveActionEnter="CustomActionStart">
           <ReportSource IdentifierType="TypeReportSource" Identifier="WebApplication1.Reports.Report1, WebApplication1">
           </ReportSource>
       </telerik:ReportViewer>
       <div id="tt" class="tooltip">
           <span>Tooltip text - </span><span id="paramContent"></span>
       </div>
       <script>
           //tooltips - http://www.w3schools.com/howto/howto_css_tooltip.asp

           //the event http://docs.telerik.com/reporting/html5-report-viewer-reportviewer-events-interactiveactionenter
           function CustomActionStart(e, args) {
               //show content delivered via action parameters
               var content = args.action.Value.Parameters[0].Value;
               $('#paramContent').text(content);

               //display custom UI
               $("#tt").toggle();
               //position custom UI
               var el_location = $(args.element).position();
               $("#tt").css({ top: el_location.top, left: el_location.left, position: 'absolute' });
           }

           //the event - http://docs.telerik.com/reporting/html5-report-viewer-reportviewer-events-interactiveactionleave
           function CustomActionEnd(e, args) {
               $("#tt").toggle();
           }
       </script>
       <style>
           /* Tooltip container */
           #tt
           {
               background-color: aliceblue;
               z-index: 10;
               display: none;
               font-size: 14px;
               width: 120px;
               border: 2px solid blue;
               padding: 20px 10px;
           }
       </style>

Regards,
Stef
Telerik by Progress