php - 是否可以通过用户点击在单个页面上加载多个谷歌图表

我用一个 HTML 表单做了这个，不是为了时间，而是为了系列，但它会为你做同样的事情：

   <form action="" id="mainForm" name="metric" method="post">
        <select project="Metric" id="MetricList" name="MetricList" >
            <option value = "1"<?php echo (1 == $submittedValue)?" SELECTED":""?>>Satisfaction</option>
            <option value = "2"<?php echo (2 == $submittedValue)?" SELECTED":""?>>Recommendation</option>
            <option value = "3"<?php echo (3 == $submittedValue)?" SELECTED":""?>>Missed Purchase Opportunity</option>
            <option value = "4"<?php echo (4 == $submittedValue)?" SELECTED":""?>>Price</option>
            <option value = "5"<?php echo (5 == $submittedValue)?" SELECTED":""?>>Range</option>
            <option value = "6"<?php echo (6 == $submittedValue)?" SELECTED":""?>>Customer Serivce</option>
            <option value = "7"<?php echo (7 == $submittedValue)?" SELECTED":""?>>Store Atmosphere</option>
            <option value = "8"<?php echo (8 == $submittedValue)?" SELECTED":""?>>Fresh Food</option>
        </select>
        <input type="submit" name="submit" id="submit" value="Submit" />
    </form>

因此，该表单位于我的 HTML 中，靠近页面顶部（但您可以放置在任何对您有意义的地方）。

在我拾取$_POST["MetricList"]并填充代码的顶部附近$submittedValue，这会使表单在刷新时显示所选值，并让我设置一个if语句来选择要运行的 SQL 查询来填充谷歌图表：

if (isset($_POST["MetricList"])) {
   $submittedValue = $_POST["MetricList"];
} else {
    $submittedValue = 1;
}

基本上是为了else = 1处理第一页加载，以确保我们获得将首先显示在图表中的 from 中的内容，因此，在设置好之后，我可以if对其进行声明：

if($submittedValue == 1){
//satisfaction
    while($row = $sql_code->fetch_assoc()) {
        $string .= ", FORMAT(AVG(CASE WHEN store_list = " . $row['NUMB'] . " THEN q1 ELSE NULL END),1) AS '" . $row['NAME'] . "', CONCAT('\'" . $row['NAME'] . "|Score: ',FORMAT(AVG(CASE WHEN store_list = " . $row['NUMB'] . " THEN q1 ELSE NULL END),1),'|Base: ',SUM(CASE WHEN store_list = " . $row['NUMB'] . " THEN 1 ELSE 0 END),'\'') AS '" . $row['NAME'] . "_BASE'";
        $cstores .= "dataTable.addColumn('number', '" . $row['NAME'] . "'); dataTable.addColumn({type: 'string', role: 'tooltip'});";
    }
}
//recommendation
elseif($submittedValue == 2){
    while($row = $sql_code->fetch_assoc()) {
        $string .= ", FORMAT(AVG(CASE WHEN store_list = " . $row['NUMB'] . " THEN q2 ELSE NULL END),1) AS '" . $row['NAME'] . "', CONCAT('\'" . $row['NAME'] . "|Score: ',FORMAT(AVG(CASE WHEN store_list = " . $row['NUMB'] . " THEN q2 ELSE NULL END),1),'|Base: ',SUM(CASE WHEN store_list = " . $row['NUMB'] . " THEN 1 ELSE 0 END),'\'') AS '" . $row['NAME'] . "_BASE'";
        $cstores .= "dataTable.addColumn('number', '" . $row['NAME'] . "'); dataTable.addColumn({type: 'string', role: 'tooltip'});";
    }
}
//mpo
elseif($submittedValue == 3){
    while($row = $sql_code->fetch_assoc()) {
        $string .= ", CAST(((SUM(CASE WHEN LOWER(`q3`) = 'no' AND store_list = " . $row['NUMB'] . " THEN 1 ELSE 0 END)/SUM(CASE WHEN store_list = " . $row['NUMB'] . " THEN 1 ELSE 0 END))*100) as decimal (10,1)) AS  '" . $row['NAME'] . "', CONCAT('\'" . $row['NAME'] . "|Percent: ',CAST(((SUM(CASE WHEN LOWER(`q3`) = 'no' AND store_list = " . $row['NUMB'] . " THEN 1 ELSE 0 END)/SUM(CASE WHEN store_list = " . $row['NUMB'] . " THEN 1 ELSE 0 END))*100) as decimal (10,1)),'%|Base: ',SUM(CASE WHEN store_list = " . $row['NUMB'] . " THEN 1 ELSE 0 END),'\'') AS '" . $row['NAME'] . "_BASE'";
        $cstores .= "dataTable.addColumn('number', '" . $row['NAME'] . "'); dataTable.addColumn({type: 'string', role: 'tooltip'});";
    }
}

等等......（不用担心$row['NUM']and $row['NAME']，这只是为了构建一个添加的过滤器，我在商店也可以过滤选择 - 多过滤器！）

然后我将该 SQL 片段弹出到我的查询中：

<!--https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart-->
<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(drawChart1);

function drawChart1() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Month');
    //loop from above for store and store base
    <?php echo($cstores); ?>
    dataTable.addRows([

    <?php 

        $sql = "SELECT
                QUOTE(DATE_FORMAT(date_submitted,'%b-%y')) AS 'Month'
                ". $string ."
            FROM data 
            WHERE store_list IN (" . $user_stores . ")
            GROUP BY YEAR(date_submitted), MONTH(date_submitted)
            ORDER BY YEAR(date_submitted) ASC, MONTH(date_submitted) ASC";

        $query = mysqli_query($conn,$sql);
        foreach( $query as $key => $array ) {
            echo("[");
            foreach( $array as $attribute => $value ) {
                echo str_replace("|","\\n",$value) . ","; //couldn't put \\n in the SQL above as it rendered in the output and broke it, so replacing the | here with \\n so it renders properly in the chart
            }
            echo("],");
        }
    ?> 

    ]);

   var options = {
      title: '',
      vAxis: {
        minValue: 0,
        maxValue: 10,
        <?php if($submittedValue == 3){ // adjust chart scale and axis if MPO
            echo("format: '#\'%\'',");
            echo("title: 'Percent',");
        }
        else{
            echo("title: 'Score 0-10'");
        }
        ?>
        },
      legend: {
        position: 'bottom',
        },
      pointSize: 10,
      pointShape: 'diamond'
    };

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

    chart.draw(dataTable, options);
  }

我的图表有一些额外的复杂性，因为我有 HTML 工具提示来推送更多数据（需要显示每个项目的基础和价值），但你应该从这里得到这个想法。

php - 是否可以通过用户点击在单个页面上加载多个谷歌图表

问题描述

解决方案

推荐阅读