Почему мой график HighCharts не рендерится?

Question

Я пытаюсь построить график, чтобы показать время и температуру, используя высокие графики.

У меня три датчика, и данные записываются каждые 5 минут (я считаю, что в JS 5 * 60).

По какой-то причине он не будет отображать масштаб для оси x или каких-либо данных на графике. Тем не менее, скелет графика и масштаб оси Y отрисовываются нормально.

Я также получаю следующую ошибку в консоли:

Error: Invalid value for <circle> attribute cx="NaN"

Если вы обнаружите что-то пропущенное или неправильное в коде моей диаграммы, это будет хорошо.

Мой код ниже - я прокомментировал любые внешние ссылки (они из источника данных JSON, и я проверил, что это все действительные данные, когда они поступают).

tempChart = new Highcharts.Chart({
        chart: {
            renderTo:'tempChart', // just a div with id of tempChart
            zoomType:'x',
            type:'line'
        },
        title: {
            text: 'Server Temperature'
        },
        xAxis: {
            type: 'datetime',
            maxZoom: 5*60*1000, // limit zoom to one record (5 minutes)
            title: {
                text: 'Timestamp'
            }
        },
        yAxis: {
            title: {
                text: 'Temperature'
            },
        },
        tooltip: {
            shared: true                    
        },
        series:[{
            type: 'line',
            name: 'Sensor 1',
            pointInterval:5*60*1000,
            pointStart:startDate, // this is a js date object
            data:data.temp1 // this is a javascript array object
        }, {
            type: 'line',
            name: 'Sensor 2',
            pointInterval:5*60*1000,
            pointStart:startDate, // same js date object
            data:data.temp2 // javascript array object
        }, {
            type: 'line',
            name: 'Sensor 3',
            pointInterval:5*60*1000,
            pointStart:startDate, // same
            data:data.temp3 // javascript array object
        }]
    });

---

Обновление

Я создаю дату, используя следующую функцию для преобразования даты MySQL в дату JS ( source )

function sql2js(timestamp) {
    var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;
    var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
    return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
}

Итак, в начале своей функции для создания диаграммы я использую эту функцию в дату MySQL из моих данных JSON, например:

startDate = sql2js(data.startDate);

Просто чтобы убедиться, что даты верны, я записал их обоих:

MySQL date: 2012-01-03 17:05:01
JS date:    Tue Jan 03 2012 17:05:01 GMT+0000 (GMT)

Answer 1

Как вы создаете свой объект Date?

Я играл с вашим примером на JSFiddle и видел, что если я неправильно объявил объект даты (например,, var startDate = new Date()), я получил ту же ошибку, которую вы упомянули.

Но с правильным объектом Date все работает нормально

EDITED:

Фактически, HighCharts запрашивает дату UTC в миллисекундах, поэтому вам придется сделать

var startDate = sql2js('2012-01-03 17:05:01').getUTCMilliseconds();

как обновлено в JSFiddle