chart refresh destroy crosshair tooltip and zoom selection

[Peter]

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

 

 

[Peter]

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

[Tsvetina]

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

[Peter]

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

 

 

[Tsvetina]

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