[Resolvido] Não mostra o gráfico

Dr_Lion · March 19, 2014

Ora bem, cá estou eu mais uma vez ás voltas.

Queria representar uns valores num gráfico, a biblioteca que estou a usar é a Chartjs http://www.chartjs.org/docs/ o problema é que a documentação disto só serve para quem já sabe fazer as coisas o que não é o meu caso.

Estou a usar linux debian, com servidor apache configurado para a porta 443 e 80.

Exemplo em html, até aqui tudo certo, funciona, grafico.html:

<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="Chartjs/Chart.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
</head>
<body>
<canvas id="grafico" height="450" width="600"></canvas>
<script type="text/javascript">
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("grafico").getContext("2d")).Line(lineChartData);

</script>
</body>
</html>

Acontecem uma coisa esquisita isto na própria máquina onde estou a desenvolver. Se abrir o ficheiro com o iceweasel "bra.html" e na path do iceweasel aparecer o caminho file:///var/www/bra.html o ficheiro abre corretamente. Se por outro lado tentar introduzir o caminho no iceweasel "localhost/bra.html" a página aparece em branco! Não sei porquê! (se for ver o código fonte das duas páginas, o código fonte é igual nas duas)

No caso de ser um ficheiro bra.php se abrir o mesmo com o caminho file:///..... pede-me para fazer o download do ficheiro, se aceder o caminho for localhost/bra.php o código php funciona como é suposto.

O problema é que eu pretendia mostrar o gráfico numa página php, que tem código php e ficaria algo do estilo,

grafico.php:

<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="Chartjs/Chart.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
</head>
<body>

<?php
//codigo anexo omitido..

echo "teste";  //isto escreve
echo '<canvas id="grafico" height="450" width="600"></canvas>';

?>

<script type="text/javascript">
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("grafico").getContext("2d")).Line(lineChartData);

</script>
</body>
</html>

Neste ultimo caso era suposto eu conseguir ver o gráfico e não consigo ver. Já testei também acedendo do exterior com o IE 10 e também não mostra o gráfico.

Alguém tem alguma ideia?

yoda · March 19, 2014

Convém não omitir código que pode ser essencial.

Dr_Lion · March 19, 2014

Convém não omitir código que pode ser essencial.

O código que omiti de momento em nada tem haver com o que estou a fazer. Tanto que mesmo nas minhas tentativas tirei o código php a mais. Mais tarde tratarei dessa parte que me vai dar os dados para o gráfico, mas neste momento estou apenas a tentar ver o gráfico com valores estáticos inseridos na declaração do gráfico como se pode ver..

yoda · March 19, 2014

Se o exemplo estático funciona e o em PHP não, o problema está no PHP.

Dr_Lion · March 19, 2014

Já está resolvido, aparentemente faltava um no body o restante: <body onload = "nome da função">

Agora não tenho tempo, amanhã já posto o código completo.

O exemplo estático funcionava num ficheiro html, se mudasse a extensão para php já não mostrava nada.. se bem que o código estava lá.

Dr_Lion · March 21, 2014

Basicamente mudei as permissões, não sei se estariam a gerar problemas. E acrescentei a função onload no body. E a função createChart() no gráfico.

<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="Chartjs/Chart.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
</head>
<body onload="createChart()">

<?php
//codigo anexo omitido..
echo "teste";  //isto escreve
echo '<canvas id="grafico" height="450" width="600"></canvas>';
?>
<script type="text/javascript">
function createChart()
{
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("grafico").getContext("2d")).Line(lineChartData);
}
</script>
</body>
</html>

Sign In

[Resolvido] Não mostra o gráfico

Recommended Posts

Dr_Lion

Link to comment

Share on other sites

yoda

Link to comment

Share on other sites

Dr_Lion

Link to comment

Share on other sites

yoda

Link to comment

Share on other sites

Dr_Lion

Link to comment

Share on other sites

Dr_Lion

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information