Search code examples
pluginsstreamingchart.jszooming

chartjs-plugin-streaming + chartjs-plugin-zoom


(sorry for my english) I use chartjs-plugin-streaming for the real time chartjs and I want to use the chartjs-plugin-zoom.

But the zoom don't work.

When i test to zoom, appear the zoom area but on i leave the mouse from chart, nothing is happening

I see that the method doZoom of chartjs-plugin-zoom is called, then i think the problem is in streaming plugin, but I do not know where exactly.

I tested to call pause streaming before to do the zoom but there is the same problem.

What can I do to make the zoom work?

Thanks


Solution

  • chartjs-plugin-streaming v1.6.0 now supports chartjs-plugin-zoom.

    Include Chart.js, chartjs-plugin-zoom.js, chartjs-plugin-streaming.js and required libraries (Moment.js and Hammer.js), and add pan and zoom options. Note that unlike other scale types, the rangeMin and rangeMax options don't specify time values. Instead, pan.rangeMin and pan.rangeMax limit the range of the delay option value while zoom.rangeMin and zoom.rangeMax limit the range of the duration option value.

    options: {
        // Assume x axis is the realtime scale
        pan: {
            enabled: true,    // Enable panning
            mode: 'x',        // Allow panning in the x direction
            rangeMin: {
                x: null       // Min value of the delay option
            },
            rangeMax: {
                x: null       // Max value of the delay option
            }
        },
        zoom: {
            enabled: true,    // Enable zooming
            mode: 'x',        // Allow zooming in the x direction
            rangeMin: {
                x: null       // Min value of the duration option
            },
            rangeMax: {
                x: null       // Max value of the duration option
            }
        }
    }