Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde, alguém poderia me ajudar por favor, estou com dificuldades de gerar dois gráficos para mostrar resultados de algumas pesquisas. Tenho uma tabela chamada resultado, onde nessa tabela tem oito campos que ficam na seguinte forma:
id - questao1 - questao2 - questao3 - questao4 - questao5 - questao6 - id_avaliacao
1 5 5 4 3 2 2 631
2 4 4 4 5 1 2 767
3 5 5 3 2 3 1 1194
esses resultados são gravados nessa tabela acima, onde 5 é totalmente satisfeito, 4 é satisfeito, 3 regular, 2 ruim e por diante. o Id_avaliacao é um campo auto incremente também, pois uma pessoa poderá ter vários curso concluídos para serem avaliados, onde esse campo id_avaliacao leva o código do curso à ser avaliado. Minha dúvida é: preciso mostrar em gráfico o resultado de satisfação por curso e para cada curso quantas pessoas responderam 5 totalmente satisfeito, 4 ... .
Muitos gráficos aceitam json, minha dica: faz seu select e joga num arquivo json, onde o gráficos(html, css e js) ficam abre requisição ajax e manda para o gráfico.
Você pode fazer uma consulta no banco para trazer os valores que gostaria, e depois usar essa biblioteca para gerar os gráficos http://www.chartjs.org/docs/#line-chart
obrigado pelas dicas, mas ainda sou iniciante, e não tenho a menor idéia de como fazer isso. Me ajudem
Poste o que já fez...de preferencia no github ou aqui mesmo: http://codepen.io/
eu incremento o código com alguns exemplos
Boa tarde, demorei um pouco porque fiquei sem internet, esses são os códigos de dois gráficos que quero gerar para cada curso, um gráfico tem ter como resultado: porcentagem de quantas quantas pessoas votaram em cada questão do curso de contabilidade, e no segundo gráfico mostrar o grau de satisfação do curso de contabilidade.
id - questao1 - questao2 - questao3 - questao4 - questao5 - questao6 - id_avaliacao
1 5 5 4 3 2 2 631
2 4 4 4 5 1 2 767
3 5 5 3 2 3 1 1194
esses resultados são gravados nessa tabela acima, onde 5 é totalmente satisfeito, 4 é satisfeito, 3 regular, 2 ruim e por diante. o Id_avaliacao é um campo auto incremente também, pois uma pessoa poderá ter vários curso concluídos para serem avaliados, onde esse campo id_avaliacao leva o código do curso à ser avaliado. Minha dúvida é: preciso mostrar em gráfico o resultado de satisfação por curso e para cada curso quantas pessoas responderam 5 totalmente satisfeito, 4 ... .
<?php
session_start();
error_reporting(0);
include "conexao.php";
mysql_query("SET character_set_results = 'utf8', character_set_client = 'utf8',
character_set_connection = 'utf8', character_set_database = 'utf8',
character_set_server = 'utf8'", $conexao);
?>
<?php
$lista = array();
$pont = array();
$cor = array();
$cor[0] = '#ff3300';
$cor[1] = '#0000ff';
$cor[2] = '#006600';
$cor[3] = '#ff0066';
$cor[4] = '#0000ff';
$cor[5] = '#006600';
$cor[6] = '#ff0066';
$cor[7] = '#006600';
$i = 0;
$sql = "select * from questao";
$resultado = mysql_query($sql);while ($row = mysql_fetch_object($resultado)) {
$questao = $row->questao;
$pontuacao = $row->pontuacao;
$lista[$i] = $questao;
$pont[$i] = $pontuacao;
$i = $i + 1;
}
?><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="../css/bootstrap.css" rel="stylesheet">
</head>
<script type="text/javascript" src="[https://www.gstatic.com/charts/loader.js">](https://www.gstatic.com/charts/loader.js)
<script type="text/javascript" src="[https://www.google.com/jsapi](https://www.google.com/jsapi)"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Elemento", "Pontuação", { role: "style" } ],
<?php
$k = $i;
for ($i = 0; $i < $k; $i++){
?>
['<?php echo $lista[$i] ?>', <?php echo $pont[$i] ?>, '<?php echo $cor[$i] ?>'],
<?php } ?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Pontuação por questão",
width: 800,
height: 400,
bar: {groupWidth: "60%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
<?php
$listar = array();
$satis = array();
$cor = array();
$cor[0] = '#ff3300';
$cor[1] = '#0000ff';
$cor[2] = '#006600';
$cor[3] = '#ff0066';
$cor[4] = '#0000ff';
$cor[5] = '#006600';
$cor[6] = '#ff0066';
$cor[7] = '#006600';
$i = 0;
$sql2 = "select * from resultado";
$resultados = mysql_query($sql2);while ($row1 = mysql_fetch_object($resultados)) {
$satisfacao = $row1->satisfacao;
$pontuacao = $row1->resultado;
$listar[$i] = $satisfacao;
$satis[$i] = $pontuacao;
$i = $i + 1;
}
?>
var datas = google.visualization.arrayToDataTable([
["Elemento", "Pontuação", { role: "style" } ],
<?php
$k = $i;
for ($i = 0; $i < $k; $i++){
?>
['<?php echo $listar[$i] ?>', <?php echo $satis[$i] ?>, '<?php echo $cor[$i] ?>'],
<?php } ?>
]);
var views = new google.visualization.DataView(datas);
views.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options1 = {
title: "resultado de satisfação",
width: 800,
height: 400,
bar: {groupWidth: "60%"},
legend: { position: "none" },
};
var charts = new google.visualization.ColumnChart(document.getElementById("columncharts_values1"));
charts.draw(views, options);
}
</script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div></br></br></br></br>
<div id="columncharts_values1" style="width: 900px; height: 300px;"></div>
<body >
</body>
</html>
https://developers.google.com/chart/