chart refresh destroy crosshair tooltip and zoom selection

5 posts, 0 answers
  1. Peter
    Peter avatar
    97 posts
    Member since:
    May 2016

    Posted 04 Oct 2018 Link to this post

    Hello,

    I have a realtime chart with refresh every second. After the refresh the crosshair tooltip and zoom selection (with left mouse key) are gone. See http://dojo.telerik.com/uTEseYiz

    I want to keep the croshair tooltip visible and the chart should be zoomable. Now the user must complete the zoom action before the next refresh occurs.

    Regards,

    Peter

     

     

  2.
  3. Peter
    Peter avatar
    97 posts
    Member since:
    May 2016

    Posted 04 Oct 2018 in reply to Peter Link to this post

    Hello,

    in http://dojo.telerik.com/uTEseYiz/3 is an updated version with correct label formatting and the update function at beginnung:

    function update() {
         var data = chart.options.series[0].data;
         for (i = 0; i < 1 / dt; i++) { // add data for 1 sec at end
             t0ms += dt * 1000;
             data.splice(0, 1);
             data.push(getSample());
         }
         SetGrid();
         chart.refresh();
         setTimeout(update, 1000);
     }

     

    It is possible to check, if the chart is in zoom selection mode? Then don't call chart.refresh() would be a solution for the zoom problem?

    And it is possible to get the status of the crosshair line+tooltip and restore it after refresh?

    Peter

  5. Tsvetina
    Admin
    Tsvetina avatar
    2395 posts

    Posted 08 Oct 2018 Link to this post

    Hello Peter,

    Currently, the Chart does not have events related to zooming in and out using selection, so it is not possible to tell if the Chart is currently being zoomed using selection. An alternative approach to allow zooming with a Chart using realtime updates would be to render the zoom UI outside the Chart, for example zoom in and zoom out buttons, like shown in this example:
    http://dojo.telerik.com/@tsveti/ePETOQeC 

    As for the crosshair, it can be shown only internally by the Chart at this point, so restoring it at the position where it was last shown before the Chart refresh is not possible. I am sorry for the inconvenience caused by this.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Peter
    Peter avatar
    97 posts
    Member since:
    May 2016

    Posted 08 Oct 2018 in reply to Tsvetina Link to this post

    Hello Tsvetina,

    A possible zoom solution is to set a variable 'inzoom' by zoomStart and zoomEnd events. http://dojo.telerik.com/oHUwocUb

    var inzoom = false;
    function update() {
            ...
            if (!inzoom)
                chart.refresh();
            ...
        }
    ...
    function createChart() {
            $("#chart").kendoChart({
                ...
               zoomStart: function(e) {
                    inzoom=true;
                },
                zoomEnd: function(e) {
                    inzoom=false;
                }
            });

    Regards,

    Peter

     

     

  8.
  9. Tsvetina
    Admin
    Tsvetina avatar
    2395 posts

    Posted 08 Oct 2018 Link to this post

    Hi Peter,

    Thank you for sharing your solution.

    I tried this, too, but it turns out I had a wrong configuration, which prevented the events from firing and I wrongly assumed they would work only with mouse wheel zoom.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top