Google Chart API doesn't work with PHP? - javascript

The Google API Chart doesn't take in the value I echo using php can anyone enlighten me to what I'm doing wrong?
This is where the user picks the job chart they want to view:
<form class="form-horizontal form-select-chart" method="post" action="analytics.php">
<select name="chartname">
<?php
$sel_user = "select * from tbl_jobs";
$run_user = mysqli_query($con, $sel_user);
while($row = mysqli_fetch_assoc($run_user))
{
echo "<option value=\"" . $row['Job_ID'] . "\">" . $row['Job_Name'] . "</option>";
}
?>
</select>
<br>
<input type="submit" name="make_chart" value="Create the Chart" class="btn btn-primary" />
</form>
Here is where the data should be processed:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
<?php
if(isset($_POST['make_chart'])){
$jid = mysqli_real_escape_string($con,$_POST['chartname']);
$sel_user = "select * from tbl_jobs WHERE `ID` = '$jid'";
$run_user = mysqli_query($con, $sel_user);
while($row = mysqli_fetch_assoc($run_user))
{
$jname = $row['Job_Name'];
$overall_vacant = $row['Vacant'];
$overall_filled = $row['Filled'];
}
settype($overall_vacant, "integer");
settype($overall_filled, "integer");
}
?>
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Vacant Positions', <?php echo $overall_vacant; ?>],
['Filled Positions', <?php echo $overall_filled; ?>],
]);
// Set chart options
var options = {'title':'<?php echo $jname; ?>',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Here is where the data to be displayed:
<?php
if(isset($_POST['make_chart'])){
echo"<div align=\"center\" id=\"chart_div\"></div>";
}
unset($_POST['make_chart']));
?>

Upon further investigation I've found out there's something wrong in my MySQL Query! I should've put "Job_ID" instead of "ID" which are two separate things!
My table goes like this:
ID | Job_ID | Job_Name | Vacant | Filled
1 0 Overall 0 0
Which in turn resulted to a blank chart! How dumb of me! Thanks to MECU for the heads up!

Related

how to add links to google pie chart slices and send that variable to new page once clicked

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var jsvar = '<?=$count?>';
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Rating'],
['Good', <?php echo $count; ?>],
['Average', <?php echo $count1; ?>],
['Bad', <?php echo $count2; ?>],
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Windoek' , 'width':400, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
window.open("table.php?myvar=" + encodeURI(selection));
});
I would like to get the selected task header and send it to new page ......
Example , If someone clicks the bad pie chart slice , The variable Bad and Title of pie chart should be send via link to new page for processing ....if someone selects Good than the variable Good with title of pie chart send to new page

Problem with the appearance of geographical area points in map with google graph

I try to appear some geographical data as points (spots) in a global map.When i run the code -in the browser- are appearded the statistical results as text , the global map but on the they are not appeared.Itis must noted that the main code was taken from the code which implement the piechart.In the follow lines i present the code:
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>plus2net.com : Pie chart using data from MySQL table</title>
</head>
<body >
<?Php
//
require "connection.php";// Database connection
if($stmt = $link->query("SELECT Nationality_Name,Count FROM nationality_arrivals")){
echo "No of records : ".$stmt->num_rows."<br>";
$php_data_array = Array(); // create PHP array
echo "<table>
<tr> <th>Nationality_Name</th><th>Count</th></tr>";
while ($row = $stmt->fetch_row()) {
echo "<tr><td>$row[0]</td><td>$row[1]</td></tr>";
$php_data_array[] = $row; // Adding to array
}
echo "</table>";
}else{
echo $link->error;
}
//print_r( $php_data_array);
// You can display the json_encode output here.
echo json_encode($php_data_array);
// Transfor PHP array to JavaScript two dimensional array
echo "<script>
var my_2d = ".json_encode($php_data_array)."
</script>";
?>
<div id="chart_div"></div>
<br><br>
<a href=https://www.plus2net.com/php_tutorial/chart-database.php>Pie Chart from MySQL database</a>
</body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
<div id="chart_div"></div>
<br><br>
<a href=https://www.plus2net.com/php_tutorial/chart-database.php>Pie Chart from MySQL database</a>
</body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['Nationality_Name','string'],['Count','number']
]);
var options = {title:'plus2net.com : How the tutorials are distributed',
width:600,height:500};
// Instantiate and draw the chart
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
}
</script>
</html>

google organisation chart : Unable to display the organisation chart

Here is my database snap:
link
Here is my code:
<?php
$db=mysqli_connect("localhost","root","","organisation"); //db connection
$query=mysqli_query($db, "SELECT name,below_whom FROM org"); //fetch data
if($query){
$data=[];
while($org_data=mysqli_fetch_assoc($query)){
$data []= [$org_data["name"],$org_data["below_whom"]]; //syntax of
associative array = $variable["value"]
}
#echo '<pre>'; print_r($data); echo '</pre>';
}
else {
"Error".mysqli_error();
}
?>
<html>
<head></head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'name');
data.addColumn('string', 'below_whom');
data.addColumn('string', 'ToolTip');
data.addRows(<?php echo json_encode($data); ?>);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true});
}
</script>
<div id="chart_div"></div>
</body>
</html>
I have been going through the documentation for quite sometime now and I am still clueless. I guess error is somewhere near addRows but I'm unable to trace it.
It seems to me that there is no issue with your code, however the issue is in your data. Your queried data will be like this:
|name |below_whom|
|-------|----------|
|Pratik | |
|-------|----------|
|Q |FTA |
|-------|----------|
So you see, the "Q" has "FTA" as the boss, but google organization chart could not find "FTA". If you change "FTA" to "Pratik", you will see magic happens.

Google charts change table if only one type of value

i have a issue with google charts
I want to have ColumnChart when have multiple (more than one) types of data, and change it to PieChart when have only one value
This is my code:
this is how i get the data:
var <?php echo $divName;?>_data = new google.visualization.DataTable();
how I(now) set the PieChart:
var <?php echo $divName;?>_chart = new google.visualization.PieChart(document.getElementById('<?php echo $divName;?>'));
and for ColumnChart:
var <?php echo $divName;?>_chart = new google.visualization.ColumnChart(document.getElementById('<?php echo $divName;?>'));
and the echo the chart
<?php echo $divName;?>_chart.draw(<?php echo $divName;?>_data
I know it should be a simple if (<?php echo $divName;?>_chart) < 2types then draw PieChart but i don't know how to get the information about how many types have the DataTable
Can someone help me? I'll be very grateful

Can I access values generated by google charts

Currently I pass variables to the api like so:
<script type="text/javascript">
mobileNav();
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
//Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Attendance');
data.addRows([
['Present', <?php echo $present; ?>],
['Absent', <?php echo $absent; ?>],
['Directed Study', <?php echo $directed; ?>],
['Medical Certificate', <?php echo $medical; ?>],
['Self Certificate', <?php echo $selfcert; ?>],
['Authorised Absence', <?php echo $authorised; ?>],
]);
// Set chart options
var options = {'title':'Your Attendance'};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
I get the results and everything is good. I would like to access the % values generated by the pie chart. Is there a way this can be achieved?
If you want to access on your values generated by your pie chart , you need to retrieve data on your dataTable().
You need to use getFormattedValue method.
Documentation :
DataTable API : https://developers.google.com/chart/interactive/docs/reference#DataTable
Method : getFormattedValue(rowIndex, columnIndex)

Categories