google organisation chart : Unable to display the organisation chart - javascript

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.

Related

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>

PHP/JS - Google Graph - Echoing data out

I've looked at other questions similar to what I am asking however they are not what I need/trying to substitute the answer into my code.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Stock Price', 'Date'],
//['2014', 3000],
<?php
$DataSearchSQL = "SELECT * FROM stocklog WHERE status = 1 ORDER BY ID DESC LIMIT 7";
$DataSearchResult = mysqli_query($dbconfig,$DataSearchSQL);
while($DataSearchRow=mysqli_fetch_array($DataSearchResult,MYSQLI_ASSOC)) {
$data = $DataSearchRow["StockPrice"];
$timestamp = $DataSearchRow["Time"];
$splitTimeStamp = explode(" ",$timestamp);
$date = $splitTimeStamp[0];
$info = "['{$date}', {$data}]";
echo json_encode($info);
}
?>
]);
I believe I am messing something up with $info and json_encode however I am not sure what to do, help is much appreciated.

Google Chart API doesn't work with PHP?

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!

Google visualization table doesn't understand my code

Can anyone point out what I'm doing wrong here, i'm literally banging my head of the table!, the data is coming off in the html source, but the page is just blank, the google table doesn't seem to like it.
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'COND_CODE');
data.addColumn('number', 'PEICE_NO');
data.addRows([
<?php
while( $row = $result->fetch_assoc() ){
extract($row);
echo "{['$COND_CODE'], ['$PEICE_NO'],"; } ?>
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
}
</script>
Thanks
EDIT:
Here is the html output
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'COND_CODE');
data.addColumn('number', 'PEICE_NO');
data.addRows([
{['BTH'], ['03084'],{['BTH'], ['03084'],{['TC'], ['02549'],{['SM'], ['03049'],{['BTH'], ]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
}
</script>
Try this instead:
data.addRows(
<?php
$rows = array();
while( $row = $result->fetch_assoc() ){
extract($row);
$rows[] = array($COND_CODE, $PEICE_NO);
}
echo json_encode($rows, JSON_NUMERIC_CHECK);
?>
);
The should output your data in the correct format.
You have the wrong syntax for a DataTable.
try doing this instead:
echo "['$COND_CODE', '$PEICE_NO' ],"; } ?>
echo "{['$COND_CODE'], ['$PEICE_NO']},";?>
Seeyour syntax is wrrong

retrieve data from mongodb and visualize it with google charts

I'd like to retrieve data from database (mongodb) and with those data i'd like to draw à pie chart using google charts. in a first case i have a collection called user and each user has a boolean attribute called (paid), i'd like to count how many paid users and free users and basing on those results i will draw a pie chart with the percentage of each kind of users
this my try i tried with for a long time but i'dont arrive to show the chart,
thanks :)
<?php
$connection = new MongoClient();
$collection = $connection->pato->user;
$cursor = $collection->find();
$cursor = $collection->find(array("paid"=>true));
$x=$cursor->count();
$cursor = $collection->find(array("paid"=>false));
$y=$cursor->count();
$myurl[]="['Option','Value']";
$myurl[]=[['Free users', $y],['Paid users', $x]];
?>
<html>
<head>
<!--Load the AJAX API-->
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data=google.visualization.arrayToDataTable([
<?echo(implode(",",$myurl));?>
]);
// Set chart options
var options = {'title':'User statistics',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.PieChart(document.getElementById('userStatsDiv'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}</script>
<body>
<div id="usageStatsDiv" style="width:700; height:500"></div>
</body>
</html>
I think your problem is with your JSON:
var data=google.visualization.arrayToDataTable([
<?echo(implode(",",$myurl));?>
]);
It looks like you're trying to build the JSON string yourself. Let PHP do the work for you instead - use json_encode instead, like this:
var data=google.visualization.arrayToDataTable([
<?php echo json_encode($data); ?>
]);
You'll need to build your $data array so that it gives you the correct elements, but I think you'll find that the end result is cleaner and easier to understand.

Categories