Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

João Junior

RGraph

Recommended Posts

Eai pessoal,

 

Estou dando uma pesquisada sobre gráficos com HTML5 e encontrei um material, porém fiz tudo como estava pedindo, porém no final não gera nenhum erro, apenas não exibe o gráfico, se alguém puder me dar uma ajuda, agradeço.

<!DOCTYPE html>
<html> 
<title>Graficos</title>    
<body>
</body>

</div>

<head>
    <script src="libraries/RGraph.common.core.js" ></script>
    <script src="libraries/RGraph.common.annotate.js" ></script>
    <script src="libraries/RGraph.common.context.js" ></script>
    <script src="libraries/RGraph.common.tooltips.js" ></script>
    <script src="libraries/RGraph.common.resizing.js" ></script>
    <script src="libraries/RGraph.bar.js" ></script>
 </head>
 <div style="width: 450px;">
<canvas id="meuCanvasGraficoIdades" width="700" height="350">[No canvas support]</canvas>
<?php
     $conexao = mysql_connect("localhost", "root","");
     $banco = mysql_select_db("graficos", $conexao);
  ?> 
 
<?php
$mySQL = "SELECT twitter, idade FROM exemplos";
$consultar = mysql_query($mySQL) or die(mysql_error());;
 
$i = 1;
while($resultado = mysql_fetch_array($consultar)){
	$idade[$i] = $resultado['idade'];
	$i++;
}
 
$dadosIdades = join(",", array($idade[1],$idade[2],$idade[3],$idade[4],$idade[5]));
$dadosIdades = "[$dadosIdades]";
?>

<?php
echo "<script>" . "\n";
echo "var dadosIdades = $dadosIdades" . "\n";
echo "var idadevilourenco = $idade[1];";
echo "var idadembrena = $idade[2];";
echo "var idadefausto = $idade[3];";
echo "var idadegenes = $idade[4];";
echo "var idadeandre = $idade[5];";
echo "</script>"  . "\n";
?>

<script>		
	        window.onload = function ()
        {
            var meuGraficoIdades = new RGraph.Bar('meuCanvasGraficoIdades', dadosIdades);
            meuGraficoIdades.Set('chart.background.barcolor1', 'white');
            meuGraficoIdades.Set('chart.background.barcolor2', 'white');
            meuGraficoIdades.Set('chart.title', 'Exemplo Idades - www.vilourenco.com.br');
            meuGraficoIdades.Set('chart.title.vpos', 0.6);
            meuGraficoIdades.Set('chart.labels', ['@vilourenco', '@monteirobrena', '@g0nc1n', '@webgenes', '@andredmolin']);
            meuGraficoIdades.Set('chart.tooltips', ['@vilourenco tem ' + idadevilourenco + ' anos', '@monteirobrena tem ' + idadembrena + ' anos', '@g0nc1n tem ' + idadefausto + ' anos', '@webgenes tem ' + idadegenes + ' anos', '@andredmolin tem ' + idadeandre + ' anos']);
            meuGraficoIdades.Set('chart.text.angle', 45);
            meuGraficoIdades.Set('chart.gutter', 35);
            meuGraficoIdades.Set('chart.shadow', true);
            meuGraficoIdades.Set('chart.shadow.blur', 5);
            meuGraficoIdades.Set('chart.shadow.color', '#aaa');
            meuGraficoIdades.Set('chart.shadow.offsety', -3);
            meuGraficoIdades.Set('chart.colors', ['#00CED1']);
            meuGraficoIdades.Set('chart.key.position', 'gutter');
            meuGraficoIdades.Set('chart.text.size', 10);
            meuGraficoIdades.Set('chart.text.font', 'Georgia');
            meuGraficoIdades.Set('chart.text.angle', 0);
            meuGraficoIdades.Set('chart.grouping', 'stacked');
            meuGraficoIdades.Set('chart.strokecolor', 'rgba(0,0,0,0)');
            meuGraficoIdades.Draw();           
        }
    </script>

</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

