Hola que tal buenas tardes, javascript me muestra mi consulta undefined, lo que quiero hacer es pintar mi gráfica, ya le busque pero no encuentro la solución, espero y me puedan ayudar gracias,
este es mi js
$(document).ready(function(){
$.ajax({
type : "POST",
url : "consulta_reporte.php",
success : function(data){
alert(data);
var sample_id = [];
var expected_value_reporte = [];
var min_2std_reporte = [];
var plus_2std_reporte = [];
for(var i in data) {
sample_id.push(data[i].sample_id);
expected_value_reporte.push(data[i].expected_value);
min_2std_reporte.push(data[i].min_2std);
plus_2std_reporte.push(data[i].plus_2std);
}
var chartdata = {
labels: sample_id,
datasets: [
{
label: "expected_value",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
data: expected_value_reporte
},
{
label: "min_2std",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(29, 202, 255, 0.75)",
borderColor: "rgba(29, 202, 255, 1)",
pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
pointHoverBorderColor: "rgba(29, 202, 255, 1)",
data: min_2std_reporte
},
{
label: "plus_2std",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(211, 72, 54, 0.75)",
borderColor: "rgba(211, 72, 54, 1)",
pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
pointHoverBorderColor: "rgba(211, 72, 54, 1)",
data: plus_2std_reporte
}
]
};
var ctx = $("#resultado");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error : function(data) {
}
});
});
Y mi consulta_reporte.php es este, aquí lo que hago es llamar una consulta
anidada donde selecciono tres combos y al ultimo muestro la gráfica, con
este script que dejo a continuación.
<?php
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<html>
<head>
<title> Generar Reporte</title>
<style>
.chart-container {
width: 640px;
height: auto;
}
</style>
<!-- javascript -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="Chart.min.js"></script>
<script type="text/javascript" src="linegraph.js"></script>
</head>
<body>
<?php
$host = '127.0.0.1';
$port = '5432';
$database = 'pos';
$user = 'postgres';
$password = '';
$cnx = pg_connect(
'host=' . $host . ' port=' . $port . ' dbname=' . $database .
' user=' . $user . ' password=' . $password
);
$qr = "select * from vw_dhqc_report";
$year = 'year';
$id_control = 'id_control';
$element = 'element';
// header("Content-Type: text/html;charset=utf-8");
$query4 = "SELECT
DISTINCT year, id_control, element,
returned_value, expected_value,
sample_id, min_2std, plus_3std, plus_2std
FROM vw_dhqc_report
WHERE
'$_POST[$year]' = year AND
'$_POST[$id_control]'= id_control AND
'$_POST[$element]'= element
";
$result4 = pg_query($query4);
?>
<?php
$resutado = array();
while ($row = pg_fetch_assoc($result4)) {
$resutado[] = $row;
}
http_response_code(200);
header("Content-Type →application/json; charset=utf-8");
// echo json_encode($resutado);
pg_close($cnx);
?>
<div class="chart-container">
<canvas id="resultado"></canvas>
</div>
</body>
</html>
este es mi index.php donde lleno los combos
<form id="formulario" action="" method="post">
<h3>Seleccione una Opción<h3>
<!-- <h3>year</h3> -->
<select name="year" id="year_id">
<option value="">Seleccionar</option>
<?php
$query = "select distinct $year from vw_dhqc_report order by year desc";
$result = pg_query($query);
while($fila=pg_fetch_array($result)){
echo "<option value='".$fila['year']."'>".$fila['year']."</option>";
}
?>
</select>
<!-- <h3>id_control</h3> -->
<select name="id_control" id="control_id">
<option value="0">Seleccionar</option>
</select>
<!-- <h3>Element</h3> -->
<select name="element" id="element_id">
<option value="0">Seleccionar</option>
</select>
<br><br>
<?php
?>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$('#year_id').on('change', function(){
var year = $(this).val();
if(year){
$.ajax({
type:'POST',
url: 'control.php',
data:'year='+year,
success:function(data){
$('#control_id').html(data);
}
});
}else{
$('#control_id').html('<option value="">Select year</option>');
}
});
$('#control_id').on('change', function(){
var id_control = $(this).val();
var year =$('#year_id').val();
// var element = {'year':year,'id_control':id_control};
if(id_control){
$.ajax({
type:'POST',
url:'element.php',
data: element = {'year':year,'id_control':id_control},
success:function(data){
$('#element_id').html(data);
}
});
}else{
$('#element_id').html('<div value="">Select id_control</div>');
}
});
$('#element_id').on('change', function(){
var id_element = $(this).val();
var year =$('#year_id').val();
var id_control = $('#control_id').val();
if(id_element){
$.ajax({
type:'POST',
url:'consulta_reporte.php',
data: element = {'element':id_element,'year':year,'id_control':id_control},
success:function(data){
$('#resultado').html(data);
}
});
}else{
$('#resultado').html('<div value="">Mostrar Tabla</div>');
}
});
});
</script>
<div id="resultado">
</div>
</body>
</html>