Gauge Chart with another Charts

46 views

Skip to first unread message

Gustavo L. Moraes

unread,

Feb 20, 2017, 7:12:07 PM2/20/17

to Google Visualization API

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">Logoff</a>) | <a href="/">Home</a> > <a href="/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!

Gustavo L. Moraes

unread,

Feb 21, 2017, 5:35:47 AM2/21/17

to Google Visualization API

Solution:

<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart','gauge']});
</script>

Szymon Chomej

unread,

Feb 27, 2017, 9:28:47 AM2/27/17

to Google Visualization API

Hi Gustavo.
I have similar problem.
Where did you put the code which you write as the solution?

I have tried it in few places and it still does'n work for me?

You can see my code in this topic:https://groups.google.com/forum/m/#!topic/google-visualization-api/2acKr1okwI4

Gustavo L. Moraes

unread,

Feb 27, 2017, 2:43:26 PM2/27/17

to Google Visualization API

Hi...

My 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=iso-8859-1" />
<title>Dashboard Diretoria - RG Sertal</title>

google.charts.load('current', {'packages':['corechart','gauge']});

</script>
</head>
<body>
<center>
<font size="3"><b>Intranet RG Sertal | gustavolm (<a href="/logoff.php">Logoff</a>) | <a href="/">Home</a> > <a href="/diretoria">Diretoria</a></b></font>
<br /><br />

<font size="3" color="#336699"><b>Dashboard Diretoria v1.4a<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, 5281955.79],
['Fev', 2388684.2, 3312024.61, 3887715.21],

['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, 1909175.29, 0],
['Set', 1948617.11, 1310382.22, 0],
['Out', 6584288.18, 2254435.62, 0],

['Nov', 2429157.62, 2507720.53, 0],

['Dez', 2836858.15, 3705165.44, 0],
]);

var optionsIndVen1 = {
//title : 'VENDAS - Últimos três anos (Pedidos)',

['Jan/17', 161883.61, 1084525.37, ''],
['Fev/17', 141008.47, 668242.49, '']
]);

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([

['Ano', 'Índice'],
['2015', 5.8],
['2016', 12.4],
['2017', 2.2],
]);

var optionsIndCon1 = {
//title : 'CONTRATOS - Índice de Atrasos / Pontualidade',
//width: 700, height: 350,
redFrom: 20, redTo: 50,
yellowFrom: 5, yellowTo: 20,
greenFrom: 0, greenTo: 5,
minorTicks: 5,
max: 50

};

var chartIndCon1 = new google.visualization.Gauge(document.getElementById('grafIndCon1'));
chartIndCon1.draw(dataIndCon1, optionsIndCon1);
}
</script>

<table align="center" border="0" style="background-color: #f5f5f5">
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">
<br>
<b>VENDAS - Últimos três anos (Pedidos)</b>

</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">
<br>
<b>COMPRAS - Valor comprado nos últimos 12 meses (NF)</b>

</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">
<br>
<b>CONTRATOS - Índice de Atrasos / Pontualidade</b>
<br><br>
<div id="grafIndCon1" align="center" style="width: 700px; height: 200px;"></div>
[<b>260</b> de <b>4,450</b>]                   [<b>529</b> de <b>4,282</b>]                   [<b>28</b> de <b>1,268</b>] <br><br>
</td>
</tr>
</table>
</body>
</html>

Reply all

Reply to author

Forward

0 new messages