[visualization-api] Gauge Chart with another Charts

Gustavo L. Moraes Mon, 20 Feb 2017 16:12:50 -0800

Hi...

How can I?


*Only show the first two:*


 <!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=iso-8859-1" /> 
 <title>Dashboard Diretoria - RG Sertal</title> 
 
 <script language="javascript"> 
 // Identificando o Navegador 
 if (navigator.userAgent.indexOf("Chrome") == -1) { 
 alert("Sistema melhor visualizado com o navegador Google Chrome!") 
 } 
 </script> 
 <script type="text/javascript" src="
https://www.gstatic.com/charts/loader.js";></script> 
 <script type="text/javascript"> 
 google.charts.load('current', {'packages':['corechart']}); 
 </script> 
 </head> 
 <body> 
 <center> 
 <font size="3"><b>Intranet RG Sertal | gustavolm (<a href="/logoff.php 
<http://192.168.0.254/logoff.php>">Logoff</a>) | <a href="/ 
<http://192.168.0.254/>">Home</a> > <a href="/diretoria 
<http://192.168.0.254/diretoria>">Diretoria</a></b></font> 
 <br /><br /> 
 <font size="3" color="#336699"><b>Dashboard Diretoria v1.3a<br /><br 
/></b></font> 
 </center> 
 <script type="text/javascript"> 
 google.charts.setOnLoadCallback(drawChartIndVen1); 
 
 function drawChartIndVen1() { 
 var dataIndVen1 = new google.visualization.DataTable(); 
 dataIndVen1.addColumn('string', 'Meses'); 
 dataIndVen1.addColumn('number', '2015'); 
 dataIndVen1.addColumn('number', '2016'); 
 dataIndVen1.addColumn('number', '2017'); 
 
 dataIndVen1.addRows([ 
 ['Jan', 3901428.72, 5855138.6, 5295955.79], 
 ['Fev', 2388684.2, 3312024.61, 3085403.61], 
 ['Mar', 1785722.73, 2324835.5, 0], 
 ['Abr', 1225221.18, 1877999.5, 0], 
 ['Mai', 3044741.35, 2725591.06, 0], 
 ['Jun', 1404971.06, 1258493.09, 0], 
 ['Jul', 1232387.38, 1829191.74, 0], 
 ['Ago', 670914.24, 1915027.29, 0], 
 ['Set', 1948617.11, 1269937.39, 0], 
 ['Out', 6584288.18, 2221001.78, 0], 
 ['Nov', 2429157.62, 2507720.53, 0], 
 ['Dez', 2836858.15, 3682925.44, 0], 
 ]); 
 
 var optionsIndVen1 = { 
 title : 'VENDAS - Últimos três anos (Pedidos)', 
 width : 800, 
 height: 400, 
 hAxis: { 
 title: 'Meses', 
 }, 
 vAxis: { 
 title: 'Valores' 
 } 
 }; 
 
 var chartIndVen1 = new google.visualization.ColumnChart(document.
getElementById('grafIndVen1')); 
 chartIndVen1.draw(dataIndVen1, optionsIndVen1); 
 } 
 </script> 
 
 <script type="text/javascript"> 
 google.charts.setOnLoadCallback(drawChartIndCom1); 
 
 function drawChartIndCom1() { 
 var dataIndCom1 = google.visualization.arrayToDataTable([ 
 ['Mês','Admin.','Fábrica', { role: 'annotation' } ], 
 ['Mar/16', 200583.32, 1916029.86, ''], 
 ['Abr/16', 165589.34, 1195797.23, ''], 
 ['Mai/16', 261948.36, 814559.5, ''], 
 ['Jun/16', 304661.1, 616660.14, ''], 
 ['Jul/16', 213397.77, 546578.68, ''], 
 ['Ago/16', 217692.27, 614634.23, ''], 
 ['Set/16', 213541.38, 551403.24, ''], 
 ['Out/16', 166674.22, 548468.76, ''], 
 ['Nov/16', 193142.92, 738004.52, ''], 
 ['Dez/16', 198255.84, 689344.66, ''], 
 ['Jan/17', 159525.24, 1073695.08, ''], 
 ['Fev/17', 110566.58, 409984.33, ''] 
 ]); 
 
 var optionsIndCom1 = { 
 title : 'COMPRAS - Valor comprado nos últimos 12 meses (NF)', 
 width : 800, 
 height: 400, 
 bar: { groupWidth: '75%' }, 
 isStacked: true, 
 hAxis: { 
 title: 'Meses', 
 }, 
 vAxis: { 
 title: 'Valores' 
 } 
 }; 
 
 var chartIndCom1 = new google.visualization.ColumnChart(document.
getElementById('grafIndCom1')); 
 chartIndCom1.draw(dataIndCom1, optionsIndCom1); 
 
 } 
 </script> 
 
 <script type="text/javascript"> 
 google.charts.setOnLoadCallback(drawChartIndCon1); 
 function drawChartIndCon1() { 
 
 var dataIndCon1 = google.visualization.arrayToDataTable([ 
 ['Label', 'Value'], 
 ['Memory', 80], 
 ['CPU', 55], 
 ['Network', 68] 
 ]); 
 
 var optionsIndCon1 = { 
 width: 400, height: 120, 
 redFrom: 90, redTo: 100, 
 yellowFrom:75, yellowTo: 90, 
 minorTicks: 5 
 }; 
 
 var chartIndCon1 = new google.visualization.Gauge(document.getElementById(
'grafIndCon1')); 
 
 chartIndCon1.draw(dataIndCon1, optionsIndCon1); 
 
 } 
 </script> 
 
 <center> 
 <div id="grafIndVen1" align="center" style="width: 800px; height: 400px;"
></div> 
 <div id="grafIndCom1" align="center" style="width: 800px; height: 400px;"
></div> 
 <div id="grafIndCon1" style="width: 400px; height: 120px;"></div> 
 </center> 
 </body> 
 </html>

Thank you!

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/fc6387ab-8fb8-42e4-80ed-f216e20e6a41%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Gauge Chart with another Charts

Reply via email to