CODEWITHSUNDEEP
javascriptjqueryhtmlhighcharts
Alex Coplan
Alex Coplan

Reputation: 13371

Why won't my HighCharts chart render?

I'm trying to plot a chart to show time against temperature using highcharts.

I have three sensors, and data is recorded every 5 minutes (which I believe is 5*60 in JS).

For some reason, it won't render a scale for the x axis, or any data on the graph. However the barebones of the graph and the y axis scale render fine.

I also get the following error in the console:

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

If you can spot anything missing or incorrect with my chart code that would be good.

My code is below - I've commented in any external references (they're from a JSON data source, and I've checked that it's all valid data when it comes through).

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

Update

I construct the date by using the following function to convert a MySQL date to a JS one (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]);
}

So at the beginning of my function to create the chart, I use that function on the MySQL date from my JSON data, like so:

startDate = sql2js(data.startDate);

Just to make sure that the dates were correct, I logged them both:

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

Upvotes: 2

Views: 3771

Answers (1)

Grooveek
Grooveek

Reputation: 10094

How do you construct your Date object ?

I've played with your example on a JSFiddle, and saw that if I made a bad declaration of the date object (for example, var startDate = new Date()), I got the same error you mentioned.

But with a proper Date object, all works fine

EDITED :

In fact, HighCharts asks for a millisecond UTC date, so you'll have to do 

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

as updated in the JSFiddle

Upvotes: 4

Related Questions