Correctly plot time series in Highcharts/Highstock

Question

I have large collection of data in the format [1421065200000, 1.72], where the first parameter is time in milliseconds and the second parameter is the value at that specific time. I have data array consisting of such data in large size. Now I want scrollable graph containing plot of such time and value data. Here is my javascript implementation to do so,

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

The chart shows incorrect data, the time value on x-axis doesn't match the value at y-axis. What is the most correct and efficient to show such time series. Should I use Highcharts or Highstock. Please guide me through this, with suggestion or maybe with solution.

Answer 1

What I did was, I used HighStock instead of HighCharts (since I needed scrollbar along x-axis for large collection of data). I was passing the date in my local time zone format, whereas the chart was using UTC. So, I disabled the use of UTC (alternative: I could have provided data in UTC and drawn the graph using the same, In my case I needed my local labels). I gave the minimum and maximum range to the x-axis through x-axis min and max configuration. Here is the sample of my code,

//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);