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

Graph Interactivity (Clickable column chart bars; Hover features)

5 Answers 73 Views
Report Designer (standalone)
This is a migrated thread and some comments may be shown as answers.
Joey
Top achievements
Rank 1
Joey asked on 13 Jul 2016, 07:36 PM

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

5 Answers, 1 is accepted

Sort by
0
Stef
Telerik team
answered on 18 Jul 2016, 09:45 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Vasssek
Top achievements
Rank 1
answered on 07 Nov 2016, 11:36 AM

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

0
Stef
Telerik team
answered on 07 Nov 2016, 12:08 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Vasssek
Top achievements
Rank 1
answered on 07 Nov 2016, 12:43 PM

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

 

 

0
Stef
Telerik team
answered on 07 Nov 2016, 02:07 PM
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
  
           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' });
           }
  
           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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Report Designer (standalone)
Asked by
Joey
Top achievements
Rank 1
Answers by
Stef
Telerik team
Vasssek
Top achievements
Rank 1
Share this question
or