I'm wondering how I can remove the trailing comma in this foreach loop in my PHP script running inside of javascript.
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country','Blocks'],
<?php
foreach ($bans as $key => $value)
print"['$key', $value],\n";
?>
]);
var options = {
backgroundColor : '#555555',
colors : ['#FFFF00', '#FF0000']
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
This causes a problem as I get a trailing comma, I've tried an implode method and rtrim method but none of those appear to be working (I've also never used those functions so I may be doing it wrong)
My implode method was:
<?php
$resultstr = array();
foreach ($bans as $key => $value)
print"['$key', $value],\n";
$resultstr = implode(",", $resultstr);
?>
My rtrim method was:
<?php
$resultstr = array();
foreach ($bans as $key => $value)
print"['$key', $value],\n";
echo rtrim($resultstr, ",");
?>
When compiled it looks like this:
<html>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country','Blocks'],
['Japan', 11],
['United States', 45],
['Argentina', 1],
]);
var options = {
backgroundColor : '#555555',
colors : ['#FFFF00', '#FF0000']
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
What you should do instead of trimming the string afterwards is not generating the trailing comma at all:
$not_first = false;
foreach ($bans as $key => $value) {
if ($not_first) {
print(", ");
}
$not_first = true;
print "['$key', $value]\n";
}
This could be another approach:
var data = google.visualization.arrayToDataTable(<?php
$table = array(array('Country', 'Blocks'));
foreach($bans as $key => $value) {
$table[] = array($key, $value);
}
echo json_encode($table);
?>);
I often use json_encode so I don't have to take care of escaping all the values.
You missed something:
echo rtrim($resultstr, ",");
You could also do:
echo substr($resultstr, 0, -1);
You could create an array that contains the [key, value] pieces and then glue them with implode:
PHP
<?php
$arr = array();
$arr['key1'] = 'val1';
$arr['key2'] = 'val2';
$arr['key3'] = 'val3';
function PrepareValues(&$item, $key) {
$item = "['$key', $item]";
}
array_walk_recursive($arr, "PrepareValues");
$resultstr = implode(",\n", $arr);
print($resultstr);
?>
Output
['key1', val1],
['key2', val2],
['key3', val3]
Related
Without this xmlhttprequest, the gauge chart is working fine and showing up like here
But after I add this code in index.php, the chart suddenly stop showing up which happens when there is something wrong (even if there is no error that is being detected) but I can't find out where...
Index.php Code for automatically updating/ refreshing the gauge chart data with interval without reloading the page.
<?php
include("connection.php");
?>
<html>
<head>
<title>
</title>
</head>
<body>
<div class="container">
<div id="link_wrapper">
</div>
</div>
</body>
</html>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("link_wrapper").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "server.php", true);
xhttp.send();
}
setInterval(function(){
loadXMLDoc();
// 1sec
},1000);
window.onload = loadXMLDoc;
</script>
Server.php Code for the dynamic gauge chart
<?php
$connection = mysqli_connect('localhost', 'root', '', 'adminpanel');
$query = 'SELECT * FROM tbl_waterquality ORDER BY id DESC';
$query_run = mysqli_query($connection, $query);
while ($row = mysqli_fetch_array($query_run)) {
?>
<html>
<head>
<div class="justify-content-between">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Temperature', <?php echo $row['temperature'] ?>],
['pH', <?php echo $row['pH'] ?>],
['DO', <?php echo $row['DO'] ?>],
['Turbidity ', <?php echo $row['Turbidity'] ?>]
]);
<?php
}
?>
var options = {
width: 500,
height: 200,
minorTicks: 5,
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px,; margin-top:30px"></div>
</body>
</html>
The way to do this properly is to only use the PHP to get the DATA and then run it in the page.
Return JSON from your database and pass it to the function that executes the visualization.
This is your NEW server.php - it is complete
<?php
header("content-type: application/json");
$connection = mysqli_connect('localhost', 'root', '', 'adminpanel');
$query = 'SELECT * FROM tbl_waterquality ORDER BY id DESC';
$query_run = mysqli_query($connection, $query);
$row = mysqli_fetch_array($query_run); // assuming ONE result
echo <<<EOT
[
["Label", "Value"],
["Temperature", $row["temperature"]],
["pH", $row["pH"] ],
["DO", $row["DO"] ],
["Turbidity", $row["Turbidity"]]
]
EOT
?>
and use this page to call it
Uncomment the commented fetch after testing
<!doctype html>
<html>
<head>
<meta charset="utf8" />
<title>Gauge</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
/* ------------- Remove when you uncomment the fetch -----------*/
let temp = 25; // testdata
const arr = [
['Label', 'Value'],
['Temperature', temp],
['pH', 7.2],
['DO', 60],
['Turbidity ', 10]
]; // testdata
/* ------------- END Remove -----------*/
let chart;
const options = {
width: 500,
height: 200,
minorTicks: 5,
};
const drawChart = arr => {
if (!chart) chart = new google.visualization.Gauge(document.getElementById('chart_div')); // only do this once
var data = google.visualization.arrayToDataTable(arr);
chart.draw(data, options);
}
const getData = () => {
/* UNCOMMENT after test
fetch('server.php')
.then(response => response.json())
.then(arr => {
drawChart(arr);
setTimeout(getData, 2000); // run again
});
*/
/* REMOVE AFTER TEST */
drawChart(arr); // remove after test
arr[1][1] = ++temp
setTimeout(getData, 5000); // run again - remove after test
/* END REMOVE */
};
window.addEventListener("load", () => { // when page loads
google.charts.load('current', {
'packages': ['gauge']
});
google.charts.setOnLoadCallback(getData); // start
})
</script>
</head>
<body>
<div class="justify-content-between">
<div id="chart_div" style="width: 400px; height: 120px,; margin-top:30px"></div>
</div>
</body>
</html>
If you need to create an array of all rows, here is how to loop
http://sandbox.onlinephpfunctions.com/code/8c371c0da3a5e7a91bcf8cf1e961f822c0755e57
$arr = array(array( "Label", "Value"));
while ($row = mysqli_fetch_array($query_run)) {
array_push($arr,
array("Temperature", $row["temperature"]),
array("pH", $row["pH"] ),
array("DO", $row["DO"] ),
array("Turbidity", $row["Turbidity"])
);
}
echo json_encode($arr)
I've done quite a bit of searching and have found solutions for issues similar to my problem but nothing that has worked so far. Any help is appreciated.
I am attempting to create a Google Line Chart from data I am querying from my database and then parsing to JSON. My query and JSON looks good but when I insert it into the DataTable the web page is blank.
This the JSON output I have:
[["date","percentage"],["0000-00-00 00:00:00",28.18],["2015-01-06 06:00:01",93.65],["2015-01-07 06:00:01",85.9],["2015-01-08 06:08:43",89.25],["2015-01-09 06:08:42",99.26],["2015-01-10 14:50:37",99.48],["2015-02-06 06:00:01",93.88],["2015-02-07 06:00:01",89.15],["2015-02-08 06:08:51",89.55],["2015-02-09 06:09:25",98.94],["2015-02-09 17:26:50",98.94],["2015-02-10 06:10:55",99.06],["2015-03-07 06:11:32",85.7],["2015-03-08 06:07:58",89.86],["2015-03-10 06:11:04",99.06],["2015-04-06 14:19:26",82.17],["2015-04-07 06:11:47",85.8],["2015-04-08 06:10:01",89.76],["2015-04-10 06:10:53",100],["2015-05-06 16:25:01",91.21],["2015-05-07 06:11:12",85.7],["2015-05-08 06:08:53",89.25],["2015-05-09 22:35:40",97.77],["2015-05-10 06:10:39",99.17],["2015-05-10 21:28:01",98.85],["2015-06-06 06:00:02",90.84],["2015-06-07 06:11:05",85.9],["2015-06-09 06:09:32",97.88],["2015-06-10 06:10:55",99.79],["2015-07-06 06:00:01",91.33],["2015-07-07 06:10:35",85.09],["2015-07-08 06:09:36",89.45],["2015-07-09 06:08:55",98.2],["2015-07-10 06:12:44",5.94],["2015-08-06 06:00:01",91.58],["2015-08-08 06:09:03",89.05],["2015-08-09 06:09:23",97.03],["2015-08-09 15:54:27",97.67],["2015-09-06 06:00:01",90.96],["2015-09-07 06:12:33",84.99],["2015-09-08 06:08:54",89.15],["2015-09-09 06:12:48",99.26],["2015-09-09 14:29:39",95.02],["2015-10-06 06:00:01",91.09],["2015-10-07 06:13:13",89.35],["2015-10-08 06:08:42",89.25],["2015-10-09 06:09:40",99.47],["2015-10-09 17:14:20",99.47],["2015-11-05 06:00:01",97.41],["2015-11-06 06:00:01",85.47],["2015-11-07 06:12:17",89.45],["2015-11-08 06:10:45",89.45],["2015-12-05 06:00:01",96.7],["2015-12-06 06:00:01",90.72],["2015-12-07 06:12:22",88.74],["2015-12-09 06:09:39",99.58]]
When I insert this into the JSON Validator at https://jsonformatter.curiousconcept.com it says it is valid JSON and when I hard code it in everything seems to work..
Here is my code:
<?php
$dbhost="localhost";
$dblogin="root";
$dbpwd="password!";
$dbname="qaDB";
$db = mysql_connect($dbhost,$dblogin,$dbpwd);
mysql_select_db($dbname);
$SQLString = "SELECT date, percentage FROM reports WHERE RTYPE_ID=1";
$result = mysql_query($SQLString);
$num = mysql_num_rows($result);
# set heading
$data[0] = array('date','percentage');
for ($i=1; $i<($num+1); $i++)
{
$data[$i] = array(substr(mysql_result($result, $i-1, "date"), 0, 20),
(float) mysql_result($result, $i-1, "percentage"));
}
echo json_encode($data);
mysql_close($db);
?>
Here is the page to create the Google line chart.
<html>
<head>
<title>JSON Chart Test</title>
<!-- Load jQuery -->
<script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>
<!-- Load Google JSAPI -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
// var newWin = window.open();
var jsonData = $.ajax({
url: "legacyDashboardJSON.php",
dataType: "json",
async: false
}).responseText;
//var newStr = jsonData.substring(1, jsonData .length-1);
//newWin.document.write(jsonData);
// var parsedData = JSON.parse(newStr);
//var obj = JSON.stringify(newStr);
var data = google.visualization.DataTable(jsonData);
var options = {
title: 'Stats'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div">
</div>
</body>
</html>
Thanks!
UPDATE Found the solution.
Here's the code:
<?php
$DB_NAME = 'qaDB';
$DB_HOST = 'localhost';
$DB_USER = 'root';
$DB_PASS = '!';
$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$result = $mysqli->query('SELECT date,percentage FROM reports');
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'date', 'type' => 'string'),
array('label' => 'percentage', 'type' => 'number')
);
foreach($result as $r) {
$temp = array();
$temp[] = array('v' => (string) $r['date']);
$temp[] = array('v' => (int) $r['percentage']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
mysql_close($mysqli);
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// 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(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "legacyDashboardJSON.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Metrics',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
You need to provide a success function in your .ajax call that will execute when the data returns. Anything that needs the data should be placed inside this function, or passed from within the success function to another function. You could also use .done() on the end of your .ajax call and place the rest of your script in there.
I'm having trouble parsing my php generated json array to a google chart. I have included Jquery, but some how i can't figure out how to parse my json data. I run a MySQL query to retrieve data from the database. Then i encode the query result with php json_encode.
I use ajax to get the json data from my php file.
getData.php:
<?php
function get_meta_values( $key, $type = 'workout', $status = 'publish' ) {
global $wpdb;
$user_ID = get_current_user_id();
if ( empty( $key ) )
return;
$r = $wpdb->get_results(
$wpdb->prepare( "
SELECT pm.meta_value, p.post_date FROM {$wpdb->postmeta} pm
LEFT JOIN {$wpdb->posts} p ON p.ID = pm.post_id
INNER JOIN $wpdb->term_relationships
ON (p.ID = $wpdb->term_relationships.object_id)
INNER JOIN $wpdb->term_taxonomy
ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
WHERE pm.meta_key = '%s'
AND $wpdb->term_taxonomy.taxonomy = 'category'
AND $wpdb->term_taxonomy.term_id IN (4)
AND p.post_status = '%s'
AND p.post_type = '%s'
AND p.post_author = $user_ID
ORDER BY pm.meta_value DESC ",
$key,
$status,
$type));
if ( $r ) {
$user_ids = wp_list_pluck( $r, 'post_date' );
cache_users( $user_ids );
}
return $r;
}
$workout_history = get_meta_values( '1_rep', 'workout' );
echo json_encode($workout_history);
?>
The page that holds the chart:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "http://localhost:41175/wp-content/themes/wordpress-bootstrap-master/getData.php",
dataType: "json",
async: false
}).responseText;
var obj = window.JSON.stringify(jsonData);
var data = google.visualization.arrayToDataTable(obj);
var options = {
title: 'Test'
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
When i try to echo my json file it looks like this:
[
{
"meta_value":"999",
"post_date":"2014-04-12 18:21:51"
},
{
"meta_value":"1",
"post_date":"2014-04-12 18:58:20"
}
]
Any suggestions to what i am doing wrong?
https://developers.google.com/chart/interactive/docs/reference#google.visualization.arraytodatatable
Seems that your JSON dataset is incorrect for use with that method. It should be (in javascript):
var data = [
['metavalue', 'post_date'],
['999', '2014-04-12 18:21:51'],
['1', '2014-04-12 18:58:20']
]
which in JSON equals to:
[["metavalue","post_date"],["999","2014-04-12 18:21:51"],["1","2014-04-12 18:58:20"]]
As I have no clue where $workout_history is coming from I can't help you out with how get to that.
Your object graph is incorrect before you return $r do this:
$results = array();
$result[] = array_values($r);
return $result;
alternatively you can build an your array of array like this:
$results = array();
$result[] = array($r['message_type'], $r['post_date']);
return $result;
I am doing this little project. Everything seems working , but I want to make even better.
I have code
-Part1 -takes date from database and converts to JSON
<?php
$sth = mysql_query("select Value, Stats from table");
$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'Stats', 'type' => 'string'),
array('label' => 'Value', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$temp[] = array('v' => (string) $r['Stats']);
$temp[] = array('v' => (int) $r['Value']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);
?>
-Part 2 Draws Google Bar chart and shows it on page
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var options = {
legend: {position: 'none'},
bar: {groupWidth: "85%"},
colors:['#4A9218'],
hAxis: {viewWindowMode: 'explicit'},
} };
var chart = new google.visualization.BarChart(document.getElementById('charts_div'));
chart.draw(data, options);
}
</script>
<div class='data' id="charts_div" style="width:100%; height:200px"></div>
-My Qyestion
How to convert (combine) Part2 code to php. I tried echo around lines, but unsuccesfully
I want to assign Part2 as Php variable $Graph1 and then echo $graph1 on page, because It works better with my other code, so its consistent.
So I would like something like:
<?php
Part1
?>
<?php
$graph1=."<script>...</script>"
$graph = "<div class='data'><ul>" . $graph1 . "</ul></div>
echo $graph
?>
Why don't you just add it after the ?> ?
In PHP you can include HTML like this
<?php
// My PHP Code
echo "test";
?>
<H1>My Title in HTML</H1>
<script> ... </script>
<?php
echo "test2";
?>
You can also include PHP into HTML
<script> var a = "<?php echo $somevariable; ?>"</script>
You can also wrap your HTML code into a PHP variable care about the ". You will need to escape it or us single quote instead:
<?php
$myHTML = "<script> window.location=\"mylocation.com\";</script>";
$myHTML = "<script> window.location= 'mylocation.com' ;</script>";
...
echo $myHTML;
?>
I'm having trouble displaying Google Charts correctly. I'm trying to do this with Ajax and PHP.
This is the code that is loaded on the page:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type='text/javascript'>
// Dummy Array for now
<?php
$php_array = array(
array('Terms', 'Visits'),
array('test', 25),
array('joke', 25),
array('funny', 50),
);
//Convert the PHP Array into a Javascript Array
$js_array = json_encode($php_array);
echo "var arrTableData = ". $js_array . ";\n";
?>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts(){
// Each chart function
$.getJSON('charts_ajax.php',{'a' : 'terms', 'd' : arrTableData }, function(data){
if(data){
initGoogleChart(data)
}else {
console.log("There is no data coming back");
}
});
}
function initGoogleChart(data){
var tableData = google.visualization.arrayToDataTable(data);
var options = {
title: 'Title'
};
var chart = new google.visualization.PieChart(document.getElementById('terms-table'));
chart.draw(tableData, options);
}
</script>
and on the charts_ajax.php file there is this data:
<?php
if ($_GET['a'] == "terms") {
$arrTableData = $_GET['d'];
echo json_encode($arrTableData);
}
?>
This is what the Chart is outputting:
Can anybody shed some light on this and possible help me fix it please?
Have you tried converting the data into a Google Charts JSON format? Here's an example.
foreach($arrTableData as $r2) {
if(!isset($google_JSON2)) {
$google_JSON2 = "{\"cols\": [";
$column = array_keys($r2);
foreach($column as $key=>$value) {
$google_JSON_cols2[]="{\"id\": ".$key.", \"label\": \"".$value."\", \"type\": \"string\"}";
}
$google_JSON2 .= implode(",",$google_JSON_cols2)."],\"rows\": [";
}