Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Google charts with json data-PHP
681 views
Skip to first unread message
kirth...@gmail.com
Sep 11, 2017, 8:08:40 AM9/11/17
to mozilla-sup...@lists.mozilla.org
Hi ,
I am trying to generate google chart with the below mentioned script where i use php to retrive data from database and pass it as json data to the main file using Ajax call(jquery) .
But am not getting the chart generated
Can some help.in the log i noticed getting this kind of entry
[11/Sep/2017:14:10:36 +0530] "GET /qod/column_chart.php HTTP/1.1" 200 100
To retrive the data from DB.which gives the result properly
column_chart.php
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysqli_connect($dbhost, $dbuser,$dbpass);
if ($conn)
{
//echo "DataBase Details" . "<br></br>" ;
mysqli_select_db($conn,"qod");
$data[] = array('ProjectID','MetricValue');
$query = mysqli_query($conn,"select ProjectID,MetricValue from qod where SLAMet='N'");
$RecordCount = mysqli_num_rows($query );
echo "REcord ";
echo $RecordCount;
}
else {
echo "Database not connected";
}
echo " Test";
while($result = mysqli_fetch_array($query))
{
$data[] = array($result['ProjectID'],$result['MetricValue']);
}
echo json_encode($data);
?>
Output : REcord 4 Test[["ProjectID","MetricValue"],["2","60"],["1","30"],["PRJ-2256","11"],["PRJ-3560","56"]]
Main function to generate Google charts
graph.php
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript"
src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
<h1>Test</h1>
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
alert("test1");
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(column_chart);
//to retrive the jsondata
function column_chart() {
alert("test");
var jsonData = $.ajax({
type: 'GET',
url: "http://172.25.113.13/qod/column_chart.php",
dataType: "json",
}).responseText;
//echo jsonData;
var data = new google.visualization.DataTable(jsonData);
Set chart options
var options = {'title':'Quality of Deliverables - Monthly Report',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.columnchart(document.getElementById('columnchart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="columnchart_div"></div>
</body>
</html>
thanks in advance!
I am trying to generate google chart with the below mentioned script where i use php to retrive data from database and pass it as json data to the main file using Ajax call(jquery) .
But am not getting the chart generated
Can some help.in the log i noticed getting this kind of entry
[11/Sep/2017:14:10:36 +0530] "GET /qod/column_chart.php HTTP/1.1" 200 100
To retrive the data from DB.which gives the result properly
column_chart.php
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysqli_connect($dbhost, $dbuser,$dbpass);
if ($conn)
{
//echo "DataBase Details" . "<br></br>" ;
mysqli_select_db($conn,"qod");
$data[] = array('ProjectID','MetricValue');
$query = mysqli_query($conn,"select ProjectID,MetricValue from qod where SLAMet='N'");
$RecordCount = mysqli_num_rows($query );
echo "REcord ";
echo $RecordCount;
}
else {
echo "Database not connected";
}
echo " Test";
while($result = mysqli_fetch_array($query))
{
$data[] = array($result['ProjectID'],$result['MetricValue']);
}
echo json_encode($data);
?>
Output : REcord 4 Test[["ProjectID","MetricValue"],["2","60"],["1","30"],["PRJ-2256","11"],["PRJ-3560","56"]]
Main function to generate Google charts
graph.php
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript"
src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
<h1>Test</h1>
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
alert("test1");
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(column_chart);
//to retrive the jsondata
function column_chart() {
alert("test");
var jsonData = $.ajax({
type: 'GET',
url: "http://172.25.113.13/qod/column_chart.php",
dataType: "json",
}).responseText;
//echo jsonData;
var data = new google.visualization.DataTable(jsonData);
Set chart options
var options = {'title':'Quality of Deliverables - Monthly Report',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.columnchart(document.getElementById('columnchart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="columnchart_div"></div>
</body>
</html>
thanks in advance!
WaltS48
Sep 11, 2017, 12:06:50 PM9/11/17
to mozilla-sup...@lists.mozilla.org
me "Error: Element head is missing a required instance of child element
title."
--
Visit Pittsburgh <http://www.visitpittsburgh.com/>
Coexist <https://www.coexist.org/>
Windows 10
0 new messages