verifique se todos os arquivos .js estão no caminho indicado... vc abriu e fechou a tag body sem colocar nenhum conteúdo dentro da tag, ( creio eu que isso não influencia), mais é bom ajeitar...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Estranho, os arquivos estão .js estão ok e mudei o body tbm, mas continua sem aparecer nada.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <title>RGraph: HTML5 charts library</title>

    <link rel="stylesheet" href="css/website.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/animations.css" type="text/css" media="screen" />

    <link rel="icon" type="image/png" href="images/favicon.png">
    
    <script src="libraries/RGraph.common.core.js" ></script>
    <script src="libraries/RGraph.common.dynamic.js" ></script>
    <script src="libraries/RGraph.common.key.js" ></script>
    <script src="libraries/RGraph.drawing.rect.js" ></script>
    <script src="libraries/RGraph.common.effects.js" ></script>
    <script src="libraries/RGraph.common.tooltips.js" ></script>
    <script src="libraries/RGraph.bar.js" ></script>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>	
  <body>	
	<script>
	        window.onload = function ()
        {
            var meuGraficoIdades = new RGraph.Bar('meuCanvasGraficoIdades', dadosIdades);
            meuGraficoIdades.Set('chart.background.barcolor1', 'white');
            meuGraficoIdades.Set('chart.background.barcolor2', 'white');
            meuGraficoIdades.Set('chart.title', 'Exemplo Idades - www.vilourenco.com.br');
            meuGraficoIdades.Set('chart.title.vpos', 0.6);
            meuGraficoIdades.Set('chart.labels', ['@vilourenco', '@monteirobrena', '@g0nc1n', '@webgenes', '@andredmolin']);
            meuGraficoIdades.Set('chart.tooltips', ['@vilourenco tem ' + idadevilourenco + ' anos', '@monteirobrena tem ' + idadembrena + ' anos', '@g0nc1n tem ' + idadefausto + ' anos', '@webgenes tem ' + idadegenes + ' anos', '@andredmolin tem ' + idadeandre + ' anos']);
            meuGraficoIdades.Set('chart.text.angle', 45);
            meuGraficoIdades.Set('chart.gutter', 35);
            meuGraficoIdades.Set('chart.shadow', true);
            meuGraficoIdades.Set('chart.shadow.blur', 5);
            meuGraficoIdades.Set('chart.shadow.color', '#aaa');
            meuGraficoIdades.Set('chart.shadow.offsety', -3);
            meuGraficoIdades.Set('chart.colors', ['#00CED1']);
            meuGraficoIdades.Set('chart.key.position', 'gutter');
            meuGraficoIdades.Set('chart.text.size', 10);
            meuGraficoIdades.Set('chart.text.font', 'Georgia');
            meuGraficoIdades.Set('chart.text.angle', 0);
            meuGraficoIdades.Set('chart.grouping', 'stacked');
            meuGraficoIdades.Set('chart.strokecolor', 'rgba(0,0,0,0)');
            meuGraficoIdades.Draw();           
        }
    </script>



<?php
     $conexao = mysql_connect("localhost", "root","");
     $banco = mysql_select_db("graficos", $conexao);
  ?> 
 
<?php
$mySQL = "SELECT twitter, idade FROM exemplos";
$consultar = mysql_query($mySQL) or die(mysql_error());;
 
$i = 1;
while($resultado = mysql_fetch_array($consultar)){
	$idade[$i] = $resultado['idade'];
	$i++;
}
 
$dadosIdades = join(",", array($idade[1],$idade[2],$idade[3],$idade[4],$idade[5]));
$dadosIdades = "[$dadosIdades]";
?>

<?php
echo "<script>" . "\n";
echo "var dadosIdades = $dadosIdades" . "\n";
echo "var idadevilourenco = $idade[1];";
echo "var idadembrena = $idade[2];";
echo "var idadefausto = $idade[3];";
echo "var idadegenes = $idade[4];";
echo "var idadeandre = $idade[5];";
echo "</script>"  . "\n";
?>

</body>

</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.