I am trying to create a simple website where I can show through the
selections of graphics, database connection proceeds through the json file from
which they do the chart. as long as I was using netbeans php applications just
doing it all worked, but now when I tried to integrate the code into the html
page I can not see graphics in chrome and I get this error.
Can anyone help me?
this is my code:
index.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Bootstrap 3</title>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<link href ="css/bootstrap.min.css" rel ="stylesheet">
<link href ="css/styles.css" rel = "stylesheet">
<head>
</head>
<body>
<div class = "navbar navbar-inverse navbar-static-top">
<div class = "container-fluid">
<a href ="#" class= "navbar-brand"> Chart-Up </a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target =
".navHeaderCollapse">
<span class=
"icon-bar"></span>
<span class=
"icon-bar"></span>
<span class=
"icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class =" nav navbar-nav navbar-right">
<li class = "active"><a href ="index.html">Home</a></li>
<li><a href ="#">About</a></li>
<li><a href ="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Project</a></li>
<li><a href="aggregate_reports.html">Aggregate Reports</a></li>
</ul>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi";></script>
<script src
="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";></script>
<script src ="js/bootstrap.js"></script>
</body>
</html>
this is aggregate_reports.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<link href ="css/bootstrap.min.css" rel ="stylesheet">
<link href ="css/styles.css" rel = "stylesheet">
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.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(function () {
function updateChart () {
var parameter = $('#Parametr').val();
var system = $('#Sistem').val();
prova(parameter, system);
}
$('#Parametr').change(updateChart);
$('#Sistem').change(updateChart);
$('#Grafico').change(updateChart);
});
function prova(a,b) {
var json = $.ajax({
url: "aggregate_json.php",
data: {q:a,p:b},
dataType:"json",
async: false
}).responseText;
console.log(json);
// Create our data table out of JSON data loaded from server.
var datachart = new google.visualization.DataTable(json);
var piu = $('#Parametr').val();
var options = {
title: " "+piu,
is3D: 'true',
width: 800,
height: 600
};
var graf =$('#Grafico').val();
if(graf==="1"){
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(datachart,options);}
if(graf==="2"){
var chart = new
google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(datachart,options);}
if(graf==="3"){
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(datachart,options);}
}
</script>
</head>
<body>
<div class = "navbar navbar-inverse navbar-static-top">
<div class = "container-fluid">
<a href ="#" class= "navbar-brand"> Chart-Up </a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target =
".navHeaderCollapse">
<span class=
"icon-bar"></span>
<span class=
"icon-bar"></span>
<span class=
"icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class =" nav navbar-nav navbar-right">
<li class = "active"><a href ="index.html">Home</a></li>
<li><a href ="#">About</a></li>
<li><a href ="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="component.html">Project</a></li>
<li><a href="aggregate_reports.html">Aggregate Reports</a></li>
</ul>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi";></script>
<script src
="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";></script>
<script src ="js/bootstrap.js"></script>
<form>
<select name="Parametri" id="Parametr" >
<option value="">Select a Parameter:</option>
<option value="Severity" >Severity</option>
<option value="Priority" >Priority</option>
<option value="Reproducibility">Reproducibility</option>
</select>
<select name="Sistema" id="Sistem" >
<option value="">Select a Component:</option>
<option value="comp1">Componente1</option>
<option value="comp2">Componente2</option>
<option value="comp3">Componente3</option>
<option value="comp4">Componente4</option>
<option value="comp5">Componente5</option>
<option value="comp6">Componente6</option>
<option value="All">All</option>
</select>
<select name="Grafico" id="Grafico" >
<option value="">Select a Graph:</option>
<option value="1" >Torta</option>
<option value="2" >Barre</option>
<option value="3">Colonne</option>
</select>
</form>
<div id="chart_div"></div>
</body>
</html>
and this is my aggregate_json.php
<?php
$q=$_GET["q"];
$p=$_GET["p"];
$parametro=$q;
$componente=$p;
$con = mysql_connect('localhost', 'root') or die('Error connecting to
server');
mysql_select_db('effect_db',$con) or die ('Selezione Database non
riuscita');
if($componente!="All"){
$query = mysql_query('Select '.$parametro.',count('.$parametro.')as Numero
>From detectedfaults where subsystemname="'.$componente.'" group by
'.$parametro.' ')or die("Query fallita");
}
else{
$query = mysql_query('Select '.$parametro.',count('.$parametro.')as
Numero From detectedfaults group by '.$parametro.' ')or die("Query
fallita");
}
$table = array();
$table['cols'] = array(
array('label' => $parametro, 'type' => 'string'),
array('label'=> 'Number of Defects','type'=>'number'),
);
$rows= array();
while($r = mysql_fetch_assoc($query)) {
$temp = array();
// each column needs to have data inserted via the $temp array
$temp[] = array('v' => $r[$parametro]);
$temp[] = array('v' => (int) $r['Numero']);
$rows[]= array('c' =>$temp);
}
$table['rows'] = $rows;
// populate the table with rows of data
$jsonTable = json_encode($table);
// encode the table as JSON
//set up header; first two prevent IE from caching queries
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
// return the JSON data
echo $jsonTable;
?>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
