Google图表 - 标签与数据不匹配

时间:2015-09-24 14:56:53

标签: javascript php charts google-visualization

我正在为客户的预订系统构建统计视图。他们想看看在特定月份预订了哪些活动。

我正在使用谷歌图表,但数据与正在生成的标签不匹配 - 即正确的数据被附加到错误的活动。

我已经通过数据库和print_r验证了产品ID是否已成功从数据库中提取并附加到正确的活动ID号,并且标签的数量和顺序与活动的数量和顺序相匹配,是:

 $sql = "SELECT ProductID, ProductName FROM products ORDER BY ProductID ASC";
 $set = $link->query($sql);
 while($row = $set->fetch_row())
 {
  $arrLabels[$row[0]] = "#".$row[0].": ".$row[1];
 }
 ksort($arrLabels);

 $sql = "SELECT * FROM bookings_products INNER JOIN bookings ON bookings.BookingID=bookings_products.BookingProductBooking WHERE BookingConfirmed>0 ORDER BY BookingProductProduct ASC";
 $set = $link->query($sql);
 while($row = $set->fetch_array(MYSQLI_ASSOC))
 {
  $dm = substr($row['BookingDate'],5,2); // To get the month from YYYY-MM-DD dates
  $arrPeople[$dm][$row['BookingProductProduct']] = $arrPeople[$dm][$row['BookingProductProduct']] + (1 * $row['BookingGroupSize']);
 }
 ksort($arrPeople);

 echo "<pre>"; print_r($arrLabels); echo "</pre>";
 echo "<hr/>";
 echo "<pre>"; print_r($arrPeople); echo "</pre>";

然后我构建了Google Charts JS代码,如下所示:

 <script type="text/javascript">
 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart()
 {
  var data = google.visualization.arrayToDataTable([
   [<?php foreach($arrLabels as $p) { ?>'<?php echo str_replace("'","\'",$p); ?>', <?php } ?>{ role: 'annotation' } ],
   ['Jan', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['01'][$k] ?: '0'; ?>, <?php } ?>],
   ['Feb', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['02'][$k] ?: '0'; ?>, <?php } ?>],
   ['Mar', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['03'][$k] ?: '0'; ?>, <?php } ?>],
   ['Apr', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['04'][$k] ?: '0'; ?>, <?php } ?>],
   ['May', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['05'][$k] ?: '0'; ?>, <?php } ?>],
   ['Jun', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['06'][$k] ?: '0'; ?>, <?php } ?>],
   ['Jul', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['07'][$k] ?: '0'; ?>, <?php } ?>],
   ['Aug', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['08'][$k] ?: '0'; ?>, <?php } ?>],
   ['Sep', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['09'][$k] ?: '0'; ?>, <?php } ?>],
   ['Oct', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['10'][$k] ?: '0'; ?>, <?php } ?>],
   ['Nov', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['11'][$k] ?: '0'; ?>, <?php } ?>],
   ['Dec', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['12'][$k] ?: '0'; ?>, <?php } ?>],
  ]);

  var options = {
   title: 'Product popularity by month - Number of people (based on activity date)',
   isStacked: true,
  };
  var chart = new google.visualization.BarChart(document.getElementById('chart3b'));
  chart.draw(data, options);
 }
 </script>
 <div id="chart3b" style="margin-top:15px; width: 900px; height: 500px; border:solid 1px #000;"></div><hr/>

您可以看到(通过静态HTML复制并粘贴动态PHP输出)此处生成的Google Chart:http://www.stuart-pinfold.co.uk/stats.htm

你会注意到在12月(12月)有195名访客的活动#50(圣诞老人体验)被分配到图表活动#51(“Zombie Air Rifle,Zombie Pistol,10 Clay Shoots”)

我哪里错了?

1 个答案:

答案 0 :(得分:0)

您的第一列值是月份名称,但标题行中的第一个单元格不是“月份”标签。

如果您看一下活动#50(圣诞老人体验)的示例,您可以看到此标签的值在图表的左侧是1步。

确保代替

['#5: Special Offer Ultimate Shooting Package ', '#6: CPSA Shotgun Skills Course',.....],
['Jan', 0,....

看起来像

['Months', '#5: Special Offer Ultimate Shooting Package ',.....],
['Jan', 0,.....

一切都应该正常。