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.

Answer 2

So, not the best solution, but it will do for now.

If anyone has any tips for improving this crap code, please, feel free to comment.

Using Moment.js for the dates, I used the min and max date/time values returned from the zoom event and added the power consumption values between these two date/times.

zingchart.render({ // Render Method[3]
            id:'chartDiv',
            locale:"MYLOCALE",
            data:graphset,
            height:500,
            events:{
                zoom:function(p){

                    var dateInit = moment(p.kmin).format("YYYY-MM-DD HH:mm:ss");
                    var dateEnd = moment(p.kmax).format("YYYY-MM-DD HH:mm:ss");
                    var newTotal = 0.0;
                    var arrayTotal = 0;

                    function getNewConsumption(element, index, array) {
                        if( moment(element[5]).isAfter(dateInit) && moment(element[5]).isBefore(dateEnd) ){
                            newTotal = newTotal + element[2];
                            arrayTotal++;
                        }
                    }

                    parseJSONReturn.forEach(getNewConsumption);

                    var new_average_consumption  = newTotal / arrayTotal;
                    var new_ms = moment(dateEnd).diff(moment(dateInit));
                    var new_d = moment.duration(new_ms).asHours();
                    var new_total_kwh = new Big((new_average_consumption * new_d) / 1000);

                    $("#kwh_consumption").empty().text(new_total_kwh.toFixed(2));
                }
            },
            width:"100%"
        });