ZingChart JS - Get Visible Nodes

Question

I created a graph using the ZingChart library and everything works as expected. The graph is used to display the power consumption of a specific output over time.

When the graph loads, the system displays the kWh consumption for this period of time.

The user was able to increase and decrease the graph, and when this happens, I would like to show the energy consumption for this period of time shown on the graph.

I am 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 getseriesdata, getseriesvalues ​​and getplotvalues ​​functions always return full graph values, not just visible ones.

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

Has anyone done this?

Any help is greatly appreciated.

Thanks!

Answer 1

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

Using xmin and xmax , you can simply truncate the array of values ​​to get visible values.

Here is 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 }); 

Here you can watch a working demo.

Full disclosure: I am on the ZingChart team. Let me know if this solves your problem.

Answer 2

So, this is not the best solution, but for now it will be done.

If anyone has any suggestions for improving this shitty code, please feel free to comment.

Using Moment.js for dates, I used the minimum and maximum date / time values ​​returned from the scaling event, and added energy consumption values ​​between the two dates / 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%" });