[OPEN] [#1420] [4.1.0] Show Tooltip, anchered on series after click event

  1. #1

    [OPEN] [#1420] [4.1.0] Show Tooltip, anchered on series after click event

    Dear Ext.net Team,

    Based on the example posted below, I have a question about the Tooltip. The expected solution is to show a tooltip after a tap-Event, which is anchored on the series you clicked on. Best solution would be with the showOnTap Event. This didn't work out and I used ItemClick event (ChartItemEvents plugin included). I tested the situation with the google chrome dev tools (device toolbar). Is there a way to get the showOnTap-Event working?

    @using Ext.Net
    @using Ext.Net.MVC
    
    @{
        ViewBag.Title = "Errorin_Chart";
        var X = Html.X();
    }
    
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>@ViewBag.Title</title>
    
            <script>
                function renderTooltipS1(toolTip, record, ctx) {
    
                    var past = record.get("Past");
                    var present = record.get("Present");
    
                    var dataDiff = present - past;
    
                    toolTip.setHtml(ctx.field + ': ' + present);
                }
    
                function renderTouchtoolTip(series, item, e) {
                    var seriesTooltip = series.getTooltip();
    
                    seriesTooltip.setHtml("Tooltip to be shown on Series.");                
                    console.log(seriesTooltip.html);                 
                    seriesTooltip.show();                
                }
    
            </script>
        </head>
        <body>
            <h1>Example Chart</h1>
            @(Html.X().ResourceManager().ShowWarningOnAjaxFailure(false))
    
            @(X.CartesianChart()
                  .ID("testchart2")
                  .Height(400)
                  .Plugins(p => p.Add(X.ChartItemEvents()))
                  .InsetPadding(40).Flex(1)
                  .Bin(
                      X.Hidden().ID("isNextPressed").Value("false"))
                  .Store(Html.X().Store().ID("ChartStore")
                      .Model(Html.X().Model().Fields(f =>
                      {
                          f.Add(Html.X().ModelField().Name("Intervall"));
                          f.Add(Html.X().ModelField().Name("Present"));
                      })).Proxy(Html.X().RestProxy().AppendAction(false).Reader(
                          Html.X().JsonReader().RootProperty("data")).API(urls => { urls.Read = Url.Action("GenerateDummyData", "Chart"); })
                      ).Parameters(pm => { pm.Add(new StoreParameter("isNextPressed", "App.isNextPressed.value", ParameterMode.Raw)); })
                  )
                  .Axes(
                      Html.X().CategoryAxis()
                          .Position(Position.Bottom)
                          .Fields("Intervall")
                          .Label(Html.X().ChartLabel().RotationDegrees(-45))
                  )
                  .Series(
                      Html.X().BarSeries()
                          .XField("Intervall")
                          .StyleSpec(Html.X().Sprite()
                              .Opacity(2)
                              .FillStyle("#0000CD"))
                          .YField(new[] {"Present"})
                          .Titles(new[] {"Present"})
                          .Listeners(li => li.ItemClick.Fn = "renderTouchtoolTip") //2nd solution tried
                          .Tooltip(Html.X().ChartTip()
                              //.Config("showOnTap", true) //1st Solution tried
                              .Renderer(x => x.Fn = "renderTooltipS1"))
                  ))
        </body>
    </html>
     public StoreResult GenerateDummyData(bool isNextPressed)
            {
                //get the location
                //get the counts for location with granularity and offset
                var data = new List<object>();
                var rnd = new Random();
             
                    //Hour aggregation
                    for (var i = 8; i < 14; i++)
                    {
                        data.Add(new { Intervall = i + ":00", Present = rnd.Next(5, 12) });
                    }
          
                return new StoreResult(data);
            }
  2. #2
    Hello @Nikolai! And welcome to Ext.NET forums!

    Amazing, as a new user, you posted a simplified and runnable code sample at the first attempt! Usually people have hard times providing test cases we can follow and help them with! Congratulations!

    Praises aside, first think I thought about your tooltip would be to use .TrackMouse(true) to have the tooltip follow the mouse (or likely be displayed on tap from mobile devices) by the position the stimulus came. But in your set up, track mouse does not really behave as you described.

    Then second approach would be to just replace line 33 on your view code to:

    seriesTooltip.showAt(e.xy);
    This will not really align the tooltip by the bar chart, but will show it wherever the user clicked/tapped. Wouldn't that work for you? To get the exact position of the bar won't be a trivial task it seems.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Thanks for the quick feedback

    Hey fabricio,

    Thanks for the quick feedback. The method you provided worked like a charm. The tooltip was shown at the coordinates of the fired event. This is result, I can easily work with. There is still one open question. Why does the event "ShowOnTap" not work? If this event works, I could write less code and ignore teh function renderTouchtoolTip.

    Thanks in advance
  4. #4
    Hello @nikolai!

    Well, I see if I add this to the chart:

    .Listeners(li => li.ItemTap.Fn = "renderTouchtoolTip")
    It does not work at all. But if I try a simple tooltip like this:

    @(X.Label().ID("lbl1").Text("Tap me for tooltip?"))
    @(X.ToolTip().Html("Tooltip data here").Target("lbl1").ShowOnTap(true).ShowDelay(2500))
    It works fine. Does not show on tap, shows on hover (in pointer-driven devices), but does not show on tap. Shows (all as expected) when under touch-driven devices, when tapped.

    So there's a problem on bar charts wiring the 'tap' event to the canvas components and this probably is the cause the tooltip can't work with that.

    Please use .ShowOnTap(true) instead of .Config("showOnTap", true), at least this makes it clear that is a supported feature of ExtJS (as you can type anything in the string parameter for .Config, and ToolTip actually supports this setting in Ext.NET).

    We've created the issue #1420 on github to track this problem! For now, I'm afraid you should rely on itemClick, if it works for you.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 5
    Last Post: Jul 18, 2013, 4:08 PM
  2. [CLOSED] Adding line series tooltip dynamically.
    By RCM in forum 2.x Premium Help
    Replies: 3
    Last Post: Apr 04, 2013, 8:06 PM
  3. [CLOSED] chart series double click event
    By SymSure in forum 2.x Premium Help
    Replies: 4
    Last Post: Sep 04, 2012, 3:03 PM
  4. Replies: 10
    Last Post: Aug 18, 2010, 3:22 AM
  5. Show a panel on click event
    By CoolNoob in forum 1.x Help
    Replies: 2
    Last Post: Jan 01, 2010, 4:27 PM

Tags for this Thread

Posting Permissions