我在Dygraph加载第一个请求工作后从网址返回的CSV数据时出现问题。
当整个页面加载（第一个请求）时，图表会正确获取URL的CSV数据并正确显示图表。
但是，当我请求更新url文件 - 不同的日期（第二个请求）时，请求似乎有效，但dygrapg为空。
有人知道为什么它会在第一次工作而不是第二次工作吗？我一直在想它的响应标题但是为什么第一个请求会起作用？
两个dygraph csv结果请求的网址相同（只有日期不同）：https://www.website.com/status/get_chart_file/?id=8385&from=2014-07-15&to=2014-07-21
来自请求＃1的响应
Cache-Control no-cache
Content-Length 118753
Content-Type application/CSV
Date Mon, 21 Jul 2014 15:56:20 GMT
Last-Modified Mon, 21 Jul 2014 15:56:21 GMT
Pragma no-cache
Server Microsoft-IIS/7.5
X-Powered-By PHP/5.3.28
1405310685000,27.5,,,66,0,0,0,0,1,0
1405310685000,27.5,,,66,0,0,0,0,1,0
1405310976000,27.5,,,66,0,0,0,0,1,0
1405310976000,27.5,,,66,0,0,0,0,1,0
1405311283000,27.5,,,66,0,0,0,0,1,0
1405311283000,27.5,,,66,0,0,0,0,1,0
1405311598000,27.5,,,65,0,0,0,0,1,0
1405311598000,27.5,,,65,0,0,0,0,1,0
1405311886000,27.5,,,65,0,0,0,0,1,0
1405311886000,27.5,,,65,0,0,0,0,1,0
1405312189000,27.5,,,65,0,0,0,0,1,0
来自请求＃2的响应
Cache-Control no-cache
Content-Length 98981
Content-Type application/CSV
Date Mon, 21 Jul 2014 15:56:59 GMT
Last-Modified Mon, 21 Jul 2014 15:56:59 GMT
Pragma no-cache
Server Microsoft-IIS/7.5
X-Powered-By PHP/5.3.28
1405396843000,27.5,,,41,0,0,0,0,1,0
1405396843000,27.5,,,41,0,0,0,0,1,0
1405397137000,27.5,,,41,0,0,0,0,1,0
1405397137000,27.5,,,41,0,0,0,0,1,0
1405397715000,27.5,,,40,0,0,0,0,1,0
1405397715000,27.5,,,40,0,0,0,0,1,0
1405398301000,27.5,,,40,0,0,0,0,1,0
1405398301000,27.5,,,40,0,0,0,0,0,0
1405398597000,27.5,,,40,0,0,0,0,0,0
的Javascript
function zoomGraphX(minDate, maxDate) {
switchDataFile('<?php echo $url; ?>');
g.updateOptions({
dateWindow: [minDate, maxDate]
});
}
function switchDataFile(filepath){
g.updateOptions({
file: filepath
});
}
**更新
页面加载：http://tinypic.com/r/2dvoscx/8
更改日期选择：http://tinypic.com/r/6jm2w3/8
这是运行图表的代码，也许答案就在这里：
g = new Dygraph(document.getElementById("graphdiv"),
'<?php echo BASE_URL_SSL."status/get_chart_file/?room=".$room_id."&from=".$start_date."&to=".$end_date; ?>',
{
labels: [ 'chart_date', 'Temp.', 'Heat SP', 'Cool SP', 'Humidity', 'Compressor', 'Heater', 'Fan', 'OB Valve', 'Occupancy' , "System Status (1)"],
labelsDiv: document.getElementById('status'),
labelsSeparateLines: false,
highlightCallback: function(e, x, pts, row) {
var current_temperature = g.getValue(row, 1);
var heat = g.getValue(row, 2);
var cool = g.getValue(row, 3);
var humidity = g.rawData_[row][4];
var compressor = g.getValue(row, 5);
var heater = g.getValue(row, 6);
var fan = g.getValue(row, 7);
var ob_valve = g.getValue(row, 8);
var occupancy = g.getValue(row, 9);
var system_status_1 = g.getValue(row, 10);
var datetime = new Date( (x) );
datetime = datetime.format("H:i d/m/Y");
$(".legend_last_update").html(datetime);
if (system_status_1 == 1 || system_status_1 == 2){
$(".legend_system").removeClass('off');
$(".legend_system").addClass('on');
$(".legend_system").html('ON');
}else{
$(".legend_system").removeClass('on');
$(".legend_system").addClass('off');
$(".legend_system").html('OFF');
}
if (degrees_type == "1"){
$('.legend_setpoint').html(current_temperature + '°F');
$('.legend_cool').html(cool + '°F');
$('.legend_heat').html(heat + '°F');
}else{
$('.legend_setpoint').html(current_temperature + '°C');
$('.legend_cool').html(cool + '°C');
$('.legend_heat').html(heat + '°C');
}
$('.legend_humidity').html(humidity + '%');
if (compressor == 1){
$(".legend_compressor").removeClass('off');
$(".legend_compressor").addClass('on');
$(".legend_compressor").html('Comp. ON');
}else{
$(".legend_compressor").removeClass('on');
$(".legend_compressor").addClass('off');
$(".legend_compressor").html('Comp. OFF');
}
if (heater == 1){
$(".legend_heater").removeClass('off');
$(".legend_heater").addClass('on');
$(".legend_heater").html('Heater ON');
}else{
$(".legend_heater").removeClass('on');
$(".legend_heater").addClass('off');
$(".legend_heater").html('Heater OFF');
}
switch(fan){
case 0:
$(".legend_fan").removeClass('low');
$(".legend_fan").removeClass('high');
$(".legend_fan").addClass('off');
$(".legend_fan").html('Fan OFF');
break;
case 1:
$(".legend_fan").removeClass('high');
$(".legend_fan").removeClass('off');
$(".legend_fan").addClass('low');
$(".legend_fan").html('Fan LOW');
break;
case 2:
$(".legend_fan").removeClass('low');
$(".legend_fan").removeClass('off');
$(".legend_fan").addClass('high');
$(".legend_fan").html('Fan HIGH');
break;
}
if (ob_valve == 1){
$(".legend_ob_valve").removeClass('off');
$(".legend_ob_valve").addClass('on');
$(".legend_ob_valve").html('OB ON');
}else{
$(".legend_ob_valve").removeClass('on');
$(".legend_ob_valve").addClass('off');
$(".legend_ob_valve").html('OB OFF');
}
switch(occupancy){
case 0:
$(".legend_occupancy").removeClass('occupied');
$(".legend_occupancy").addClass('empty');
$(".legend_occupancy").html('EMPTY');
break;
case 1:
$(".legend_occupancy").removeClass('empty');
$(".legend_occupancy").addClass('occupied');
$(".legend_occupancy").html('OCCUPIED');
break;
case 2:
$(".legend_occupancy").removeClass('empty');
$(".legend_occupancy").addClass('occupied');
$(".legend_occupancy").html('OCCUPIED');
break;
case 3:
$(".legend_occupancy").removeClass('empty');
$(".legend_occupancy").addClass('occupied');
$(".legend_occupancy").html('OCCUPIED');
break;
}
},
fillGraph: 0,
dateWindow: [<?= strtotime($start_date).'000' ?>,<?= strtotime($end_date).'000' ?>],
animatedZooms: true,
colors: ['#41F235', '#F73F38', '#338BF7'],
strokeWidth: 3,
visibility: [true, true, true, false, false, false, false, false, false, false],
//title: ' ',
yAxisLabelWidth: 20,
axisLabelFontSize: 10,
drawXGrid: false,
drawYGrid: false,
underlayCallback: function(canvas, area, g) {
<?php if( !empty($occupancy_periods) ):
foreach($occupancy_periods as $type => $periods):
if($type != '0'):
foreach($periods as $period): ?>
var bottom_left = g.toDomCoords('<?php echo $period['start'] ?>', +20);
var top_right = g.toDomCoords('<?php echo $period['finish'] ?>', +80);
canvas.fillStyle = "<?php echo $colors[$type] ?>";
canvas.fillRect(bottom_left[0], area.y, top_right[0] - bottom_left[0], area.h);
<?php endforeach;
endif;
endforeach;
endif;?>
},
xValueFormatter: Dygraph.dateString_,
xAxisLabelFormatter:
function(d, gran) {
return Dygraph.dateAxisFormatter(new Date(d.getTime() ), gran); // -3600*1000
},
xValueParser: function(x) { return parseInt(x); },
xTicker: Dygraph.dateTicker
}
);