CODEWITHSUNDEEP
phpmysqlgoogle-visualization
curtisp
curtisp

Reputation: 2325

Google Chart - how to user php variable to change data source

Using basic Google Chart php/mysql/javascript/html setup, where php used to retrieve data from mysql, javascript to setup chart, and then html and div pull chart in html.

But I want to change the datasource based on a user input. So i thought i would use a php variable sent via url.

I thought I would watch for the variable in my 'dbconnect.php' file, which is included in the php file that retrieves mysql data, using $_GET['var'], to change datasource based on the variable sent in url eg php?var (using a switch statement). This works fine, I can see var sent in url with an echo.

However, I expected that the javascript url: "getDataUsers.php" part would run the getDataUsers.php file to get the data from different datasource based on url passed variable. But instead nothing happens.

What am i missing? Thanks.

My index.php file:

<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>

My dbconnect.php file:

<?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?>

My 'getDataUsers.php' file:

<?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;

?>

Upvotes: 0

Views: 1511

Answers (1)

asgallant
asgallant

Reputation: 26340

You aren't passing any data with the AJAX call. You need to set the data parameter of the AJAX call to include a site parameter:

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

Upvotes: 1

Related Questions