CODEWITHSUNDEEP
phpjavascriptvariablesloopsreset
Chris
Chris

Reputation: 59531

Increment PHP variable in Javascript loop

I am trying to make a Graph (via Google Charts) that displays the user activity on my server for the last 24 hours. The data for the user activity is fetched every 15 minutes (via cron) and stored on a local database. Since the database is updated every 15 minutes, the graph is not static.

The graph obviously needs some numbers as input so that it can draw. Here is an simple example of the javascript works:

dataTable.setValue(0, 0, 0);
dataTable.setValue(1, 0, 25.0);
dataTable.setValue(2, 0, 50.0);
dataTable.setValue(3, 0, 75.0);
dataTable.setValue(4, 0, 100.0);

The above code would draw a diagonal line starting at (x,y) = (0,0) and ending at (x,y)=(4,100)

So what I am trying to do now is to do a loop 96 times (an update per 15 minutes for 24 hours = 15 x 24 = 96).

So here is what I tried:

for(x=0;x<96;x++){ //copy PHP array into javascript array
  javaArray[x] = <?php echo $sqlArray[$count]['clients_online'];?>;
  <?php $cnt++; ?>
}
for (var x=0;x<96;x++){ //draw graph
      dataTable.setValue(x, 0, javaArray[x]);
}

In the 1st for-loop I am passing the data (fetched from the database) from the PHP array into a javascript array. When that's done I draw the graph in the 2nd for-loop.

The $count variable increments properly within the for-loop but my problem is that it resets after each loop.

I realize that PHP is server-side while javascript is client-side and thus the problem, but how can I fix this?

Thanks.

Upvotes: 0

Views: 2659

Answers (3)

Phil
Phil

Reputation: 7106

For these type of things it's best to do an Ajax call. This allows decoupling of the front-end and back-end code, which was one of your concerns to begin with.

Here is the PHP that you can use to dump the variable. Let's call it ajax-data-table.php. If you have a different layout for your sqlArray, you can change it accordingly.

<?php

$sqlArray = array(
    0 => 0.0,
    1 => 25.0,
    2 => 50.0,
    3 => 75.0,
    4 => 100.0,
);

echo json_encode($sqlArray, JSON_FORCE_OBJECT);

When it renders it will look like this:

{"0":0,"1":25,"2":50,"3":75,"4":100}

You can then use JS to make the call using AJAX. Assuming you have jQuery:

request = $.getJSON('ajax-data-table.php');
var dataTable = request.responseText.evalJSON();

Upvotes: 1

Enobe
Enobe

Reputation: 56

First of all, I would suggest having actual time stored in DB (so Google graph understands it too and can draw axis). But to solve your data passing from php to JS problem you could just json_encode your array, pass it to Javascript like:

<?php
  $data = array (
    array('Iterator', 'Visitors'),
    array(1, 25),
    array(2, 23),
    array(3, 17),
    array(4, 22),
    array(5, 15),
    array(6, 19),
    array(7, 17),
    array(8, 19),
  );
?>

And JS/HTML side

var dataTable = <?= json_encode($data); ?>; // <?= is short for <?php echo - always available from 5.4

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable(dataArray);

    var options = {
        title: 'Visitors by 15min iterator'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

JSFiddle example is here: http://jsfiddle.net/hTKGK/1/

Upvotes: 0

user20232359723568423357842364
user20232359723568423357842364

Reputation: 4634

You can loop through the $sqlArray, use the key as the counter, and output the js in each iteration.

<?php
foreach($sqlArray as $count => $val) 
{
?>
    dataTable.setValue(<?php echo $count; ?>,0,<?php echo $val['clients_online']; ?>);
<?php
}
?>

This will work provided that your data similar to the array below

Array
(
  [0] => Array
    (
        [clients_online] => 44
    )

  ...
  [95] => Array
    (
        [clients_online] => 66
    )

And your expected output should look like this

  dataTable.setValue(0,0,44);
  ...
  dataTable.setValue(95,0,66);

Upvotes: 1

Related Questions