Graph Interactivity (Clickable column chart bars; Hover features)

6 posts, 0 answers
  1. Joey
    Joey avatar
    1 posts
    Member since:
    May 2016

    Posted 13 Jul Link to this post

    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

  2. Stef
    Admin
    Stef avatar
    3046 posts

    Posted 18 Jul Link to this post

    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
  3. DevCraft banner
  4. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 07 Nov in reply to Stef Link to this post

    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

  5. Stef
    Admin
    Stef avatar
    3046 posts

    Posted 07 Nov Link to this post

    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
  6. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 07 Nov in reply to Stef Link to this post

    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

     

     

  7. Stef
    Admin
    Stef avatar
    3046 posts

    Posted 07 Nov Link to this post

    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
Back to Top
DevCraft banner