Sparkline - Easy way to do it! Do u know? Tell me!

67 views
Skip to first unread message

Brenno Leal

unread,
Nov 12, 2012, 12:54:40 PM11/12/12
to google-visua...@googlegroups.com
Hey guys,

im trying to do it, but ive not sucess :C, i used the code that asgallant used before, but the browser doesnt read it right :(. but, if i take the code and copy and paste to playground, it works! let i show u the code:

<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Sensor');
              
                <?php
  foreach ($val as $valores) {
     echo " data.addRows([[$valores]]);";
  }
   ?>
// Create and draw the visualization.
new google.visualization.ImageSparkLine(
 document.getElementById('visualization')).draw(data, null);
}
                 google.setOnLoadCallback(drawVisualization);

</script>

i've sure that $val isnt empty. What should i do?

asgallant

unread,
Nov 12, 2012, 1:28:59 PM11/12/12
to google-visua...@googlegroups.com
I need to see the javascript after it is rendered by the server.  Open the page in a browser and view to source code, then paste it here.

Brenno Leal

unread,
Nov 12, 2012, 6:26:59 PM11/12/12
to google-visua...@googlegroups.com
The code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.: Supe Solucoes - Agrosensores :.</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/adicionarRemover.js"></script>
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>


<script type="text/javascript" src="http://supesolucoes.com.br/confraria/painel/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

// Skin options
skin : "o2k7",
skin_variant : "silver",

// Example content CSS (should be your site CSS)
content_css : "css/example.css",

// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",

// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>

<script>
function selecionar_tudo(){
for (i=0;i< document.getElementById("excluir").length;i++) {
document.getElementById("excluir").checked=1 ;
}
}

function deselecionar_tudo(){
for (i=0;i< document.getElementById("excluir").length;i++) {
//for (i=0;i<document.f1.elements.length;i++)
document.getElementById("excluir").checked=0;
}
}
</script>


<!--

<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>

-->

<script type="text/javascript" language="javascript">
//valida numero inteiro com mascara
function mascaraInteiro(){
if (event.keyCode < 48 || event.keyCode > 57){
event.returnValue = false;
return false;
}
return true;
}
/* Autor: Mario Costa */
function formatar_moeda(campo, separador_milhar, separador_decimal, tecla) {
var sep = 0;
var key = '';
var i = j = 0;
var len = len2 = 0;
var strCheck = '0123456789';
var aux = aux2 = '';
var whichCode = (window.Event) ? tecla.which : tecla.keyCode;

if (whichCode == 13) return true; // Tecla Enter
if (whichCode == 8) return true; // Tecla Delete
key = String.fromCharCode(whichCode); // Pegando o valor digitado
if (strCheck.indexOf(key) == -1) return false; // Valor inválido (não inteiro)
len = campo.value.length;
for(i = 0; i < len; i++)
if ((campo.value.charAt(i) != '0') && (campo.value.charAt(i) != separador_decimal)) break;
aux = '';
for(; i < len; i++)
if (strCheck.indexOf(campo.value.charAt(i))!=-1) aux += campo.value.charAt(i);
aux += key;
len = aux.length;
if (len == 0) campo.value = '';
if (len == 1) campo.value = '0'+ separador_decimal + '0' + aux;
if (len == 2) campo.value = '0'+ separador_decimal + aux;

if (len > 2) {
aux2 = '';

for (j = 0, i = len - 3; i >= 0; i--) {
if (j == 3) {
aux2 += separador_milhar;
j = 0;
}
aux2 += aux.charAt(i);
j++;
}

campo.value = '';
len2 = aux2.length;
for (i = len2 - 1; i >= 0; i--)
campo.value += aux2.charAt(i);
campo.value += separador_decimal + aux.substr(len - 2, len);
}

return false;
}
</script>

<style type="text/css">
#gallery {
background-color: #444;
padding: 5px;
width: 550px;
margin-left: 5px;
margin-top: 20px;
}

#gallery ul {
list-style: none;
}

#gallery ul li {
display: inline;
}

#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}

#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}

#gallery ul a:hover {
color: #fff;
}
</style>
</head>

<body>

<div id="barra">
<div class="titulo">
<a href="./">Painel de Controle - Agrosensores <a>
</div>
<div class="login">
Olá, teste | <a href="logout.php">Sair</a>
</div>
</div>

