Correttamente trama serie a presto, highcharts/Highstock

Ho grande raccolta di dati nel formato [1421065200000, 1.72], dove il primo parametro è il tempo in millisecondi e il secondo parametro è il valore che in quel momento specifico. Ho matrice di dati consistente di tali di dati di grandi dimensioni. Ora voglio scorrevole grafico contenente trama del tempo e il valore dei dati. Ecco la mia implementazione di javascript per farlo,

var dataArray; //This contains my data array i.e. ([[t1, v1],[t2, v2],...])

var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];

var chartOption = {
        chart: {
            type: graphType,
            renderTo: 'graph-container',
            zoomType: 'x',
            useUTC: false
        },
        title: {
            text: 'Data from last 24 hours'
        },
        credits : {
            enabled: false
        },
        xAxis: {
            title: {
                text: null
            },
            type: 'datetime',
            dateTimeLabelFormats: {
                second: '%Y-%m-%d<br/>%H:%M:%S',
                minute: '%Y-%m-%d<br/>%H:%M',
                hour: '%Y-%m-%d<br/>%H:%M',
                day: '%Y<br/>%m-%d',
                week: '%Y<br/>%m-%d',
                month: '%Y-%m',
                year: '%Y'
            },
            allowDecimals: false,
            ordinal: false,
            min: minDate,
            max: maxDate
        },
        yAxis: {
            title: {
                text: null
            }
        },
        plotOptions: {
            series: {
                pointStart: minDate,
                pointInterval: 5 * 60 *1000
            }
        },
        series: [{
            name: parameterName,
            data: dataArray
        }],
        exporting: {
            enabled: false
        }
    };

    parameterChart = new Highcharts.Chart(chartOption);
}

Il grafico mostra dati non corretti, il valore del tempo sull’asse x non corrisponde al valore di y-axis. Che cosa è il più corretto ed efficiente di mostrare il tempo della serie. Devo usare presto, highcharts o Highstock. Per favore mi guida attraverso questo, con un suggerimento o magari con la soluzione.

Potrebbe recreae il tuo esempio come demo live, tra cui hardoced dati ?
Ho risolto il mio problema, mi hanno fornito la fonte mi è venuta. Tuttavia, sarà aggiunta una demo live con hardcoded dati. Grazie per l’interesse 🙂

OriginaleL’autore yuva | 2015-01-18

One Reply
  1. 0

    Quello che ho fatto è stato utilizzato HighStock invece presto, highcharts (dal momento che avevo bisogno di scorrimento lungo l’asse x per la grande raccolta dei dati). Mi stava passando la data nel mio fuso orario locale formato, mentre il grafico è stato impostato su UTC. Così, ho disabilitato l’uso dei UTC (in alternativa avrei potuto dati forniti in UTC e disegnato il grafico usando la stessa, Nel mio caso avevo bisogno di etichette locali). Io ho dato l’intervallo minimo e massimo per asse x, passante per l’asse x min e max di configurazione. Qui è il campione del mio codice,

    //dataArray contains the array of data [[x1, y1], [x2, y2], ...]
    //x is Date, y is temperature value (say)
    
    var minDate = dataArray[0][0];
    var maxDate = dataArray[dataArray.length - 1][0];
    
    //Disable use of UTC
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    
    //Create graph options
    var chartOption = {
        chart: {
            type: graphType, //line, bar, column, etc
            renderTo: 'graph-container', //div where my graph will be drawn
            zoomType: 'x' //Making x-axis zoomable/scrollable
        },
        title: {
            text: 'Data from last 6 hours'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Pinch the chart to zoom in'
        },
        xAxis: {
            title: {
                text: null
            },
            type: 'datetime', //For time series, x-axis labels will be time
            labels: {
                //You can format the label according to your need
                format: '{value:%H:%m}'
            },
            min: minDate,
            max: maxDate,
            minPadding: 0.05,
            maxPadding: 0.05
        },
        yAxis: {
            title: {
                text: null
            }
        },
        scrollbar: {
            enabled: true
        },
        series: [{
            name: "Temperature", //Name of the series
            data: dataArray
        }],
        exporting: {
            enabled: false
        },
        credits : {
            enabled: false
        }
    };
    
    //Finally create the graph
    var myChart = new Highcharts.Chart(chartOption);

    OriginaleL’autore yuva

Lascia un commento