highcharts can't render

Question

I use Ajax to get data, when I debug with firebug, the result shows highcharts option's data has data. But the chart can't render correctly. The charts background is rended correctely, but there is no chart.

here is my code.

// @ author:wang
var chart;
var element;
var chart_type_element;

var y_title_1;
var y_title_2;
var y_title_3;
var date = new Date();
var y = date.getUTCFullYear();
var m = date.getUTCMonth();
var d = date.getUTCDate()-1;
var h = date.getUTCHours();
var minute = date.getUTCMinutes();

/**
 * 返回图表的类型
 * 
*/
function chart_type(element){
var type;
var wind = '风向风速';
    var t_h = '温湿度';

if ( element== 'wind' ){
    type = wind;
} else if ( element == 't_h') {
    type = t_h;
}
return type;
}

/**
*
*return y-axis title
*
*/
function y_title(element, serie){
var title;

if ( element== 'wind' ){
    switch (serie){
        case 1: title = '风速'; break;
        case 2: title = '阵风'; break;
        case 3: title = '风向'; break;
    }
} else if ( element == 't_h') {
    switch (serie){
        case 1: title = '温度'; break;
        case 2: title = '湿度'; break;
        default: title = '';
    }
}
return title;

}

function getLocTime(nS) {
        return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}

/**
*  气压配置选项
*/
var option_p = {
chart: {
        renderTo: 'station_curve',
        zoomType: 'x'
},
title:{
    text:'气压序列图'
},
subtitle: {
    text: '信科气象台'
},
xAxis: {
    type: 'datetime',
    maxZoom: 3600000, // one hour
    title: {
        text: null
    }
},
yAxis: {
            plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }],     
    min:980,
    max:1040
},
tooltip: {
    formatter: function() {
           return getLocTime(this.x) +': '+ this.y;
        }
},
legend: {
    layout: 'vertical',
    align: 'left',
    x: 220,
    verticalAlign: 'top',
    y: 30,
    floating: true,
    backgroundColor: '#FFFFFF'
},
series: [{
    name:  '海平面气压',
    color: '#4572A7',
    type: 'line',
    pointInterval: 60 * 1000,
    pointStart: Date.UTC(y,m,d,h,minute),   
    marker: {
        enabled: false
    }   
}, {
    name:  '甲板气压',
    type: 'line',
    color: '#AA4643',
    pointInterval: 60 * 1000,
    pointStart: Date.UTC(y,m,d,h,minute),   
    marker: {
        enabled: false
    }
}/*, {
    name:  '3',
    color: '#89A54E',
    pointInterval: 60 * 1000,
    pointStart: Date.UTC(y,m,d,h,minute),   
    type: 'spline', 
    marker: {
        enabled: false
    }
}*/]

};


function draw_curve(platformID,element){
        option.series[0].data = [];
        option.series[1].data = [];

        option_th.series[0].data = [];
        option_th.series[1].data = [];
        jQuery.getJSON('get_last_3d.php',{platformID:platformID,element:element}, function(data) {
            var serie=[];
            var serie1=[];

            if (element == 'wind_dir'){
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.wd);
                }); 

                option.series[0].data = serie.reverse();

            } else if (element == 'wind_speed'){
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.ws);
                    serie1[i]=parseInt(value.ws_max);
                });                     

                option_wind_speed.series[0].data = serie.reverse();
                option_wind_speed.series[1].data = serie1.reverse();

            } else if (element == 't_h') {
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.t);
                    serie1[i]=parseInt(value.h);                        
                }); 

                option_th.series[0].data = serie.reverse();
                option_th.series[1].data = serie1.reverse();

            } else if (element == 'p') {
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.sea_p);
                    serie1[i]=parseInt(value.deck_p);                       
                }); 

                option_p.series[0] = serie.reverse();
                option_p.series[1] = serie1.reverse();

            } else if (element == 'wave_height') {
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.wave_height);                                   
                }); 

                option.series[0].data = serie.reverse();

            } else if (element == 'visibility') {
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.visibility);                                    
                }); 

                option.series[0].data = serie.reverse();

            }  else if (element == 'cloudheight') {
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.cloud_height);                                  
                });

                option.series[0].data = serie.reverse();        
            }               

            switch(element){
                case 'p' : 
                    chart = new Highcharts.Chart(option_p);
                    break;
                case 't_h':
                    chart = new Highcharts.Chart(option_th);
                    break;
                case 'wind_speed':
                    chart = new Highcharts.Chart(option_wind_speed);
                    break;
                default:
                chart = new Highcharts.Chart(option);
            }
            /*  old code, will be replaced with switch
            if (element == 'p') 
                chart = new Highcharts.Chart(option_p);
            else {
                chart = new Highcharts.Chart(option);
            }
            */
        });
}




$( function(){          
draw_curve(105,'t_h');          

})//end of jquery function


     ![the chart][1]      

thank you advance

Answer 1

The reason it doesn't work is because you didn't provide the values for y,m,d,h,minute for the Date.UTC(y,m,d,h,minute) in the pointStart property for your series. See working: http://jsfiddle.net/LzfM3/