Google折线图未使用PHP显示MySQL查询

如何解决Google折线图未使用PHP显示MySQL查询

嗨，StackOverflow社区，我正在努力在Google折线图中显示使用PHP的MySQL查询。问题是折线图未显示。我将感谢任何能够为我指出正确方向的人。以下MySQL查询是我要在折线图中表示的内容：

SELECT
    DATE(`VISIT_TIME`) AS `Date`,SUM(IF(HOUR(`VISIT_TIME`) = 0,1,0)) AS `TwelveAM`,SUM(IF(HOUR(`VISIT_TIME`) = 1,0)) AS `OneAM`,SUM(IF(HOUR(`VISIT_TIME`) = 2,0)) AS `TwoAM`,SUM(IF(HOUR(`VISIT_TIME`) = 3,0)) AS `ThreeAM`,SUM(IF(HOUR(`VISIT_TIME`) = 4,0)) AS `FourAM`,SUM(IF(HOUR(`VISIT_TIME`) = 5,0)) AS `FiveAM`,SUM(IF(HOUR(`VISIT_TIME`) = 6,0)) AS `SixAM`,SUM(IF(HOUR(`VISIT_TIME`) = 7,0)) AS `SevenAM`,SUM(IF(HOUR(`VISIT_TIME`) = 8,0)) AS `EightAM`,SUM(IF(HOUR(`VISIT_TIME`) = 9,0)) AS `NineAM`,SUM(IF(HOUR(`VISIT_TIME`) = 10,0)) AS `TenAM`,SUM(IF(HOUR(`VISIT_TIME`) = 11,0)) AS `ElevenAM`,SUM(IF(HOUR(`VISIT_TIME`) = 12,0)) AS `TwelvePM`,SUM(IF(HOUR(`VISIT_TIME`) = 13,0)) AS `OnePM`,SUM(IF(HOUR(`VISIT_TIME`) = 14,0)) AS `TwoPM`,SUM(IF(HOUR(`VISIT_TIME`) = 15,0)) AS `ThreePM`,SUM(IF(HOUR(`VISIT_TIME`) = 16,0)) AS `FourPM`,SUM(IF(HOUR(`VISIT_TIME`) = 17,0)) AS `FivePM`,SUM(IF(HOUR(`VISIT_TIME`) = 18,0)) AS `SixPM`,SUM(IF(HOUR(`VISIT_TIME`) = 19,0)) AS `SevenPM`,SUM(IF(HOUR(`VISIT_TIME`) = 20,0)) AS `EightPM`,SUM(IF(HOUR(`VISIT_TIME`) = 21,0)) AS `NinePM`,SUM(IF(HOUR(`VISIT_TIME`) = 22,0)) AS `TenPM`,SUM(IF(HOUR(`VISIT_TIME`) = 23,0)) AS `ElevenPM`
FROM
    `jurl_analytics`
WHERE
    `URL_ID` = 'westonsupermare'
GROUP BY
    DATE(`VISIT_TIME`)
LIMIT 7

以下查询显示最近7天每小时的请求数。

我希望在Google折线图中表示此数据，如下图所示：

这是我尝试过的： //如果您决定创建数据库，请填写服务器，用户名，密码和数据库字段。

 <?php
    $server = ""; 
    $username = ""; 
    $password = "";
    $database = "";
    $connect = mysqli_connect($server,$username,$password,$database);
    if ($connect)
    {
        echo "You are connected!". "<br>";
    }

function runAndCheckSQL($connection,$sql){
    $run = mysqli_query($connection,$sql);
    if ($run) {
        if(is_array($run) || is_object($run)){
            
            return $run;
        }else{
            return true;
        }
    } else {
        die(showError($sql,$connection));
    }
}
$sevenDaysHours = "SELECT
    DATE(`VISIT_TIME`) AS `Date`,0)) AS `ElevenPM`
FROM
    `jurl_analytics`
WHERE
    `URL_ID` = 'westonsupermare'
GROUP BY
    DATE(`VISIT_TIME`)
