Jump to content

[Resolvido] Não mostra o gráfico


Dr_Lion
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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á.

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.