<div id="lateral">
<img src="imagens/logo.gif" />
<div class="menu">
<div class="categoria">Sensores</div>
<p><a href="sensoresCadastra.php">Cadastrar</a></p>
<p><a href="sensoresLista.php">Listar | Editar | Excluir</a></p>
<div class="categoria">Acionadores</div>
<p><a href="acionadoresLista.php">Listar | Alterar Status | Automático </a></p>
<div class="categoria">Usuários</div>
<a href="novo_usuario.php">Adicionar novo</a>
<a href="perfil.php">Meu perfil</a> <br><br>
</div>
</div>

<div id="conteudo">

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagesparkline']});
</script>



<div id="aviso">
<div align="center">
<p>SENSORES CADASTRADOS </p>
</div>
</div>
<br />
<br />


<form action="sensoresLista.php" method="post" name="f1" enctype="multipart/form-data">
<table width="100%" class="tabela" id = "tabela">
<tr class = "coluna">
<td width="195" align="center">DESCRI&Ccedil;&Atilde;O</td>
<td width="737" align="center">GR&Aacute;FICO</td>
<td width="170" align="center">ULTIMA CONSULTA </td>
<td width="109" align="center">HIST&Oacute;RICO<a href="javascript:deselecionar_tudo()"></a></td>
</tr>
<br>-->1<br>

<tr>
<td align="center">Luminosidade</td>
<td align="center">data.addRows([[20]]);data.addRows([[22]]);data.addRows([[23]]);data.addRows([[18]]);
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Sensor');
//data.addRows([[80]]); data.addRows([[20]]);data.addRows([[15]]);
data.addRows([[20]]); data.addRows([[22]]); data.addRows([[23]]); data.addRows([[18]]); // Create and draw the visualization.
new google.visualization.ImageSparkLine(
document.getElementById('visualization')).draw(data, null);
}
google.setOnLoadCallback(drawVisualization);

</script>
<div id="visualization" style="width: 300px; height: 300px;"></div>

</td>
<td align="center">&nbsp;</td>
<td width="109" align="center"></td>
</tr>
<br>-->2<br>

<tr>
<td align="center">Temperatura</td>
<td align="center">data.addRows([[23]]);
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Sensor');
//data.addRows([[80]]); data.addRows([[20]]);data.addRows([[15]]);
data.addRows([[23]]); // Create and draw the visualization.
new google.visualization.ImageSparkLine(
document.getElementById('visualization')).draw(data, null);
}
google.setOnLoadCallback(drawVisualization);

</script>
<div id="visualization" style="width: 300px; height: 300px;"></div>

</td>
<td align="center">&nbsp;</td>
<td width="109" align="center"></td>
</tr>
<br>-->3<br>

<tr>
<td align="center">Luminosidade</td>
<td align="center">
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Sensor');
//data.addRows([[80]]); data.addRows([[20]]);data.addRows([[15]]);
// Create and draw the visualization.
new google.visualization.ImageSparkLine(
document.getElementById('visualization')).draw(data, null);
}
google.setOnLoadCallback(drawVisualization);

</script>
<div id="visualization" style="width: 300px; height: 300px;"></div>

</td>
<td align="center">&nbsp;</td>
<td width="109" align="center"></td>
</tr>
<br>-->4<br>

<tr>
<td align="center">Temperatura</td>
<td align="center">
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Sensor');
//data.addRows([[80]]); data.addRows([[20]]);data.addRows([[15]]);
// Create and draw the visualization.
new google.visualization.ImageSparkLine(
document.getElementById('visualization')).draw(data, null);
}
google.setOnLoadCallback(drawVisualization);

</script>
<div id="visualization" style="width: 300px; height: 300px;"></div>

</td>
<td align="center">&nbsp;</td>
<td width="109" align="center"></td>
</tr>

</table>
</form>

</div>
</body>
</html>

asgallant

unread,
Nov 12, 2012, 6:54:58 PM11/12/12
to google-visua...@googlegroups.com
The problem is that you have four functions called "drawVisualization", and four divs with the id "visualization".  You need to change the names of your functions and the id's of your divs so that they are all unique.  Furthermore, the 2nd function has only 1 data point, and the 3rd and 4th functions have no data points, so they won't draw anything.

Brenno Leal

unread,
Nov 14, 2012, 12:06:34 PM11/14/12
to google-visua...@googlegroups.com
Hey man,

Im very greatfull, because u were right, the problem is solve!

Tks Again! 

asgallant

unread,
Nov 14, 2012, 2:12:03 PM11/14/12
to google-visua...@googlegroups.com
You're welcome.
Reply all
Reply to author
Forward
0 new messages