ZingChart JS - Get visible nodes

Question

I created a Graph using ZingChart library and everything is working as expected. The graph is used to show the power consumption of a specific outlet over time.

When the graph is loaded the system shows the kWh consumption for that time period.

The user was the ability to zoom in and out the graph, and when that happens I would like to show the power consumption for that period of time shown in the graph.

I'm using the zoom event:

zingchart.render({ 
            id:'chartDiv',
            data:graphset,
            height:500,
            events:{
                zoom:function(p){
                    console.log(p);
                    console.log(zingchart.exec(p.id, 'getseriesdata', {}));
                    console.log(zingchart.exec(p.id, 'getseriesvalues', {}));
                    console.log(zingchart.exec(p.id, "getplotvalues", {}));
                }
            },
            width:"100%"
        });

When I zoom in or out, the functions getseriesdata, getseriesvalues and getplotvalues always return the full graph values, not just the visible ones.

The p object gives me the new x and y limits, but I can't find a way to use them to get only the visible values.

Has anyone done this?

Any help is very much appreciated.

Thanks!

Answer 1

The zoom event returns both the scaleX min and max (as kmin and kmax) and the series min and max (as xmin and xmax).

Using the xmin and xmax, you can simple slice the values array to get the visible values.

Here's an example.

zingchart.bind('myChart', 'zoom', function(p) {
    var start = p.xmin;
    var end = p.xmax + 1;
    var series = zingchart.exec('myChart', 'getseriesvalues')[0];
    series = series.slice(start, end+1);
    // You can now do whatever you want with the series values
});

You can view a working demo here.

Full disclosure: I'm on the ZingChart team. Let me know if this solves your issue.