I have two arrays full of data. One array is just random integers (e.g. 1.7, 2.8, 3.4, etc.) and the other array is a corresponding list of unix timestamps for that data, (e.g. 1366585199).

At the moment my Highcharts code looks a little something like this:

dataArray = ("2.4","5.6","3.1", ...);
timeArray = ("1366585199","1366585233","1366585355", ...)

       function foo(dataArray, timeArray) {
            $('#viz_1').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Data Index'
                },
                xAxis: {
                    type: 'datetime', // this isn't doing anything??
                    categories: timeArray
                },
                yAxis: {
                    title: {
                    text: 'Data Value'
                    },
                },
                series: [{
                    name: topicID,
                    data: JSON.parse("[" + dataArray + "]")
                }]
            })
        }; 

This works and renders a line graph to the page but the X Axis is obviously full of about 50 Unix timestamps!

I can't seem to figure out how to get the Highcharts API to take the array of Unix timestamps, use it to line up the data points, but only show a human-readable date on the X axis at regular intervals?

I have two arrays full of data. One array is just random integers (e.g. 1.7, 2.8, 3.4, etc.) and the other array is a corresponding list of unix timestamps for that data, (e.g. 1366585199).

At the moment my Highcharts code looks a little something like this:

dataArray = ("2.4","5.6","3.1", ...);
timeArray = ("1366585199","1366585233","1366585355", ...)

       function foo(dataArray, timeArray) {
            $('#viz_1').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Data Index'
                },
                xAxis: {
                    type: 'datetime', // this isn't doing anything??
                    categories: timeArray
                },
                yAxis: {
                    title: {
                    text: 'Data Value'
                    },
                },
                series: [{
                    name: topicID,
                    data: JSON.parse("[" + dataArray + "]")
                }]
            })
        }; 

This works and renders a line graph to the page but the X Axis is obviously full of about 50 Unix timestamps!

I can't seem to figure out how to get the Highcharts API to take the array of Unix timestamps, use it to line up the data points, but only show a human-readable date on the X axis at regular intervals?

• javascript
• jquery
• highcharts
• unix-timestamp

1 Answer 1

You cannot mix 'datetime' and categories. It is my preference to send in the x/y values as pairs into HighCharts. Like:

data: [
            [Date.parse('01/01/2000 00:00:00'), 55205],
            [Date.parse('01/01/2003 00:00:00'), 59091],
            [Date.parse('01/01/2004 00:00:00'), 64347],
            [Date.parse('01/01/2005 00:00:00'), 71067],
            [Date.parse('01/01/2006 00:00:00'), 77770],
            [Date.parse('01/01/2011 00:00:00'), 81166]
        ]

If you have javascript timestamps you can send those in as well like:

[31536000000, 456]