Question

使用基本的谷歌图表php / mysql / javascript / html设置，其中php用于从mysql检索数据，javascript设置图表，然后html和div拉图表在html中。

但我想根据用户输入更改数据源。所以我想我会使用通过url发送的php变量。

我以为我会在我的'dbconnect.php'文件中查看变量，该文件包含在使用$ _GET ['var']检索mysql数据的php文件中，根据发送的变量更改数据源url例如php？var（使用switch语句）。这工作正常，我可以看到带有回声的url发送的var。

但是，我预计javascript url：“getDataUsers.php”部分将运行getDataUsers.php文件，以根据url传递的变量从不同的数据源获取数据。但没有任何反应。

我缺少什么？谢谢。

我的index.php文件：

<html> 
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript">

    //added javascript variable for site from php url
    **var vsite =  "<?php echo $_GET['site']; ?>";**

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChartUsers);

    function drawChartUsers() {
      var jsonDataUsers = $.ajax({
          url: "getDataUsers.php",
          dataType:"json",
          async: false**,
          //added data value for site from js variable vsite
    data: {site: vsite }**
          }).responseText;  
      // Create our data table out of JSON data loaded from server.
      var dataUsers = new google.visualization.DataTable(jsonDataUsers);
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('users_chart_div'));
      chart.draw(dataUsers, {
        title:'# New Registered Users', 
        width: 1000, 
        height: 300,
        legend : 'none',
        vAxis:{title:'# users',textStyle:{color: '#005500',fontSize: '10', paddingRight: '100',marginRight: '100'}},
        hAxis: { title: 'Date', textStyle: { color: '#005500', fontSize: '10', paddingRight: '100', marginRight: '100'} }});
    }       
    </script>
  </head>

  <body>
    <p>
    <a href="index.php?site=a">a</a>-<a href="get_details.php?site=a">details a</a></br>
    <a href="index.php?site=b">b</a>-<a href="get_details.php?site=b">details b</a></br>
    <a href="index.php?site=c">c</a>-<a href="get_details.php?site=c">details c</a></br>
    <a href="index.php?site=d">d</a>-<a href="get_details.php?site=d">details d</a></br>
    </p>

    <!--Div that will hold the charts-->

    <div id="users_chart_div"></div>

  </body>
</html>

我的dbconnect.php文件：

<?php

    $site = $_GET['site'];
    //echo "<p>I connected. The variable is: " . $site . "</p>";

    switch ($site)
    {
    case 'a':
        $server = 'server.com';
        $username='a';
        $password='a';
        $database='a';
      break;
    case 'b':
        $server = 'server.com';
        $username='b';
        $password='b';
        $database='b';
      break;
    case 'c':
        $server = 'server.com';
        $username='c';
        $password='c';
        $database='c';
      break;
    case 'd':
        $server = 'server.com';
        $username='d';
        $password='d';
        $database='d';
      break;      
    default:
      echo "No database selected";
    } 

    mysql_connect($server,$username,$password);
    @mysql_select_db($database) or die( 'Unable to select database');

php?>

我的'getDataUsers.php'文件：

<?php

    include 'dbconnect.php';

    $query =mysql_query("SELECT 
        YEAR(created) AS Created_Year,
        MONTH(created) AS Created_Month, 
        DAY(created) AS Created_Day,
        count(id) AS NumUsers
        FROM users
        Group by 
        YEAR(created),
        MONTH(created),
        DAY(created)
        ORDER BY
        YEAR(created) ASC,
        MONTH(created) ASC,
        DAY(created) ASC");

    $table = array();
    $table['cols'] = array(
        /* define your DataTable columns here
         * each column gets its own array
         * syntax of the arrays is:
         * label => column label
         * type => data type of column (string, number, date, datetime, boolean)
         */
        array('label' => 'Date', 'type' => 'string'),
        array('label' => '# Users', 'type' => 'number')
    );

    $rows = array();
    while($r = mysql_fetch_assoc($query)) {
        $temp = array();
        // each column needs to have data inserted via the $temp array
        $temp[] = array('v' => $r['Created_Year'] . '-' . $r['Created_Month']. '-' . $r['Created_Day']);
        $temp[] = array('v' => (int) $r['NumUsers']); 
        // insert the temp array into $rows
        $rows[] = array('c' => $temp);
    }

    // populate the table with rows of data
    $table['rows'] = $rows;

    // encode the table as JSON
    $jsonTable = json_encode($table);

    // set up header; first two prevent IE from caching queries
    header('Cache-Control: no-cache, must-revalidate');
    header('Content-type: application/json');

    // return the JSON data
    echo $jsonTable;

?>

Answer 1

您没有通过AJAX调用传递任何数据。您需要设置AJAX调用的data参数以包含site参数：

var jsonDataUsers = $.ajax({
    url: "getDataUsers.php",
    dataType:"json",
    async: false,
    data: {
        site: 'a' // set the site parameter here as appropriate
    }
}).responseText;

Google Chart - 如何使用php变量来更改数据源

1 个答案: