HighCharts Date Formatting

Question

Have started playing with HiagCharts to produce some charts from XML data, however the dates/times simply will not render at all.

The XML file that is produced directly from an 'FOR XML AUTO' query on SQL Server 2012 is as below:

<tbldashboardgroups dashboard_group_name="Hard Drive Space">
<tblnodesensors id="4" deviceid="C:">
<tblsensordata sensordata="36006309888" dtetme="2014-08-12T19:27:13"/>
<tblsensordata sensordata="33623793664" dtetme="2014-08-13T06:52:17"/>
<tblsensordata sensordata="33979367424" dtetme="2014-08-14T14:42:23"/>
<tblsensordata sensordata="34030342144" dtetme="2014-08-15T07:48:21"/>
<tblsensordata sensordata="34024259584" dtetme="2014-08-15T07:49:07"/>
<tblsensordata sensordata="33818914816" dtetme="2014-08-15T09:07:56"/>
<tblsensordata sensordata="33818447872" dtetme="2014-08-15T09:08:10"/>
<tblsensordata sensordata="33817014272" dtetme="2014-08-15T09:08:20"/>
<tblsensordata sensordata="33682038784" dtetme="2014-08-15T09:16:29"/>
<tblsensordata sensordata="33684578304" dtetme="2014-08-15T09:18:47"/>
<tblsensordata sensordata="33611354112" dtetme="2014-08-15T10:02:31"/>
<tblsensordata sensordata="33579536384" dtetme="2014-08-16T12:43:09"/>
<tblsensordata sensordata="30933770240" dtetme="2014-08-17T11:08:00"/>
<tblsensordata sensordata="29468946432" dtetme="2014-08-18T12:13:41"/>
<tblsensordata sensordata="29465878528" dtetme="2014-08-18T18:05:15"/>
<tblsensordata sensordata="29467230208" dtetme="2014-08-18T18:05:28"/>
<tblsensordata sensordata="29462601728" dtetme="2014-08-18T18:10:24"/>
<tblsensordata sensordata="29104414720" dtetme="2014-08-18T22:48:49"/>
<tblsensordata sensordata="29104013312" dtetme="2014-08-18T22:49:08"/>
<tblsensordata sensordata="29102968832" dtetme="2014-08-18T22:49:16"/>
</tblnodesensors><tblnodesensors id="5" deviceid="E:">
<tblsensordata sensordata="62401007616" dtetme="2014-08-12T19:27:13"/>
<tblsensordata sensordata="62401007616" dtetme="2014-08-13T06:52:17"/>
<tblsensordata sensordata="62400991232" dtetme="2014-08-14T14:42:23"/>
<tblsensordata sensordata="62400913408" dtetme="2014-08-15T07:48:21"/>
<tblsensordata sensordata="62400913408" dtetme="2014-08-15T07:49:07"/>
<tblsensordata sensordata="62400909312" dtetme="2014-08-15T09:08:00"/>
<tblsensordata sensordata="62400909312" dtetme="2014-08-15T09:08:10"/>
<tblsensordata sensordata="62400909312" dtetme="2014-08-15T09:08:20"/>
<tblsensordata sensordata="63150637056" dtetme="2014-08-15T09:16:33"/>
<tblsensordata sensordata="65614413824" dtetme="2014-08-15T09:18:47"/>
<tblsensordata sensordata="65614413824" dtetme="2014-08-15T10:02:31"/>
<tblsensordata sensordata="65469915136" dtetme="2014-08-16T12:43:09"/>
<tblsensordata sensordata="65469886464" dtetme="2014-08-17T11:08:00"/>
<tblsensordata sensordata="65469886464" dtetme="2014-08-18T12:13:41"/>
<tblsensordata sensordata="65469132800" dtetme="2014-08-18T18:05:15"/>
<tblsensordata sensordata="65469132800" dtetme="2014-08-18T18:05:28"/>
<tblsensordata sensordata="65469132800" dtetme="2014-08-18T18:10:24"/>
<tblsensordata sensordata="65469104128" dtetme="2014-08-18T22:48:49"/>
<tblsensordata sensordata="65469104128" dtetme="2014-08-18T22:49:08"/>
<tblsensordata sensordata="65469104128" dtetme="2014-08-18T22:49:16"/>
</tblnodesensors>
</tbldashboardgroups>

This is being called via the following javascript query for HighCharts:

$.get('action-data.asp?action=96&gid=<%=(rsDashboardGroups.Fields.Item("id").Value)%>', function (xml) {
                        // Split the lines
                        var $xml = $(xml);

                        // push series
                        $xml.find('tblnodesensors').each(function(i, series) {
                            var seriesOptions = {
                                name: $(series).attr('deviceid'),
                                data: []
                            };

                        // push data points
                            $(series).find('tblsensordata').each(function (i, point) {
                                var dte = moment($(point).attr('dtetme')).unix();
                                // dump dte data out to the console for checking
                                console.log(dte);
                                seriesOptions.data.push(dte, parseInt($(point).attr('sensordata')))
                        });

                            options.series.push(seriesOptions);
                        });

                        var chart = new Highcharts.Chart(options);
                    });

I am using moment.js to format the dates into unix timestamps which I understand is required by HighCharts as the correct date format and with the output to console I get the following date/times:

1408270084

So it all looks to be working as expected but I get the chart data without issue IF i do not include the dte variable, once I add this in the dates simply display as 1.Jan 00:00:00.002 00:00:00.004 00:00:00.006 00:00:00.008 00:00:00.010 can anyone see what the issue is here, have been at this for nearly 8 hours now and starting to go numb.... :-)

Answer 1

I see two problems. First and foremost: You are using push to add two new values, not a [x,y]-pair. I suspect what you're looking for is (note the [ and ]):

seriesOptions.data.push([dte, parseInt($(point).attr('sensordata'))])

Secondly you are using moment.unix() which returns a UNIX timestamp. Highcharts uses timestamps in milliseconds, so make sure to multiply by 1000. For example:

var dte = moment($(point).attr('dtetme')).unix() * 1000;