为什么Dygraph使用URL不能进行第二次尝试?

时间:2014-07-21 16:25:29

标签: csv dygraphs

我在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 + '&degF');
                      $('.legend_cool').html(cool + '&degF');
                      $('.legend_heat').html(heat + '&degF');
                  }else{
                      $('.legend_setpoint').html(current_temperature + '&degC');
                      $('.legend_cool').html(cool + '&degC');
                      $('.legend_heat').html(heat + '&degC');
                  }
                  $('.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 
          }
         );

0 个答案:

没有答案