Sparkline - two tooltip styles

9 posts, 2 answers
  1. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 22 Nov 2013 Link to this post

    Kendo version v2013.3.1119

    I have two tooltip types which are appearing on two different sets of sparkline charts. I cant work why they are one way for one and another way for the other set. They charts are displaying using the mvvm patten and pretty much copies of each other apart from the using a different 'field' scope.

    1. The common ones are displaying a tooltip in more of a table format (to n amount of series in in the sparkline) while hovering the mouse over the plane:
    ---------------------------------------------------
    | series name  | custom template  |
    | series name  | custom template  |
    ---------------------------------------------------
    ^ the only part of the template i provide is for the custom template. This is easy to use on hovering over, and on tablet as one doesn't have to be precise on hovering or clicking on the series to see the values along the axis.


    2. The second (more simple) type of tooltip im getting is more like those found on any of the chart tooltips. But are much harder show as it requires hovering over the series values rather than anywhere along the plane.
    ----------------------------
    | custom template |
    ----------------------------
    ^ missing the grid like pattern, and series name has gone walkies, and will only show one series at a time. This makes it hard to compare the many series values together.
    This is a pain for tablet use however as selecting that 1px line (of a 40px height) on the sparkline is a frustrating challenge.


    Can i ask what is driving its choice about using the two tooltip styles? And then be able to compel it to do what is most appropriate for the scenario.

    To me these are pretty much identical, first the sparkline displaying the grid style tooltop:
    <div data-role="sparkline"
        data-series="[{ 'name': 'Orders', 'type': 'column', 'field': 'Combined.OrderCount' }]"
        data-tooltip="{ template: $('#rangeTooltipTemplate').html() }"
        data-bind="source: dataSource">
    </div>
    @using (Html.BeginScripts("Daily.Range.Order.Count"))
    {
        <script type="text/html" id="rangeTooltipTemplate">
            <div>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</div>
            <div>Count: #: value #</div>
        </script>
    }

    Second the one which is displaying the more simple tooltip. My eyes have pretty much given up on the what is different between the two. The data & schema going into both are identical. The kendo data source is effectively equal and only describes the Date field as a date. There would be different aggregates depending on the page loading:
    <div data-role="sparkline"
        data-theme="bootstrap"
        data-series="[{ 'name': 'Out the door', 'type': 'line', 'field': 'Performance.AvgOutTheDoor' }]"
        data-tooltip="{ template: $('#PerformanceToolTipOutTheDoor').html() }"
        data-bind="source: dataSource, visible: showCharts">
    </div>
    @using (Html.BeginScripts("Performance.Range.OutDoorTime", Area.Foot))
    {
        <script id="PerformanceToolTipOutTheDoor" type="text/template">
            <div>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</div>
            <div>Out the door: #: value #</div>
        </script>
    }
    Any ideas?

    Thanks,
    Matt
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 26 Nov 2013 Link to this post

    Hi Matt,

    I tried to reproduce this behavior here, however I get the same tooltips for both of the Sparklines. Perhaps you could check the example and let me know if I am doing something differently.
    Regular Charts and Sparklines are using different tooltips mostly due to their different nature. For example the Chart has clearly visible Series and has axes, labels and a legend. Sparklines has none of these, so showing the Series name in the tooltip by default seems like a good idea. Chart's tooltip can also include the Series name by including in the template, for example :  
    <script type="text/html" id="chartTemplate">
        <span>#: series.name #</span> <nbsp>
        <span>Count: #: value #</span>
    </script>
    Additionally you can notice how once you put the cursors over a series the Chart's tooltips will start showing while hovering anywhere on its surface.  
    In case the above example does not answer your questions, please provide additional information about your scenario so we can advise you further.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 26 Nov 2013 Link to this post

    http://jsbin.com/EqoYuZi/3/  <-- this is what i want
    but i cant reproduce what my sparklines are actually doing on this a particular page.

    See my attachment. The sparkline's tooltip is not following the general sparkline pattern (which i like) and have for every sparkline i have ever created including the example you had and the further example i have.  The data is the same, the tooltip templates are the same, its implemented better in my app. I have attached the 'series name' to make it look more like the other sparklines but it is more pretend and harder to start off the tooltip.

    I'll be happy to guide you to where it is happening in my site if you like.

    Best Regards,
    Matt
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 26 Nov 2013 Link to this post

    Hello again,

    I would recommend upgrading your project to the latest internal build. In case the issue persists after the upgrade, I would ask you to provide a runnable copy where it's reproduced, so we can observe it locally and advise you further.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 26 Nov 2013 Link to this post

    The solution is upgraded to "2013.3.1122" however no luck.

    I presume the sparkline tooltips should 'always' have the series name then? and the screenshot of it acting like a general chart's tooltip is an unexpected event?
    (which it is to me)

    I shall see what i can construct and rid of my databases. Probably next week some when.

    Thanks for now,
    Matt

  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 26 Nov 2013 Link to this post

    I would recommend checking the following blog posts. They can help you isolate the issue in a sample project that you can share with us:

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Answer
    Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 27 Nov 2013 Link to this post

    I've replicated it with the following two versions:
    incorrect tooltip version:
    http://jsbin.com/EqoYuZi/5/
    working version:
    http://jsbin.com/EqoYuZi/6/

    I tracked it down to the datasource change event firing 6 times that lead to the view model being bound 6 times over the same element.
    Why does the datasource fire the change event 6 times for a single change of data? 

    Ensuring the item is only bound once to the element has fixed the tooltips (showing the correct series). The problem seems to affect all sparklines on the page regardless if they are within the encumbered html element. I have fixed this locally by binding the vm in the fetch method over the change event like:
    http://jsbin.com/EqoYuZi/6/

    Seeing I will need to add date-time pickers to change the from - to dates how can I optimize it so that the change event doesn't cause the observable to go 'hay i need to update the html several times for the charts' which would inevitably cause havoc on performance. 

    Awesome,
    Matt
  9. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 28 Nov 2013 Link to this post

    Hello Matt,

    Once the Sparklines are populated you can use the dataSource's filter method. Only one change event will be triggered and all the Sparklines using that dataSource will be affected. You can find such example here.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 06 Dec 2013 Link to this post

    Thanks again Alex.

    I've run away from charts for the while so will get back and test it out another time.

    Best regards, Matt
Back to Top
Kendo UI is VS 2017 Ready