ZingChart JS - Ottieni nodi visibili

Question

Ho creato un grafico utilizzando ZingChart library e tutto funziona come previsto. Il grafico viene utilizzato per mostrare il consumo energetico di una specifica presa nel tempo.

Quando il grafico viene caricato, il sistema mostra il consumo di kWh per quel periodo di tempo.

L'utente era in grado di ingrandire e ridurre il grafico e, quando ciò accade, vorrei mostrare il consumo di energia per quel periodo di tempo mostrato nel grafico.

Sto utilizzando l'evento zoom:

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%" 
     }); 

Quando ho ingrandire o ridurre, le funzioni getseriesdata, getseriesvalues ​​e getplotvalues ​​restituiscono sempre i valori del grafico completo, non solo quelli visibili.

L'oggetto p mi dà i nuovi limiti x e y, ma non riesco a trovare un modo per usarli per ottenere solo i valori visibili.

Qualcuno ha fatto questo?

Qualsiasi aiuto è molto apprezzato.

Grazie!

Answer 1

I rendimenti zoom dell'evento sia il minimo e massimo scaleX (come kmin e kmax) e la serie minimo e massimo (come xmin e xmax).

Utilizzando lo xmin e xmax, è possibile suddividere semplicemente l'array di valori per ottenere i valori visibili.

Ecco un esempio.

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: io sono sulla squadra ZingChart. Fammi sapere se questo risolve il tuo problema.

Answer 2

Quindi, non è la soluzione migliore, ma lo farà per ora.

Se qualcuno ha qualche consiglio per migliorare questo codice di crap, per favore, sentiti libero di commentare.

Utilizzando Moment.js per le date, ho utilizzato i valori di data/ora min e max restituiti dall'evento di zoom e aggiunto i valori di consumo energetico tra queste due date/orari.

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%" 
     });