LIMIT 7"
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current',{'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Date','TwelveAM','OneAM','TwoAM','ThreeAM','FourAM','FiveAM','SixAM','7AM','8AM','9AM','10AM','11AM','12PM','1PM','2PM','3PM','4PM','5PM','6PM','7PM','8PM','9PM','10PM','11PM'],<?php
        
        $fire = mysqli_query($connect,$sevenDaysHours);
        
        while($result = mysqli_fetch_assoc($fire))
        {
            echo "['".$result['Date']."',".$result['TwelveAM']."',".$result['OneAM']."',".$result['TwoAM']."',".$result['ThreeAM']."',".$result['FourAM']."',".$result['FiveAM']."',".$result['SixAM']."',".$result['SevenAM']."',".$result['EightAM']."',".$result['NineAM']."',".$result['TenAM']."',".$result['ElevenAM']."',".$result['TwelvePM']."',".$result['OnePM']."',".$result['TwoPM']."',".$result['ThreePM']."',".$result['FourPM']."',".$result['FivePM']."',".$result['SixPM']."',".$result['SevenPM']."',".$result['EightPM']."',".$result['NinePM']."',".$result['TenPM']."',".$result['ElevenPM']."',".$result['TwelvePM']."],";
        }
        ?>
    ]);

    var options = {
      title: 'Company Performance',curveType: 'function',legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data,options);
  }
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
 </body>
</html>

要创建数据库以帮助解决此问题，请运行以下命令来创建数据库：

CREATE TABLE `JURL_Analytics` (
  `VISIT_ID` int(8) NOT NULL,`VISIT_TIME` timestamp NOT NULL DEFAULT current_timestamp(),) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `JURL_Analytics` (`VISIT_ID`,`VISIT_TIME`) VALUES
(705,'2020-08-26 15:20:26'),(704,'2020-08-26 13:19:08'),(703,'2020-08-25 21:40:22'),(702,'2020-08-25 17:34:29'),(701,'2020-08-25 17:34:23'),(700,'2020-08-25 10:12:39'),(699,'2020-08-25 09:26:57'),(698,(697,'2020-08-25 09:26:32'),(696,'2020-08-25 09:22:43'),(695,'2020-08-25 09:18:58'),(694,'2020-08-25 09:12:25'),(693,'2020-08-24 16:18:45'),(692,'2020-08-24 14:22:20'),(691,'2020-08-24 14:19:39'),(690,'2020-08-24 14:19:03'),(689,'2020-08-24 13:48:00'),(688,'2020-08-24 06:21:50'),(687,'2020-08-23 20:22:26'),(686,'2020-08-23 19:55:26'),(685,'2020-08-23 19:54:09'),(684,'2020-08-23 07:34:47'),(683,'2020-08-22 23:28:29'),(682,'2020-08-22 13:24:44'),(681,'2020-08-22 09:56:58'),(680,'2020-08-22 06:54:50'),(679,'2020-08-22 06:53:37'),(678,'2020-08-22 03:13:39'),(677,'2020-08-22 03:11:30'),(676,'2020-08-21 16:47:31'),(675,'2020-08-20 18:13:02'),(674,'2020-08-20 17:28:48'),(673,'2020-08-20 10:57:27'),(672,'2020-08-19 15:21:29'),(671,'2020-08-19 14:57:21'),(670,'2020-08-19 10:25:26'),(669,'2020-08-18 18:53:22'),(668,'2020-08-18 18:04:46'),(667,'2020-08-18 18:00:13'),(666,'2020-08-18 17:59:59'),(665,'2020-08-18 14:35:04'),(664,'2020-08-18 11:49:22'),(663,'2020-08-18 11:43:47'),(662,'2020-08-18 11:25:02'),(661,'2020-08-18 08:07:09'),(660,'2020-08-18 07:57:51'),(659,'2020-08-18 01:09:30'),(658,'2020-08-17 21:43:36'),(657,'2020-08-17 21:43:07'),(656,'2020-08-17 20:53:50'),(655,'2020-08-17 20:15:12'),(654,'2020-08-17 18:08:16')

我为回应DroopSnoot所做的尝试：

echo "['".$result['Date']."','".$result['OneAM']."','".$result['TwoAM']."','".$result['ThreeAM']."','".$result['FourAM']."','".$result['FiveAM']."','".$result['SixAM']."','".$result['SevenAM']."','".$result['EightAM']."','".$result['NineAM']."','".$result['TenAM']."','".$result['ElevenAM']."','".$result['TwelvePM']."','".$result['OnePM']."','".$result['TwoPM']."','".$result['ThreePM']."','".$result['FourPM']."','".$result['FivePM']."','".$result['SixPM']."','".$result['SevenPM']."','".$result['EightPM']."','".$result['NinePM']."','".$result['TenPM']."','".$result['ElevenPM']."','".$result['TwelvePM']."],";

我从WhiteHat的答案中得到了什么：

解决方法

这里有几个问题。

首先，您在列标题中有25个值...

['Date','TwelveAM','OneAM','TwoAM',...

但是行数据中有26个值...

echo "['".$result['Date']."',".$result['TwelveAM']."','".$result['OneAM']."' ...

有两个TwelvePM值，我们将在最后删除一个，
因为它与最后一列的标题不匹配。

接下来，正如您在评论中提到的那样，
逗号和撇号的数量可能会造成混淆。
这是您不应该尝试手动构建JSON的原因之一。

相反，用PHP构建数组，然后在写入页面时对JSON进行编码。

<?php
  $data = array();
  $data[] = ['Date','ThreeAM','FourAM','FiveAM','SixAM','7AM','8AM','9AM','10AM','11AM','12PM','1PM','2PM','3PM','4PM','5PM','6PM','7PM','8PM','9PM','10PM','11PM'];

  $fire = mysqli_query($connect,$sevenDaysHours);
  while($result = mysqli_fetch_assoc($fire))
  {
    $data[] = [$result['Date'],$result['TwelveAM'],$result['OneAM'],$result['TwoAM'],$result['ThreeAM'],$result['FourAM'],$result['FiveAM'],$result['SixAM'],$result['SevenAM'],$result['EightAM'],$result['NineAM'],$result['TenAM'],$result['ElevenAM'],$result['TwelvePM'],$result['OnePM'],$result['TwoPM'],$result['ThreePM'],$result['FourPM'],$result['FivePM'],$result['SixPM'],$result['SevenPM'],$result['EightPM'],$result['NinePM'],$result['TenPM'],$result['ElevenPM']];
  }
?>

google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable(<?php echo json_encode($data); ?>);

  var options = {
    title: 'Company Performance',curveType: 'function',legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart.draw(data,options);
}

这是您要寻找的部分...

<?php
  $server = "";
  $username = "";
  $password = "";
  $database = "";
  $connect = mysqli_connect($server,$username,$password,$database);
  if ($connect)
  {
      echo "You are connected!". "<br>";
  }

  function runAndCheckSQL($connection,$sql){
    $run = mysqli_query($connection,$sql);
    if ($run) {
        if(is_array($run) || is_object($run)){

            return $run;
        }else{
            return true;
        }
    } else {
        die(showError($sql,$connection));
    }
  }

  $sevenDaysHours = "SELECT
    DATE(`VISIT_TIME`) AS `Date`,SUM(IF(HOUR(`VISIT_TIME`) = 0,1,0)) AS `TwelveAM`,SUM(IF(HOUR(`VISIT_TIME`) = 1,0)) AS `OneAM`,SUM(IF(HOUR(`VISIT_TIME`) = 2,0)) AS `TwoAM`,SUM(IF(HOUR(`VISIT_TIME`) = 3,0)) AS `ThreeAM`,SUM(IF(HOUR(`VISIT_TIME`) = 4,0)) AS `FourAM`,SUM(IF(HOUR(`VISIT_TIME`) = 5,0)) AS `FiveAM`,SUM(IF(HOUR(`VISIT_TIME`) = 6,0)) AS `SixAM`,SUM(IF(HOUR(`VISIT_TIME`) = 7,0)) AS `SevenAM`,SUM(IF(HOUR(`VISIT_TIME`) = 8,0)) AS `EightAM`,SUM(IF(HOUR(`VISIT_TIME`) = 9,0)) AS `NineAM`,SUM(IF(HOUR(`VISIT_TIME`) = 10,0)) AS `TenAM`,SUM(IF(HOUR(`VISIT_TIME`) = 11,0)) AS `ElevenAM`,SUM(IF(HOUR(`VISIT_TIME`) = 12,0)) AS `TwelvePM`,SUM(IF(HOUR(`VISIT_TIME`) = 13,0)) AS `OnePM`,SUM(IF(HOUR(`VISIT_TIME`) = 14,0)) AS `TwoPM`,SUM(IF(HOUR(`VISIT_TIME`) = 15,0)) AS `ThreePM`,SUM(IF(HOUR(`VISIT_TIME`) = 16,0)) AS `FourPM`,SUM(IF(HOUR(`VISIT_TIME`) = 17,0)) AS `FivePM`,SUM(IF(HOUR(`VISIT_TIME`) = 18,0)) AS `SixPM`,SUM(IF(HOUR(`VISIT_TIME`) = 19,0)) AS `SevenPM`,SUM(IF(HOUR(`VISIT_TIME`) = 20,0)) AS `EightPM`,SUM(IF(HOUR(`VISIT_TIME`) = 21,0)) AS `NinePM`,SUM(IF(HOUR(`VISIT_TIME`) = 22,0)) AS `TenPM`,SUM(IF(HOUR(`VISIT_TIME`) = 23,0)) AS `ElevenPM`
  FROM
    `jurl_analytics`
  WHERE
    `URL_ID` = 'westonsupermare'
  GROUP BY
    DATE(`VISIT_TIME`)
  LIMIT 7"
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  <?php
    $data = array();
    $data[] = ['Date','11PM'];

    $fire = mysqli_query($connect,$sevenDaysHours);
    while($result = mysqli_fetch_assoc($fire))
    {
      $data[] = [$result['Date'],$result['ElevenPM']];
    }
  ?>

  google.charts.load('current',{'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable(<?php echo json_encode($data); ?>);

    var options = {
      title: 'Company Performance',legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data,options);
  }

</script>
</head>
<body>
  <div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

编辑

如果数字值作为PHP中的字符串出现，
然后尝试将JSON_NUMERIC_CHECK参数添加到encode语句。

<?php echo json_encode($data,JSON_NUMERIC_CHECK); ?>

让我们将JSON数据分配给自己的变量。
然后我们可以将结果发送到控制台进行检查。
如果仍然无法使用，请从控制台共享一个示例。

<?php
  $data = array();
  $data[] = ['Date',$result['ElevenPM']];
  }
?>

var jsonData = <?php echo json_encode($data,JSON_NUMERIC_CHECK); ?>;
console.log(JSON.stringify(jsonData));

google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable(jsonData);

  var options = {
    title: 'Company Performance',options);
}

编辑2

为了获得所需的图表，
我们需要将列换为行，反之亦然。
这很可能很难通过更改查询来实现。
但是我们可以轻松地使用JavaScript创建新的数据表。

所以，几乎所有内容都保持不变。
除了我们将添加以下例程以创建新的数据表，
列和行被交换。
然后使用新的数据表绘制图表。

var jsonData = <?php echo json_encode($data,JSON_NUMERIC_CHECK); ?>;

google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable(jsonData);

  // create new data table with columns and rows swapped
  var dataHours = new google.visualization.DataTable();
  dataHours.addColumn('number','Hour');
  for (var row = 0; row < data.getNumberOfRows(); row++) {
    var dateColumn = dataHours.addColumn('number',data.getValue(row,0));
    for (var col = 1; col < data.getNumberOfColumns(); col++) {
      var dateRow = dataHours.addRow();
      dataHours.setValue(dateRow,col);
      dataHours.setValue(dateRow,dateColumn,col));
    }
  }

  var options = {
    title: 'Company Performance',legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart.draw(dataHours,options);  // <-- draw chart with new data table
}

以下是一个有效的示例，显示了交换之前和之后...

google.charts.load('current',{
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date','11PM'],['2020-08-14',2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],['2020-08-15',26,28,30,32,34,36,38,40,42,44,46,48,50],['2020-08-16',27,33,39,45,51,54,57,60,63,66,69,72,75],['2020-08-17',52,56,64,68,76,80,84,88,92,96,100]
  ]);

  // create new data table with columns and rows swapped  
  var dataHours = new google.visualization.DataTable();
  dataHours.addColumn('number',col));
    }
  }

  var options = {
    chartArea: {
      left: 64,top: 48,right: 32,bottom: 64,height: '100%',width: '100%'
    },legend: {
      alignment: 'center',position: 'bottom'
    },width: '100%'
  };

  var chartBefore = new google.visualization.LineChart(document.getElementById('chart_before'));
  chartBefore.draw(data,options);

  var chartAfter = new google.visualization.LineChart(document.getElementById('chart_after'));
  chartAfter.draw(dataHours,options);
});

.chart {
  height: 260px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_before"></div>
<div class="chart" id="chart_after"></div>

Google折线图未使用PHP显示MySQL查询

如何解决Google折线图未使用PHP显示MySQL查询

解决方法

相关推荐