Newsgroup: it.comp.www.html
Titolo: Grafici di google

saluto a tutti
 
ho provato ad usare i grafici di google ed ho realizzato un programma 
che mi genere l'html sottostante. sono le prime prove quindi ci sono 
alcune inesattezze ma quello che vorrei ottenere e' chiaro
 
un html con una tabella di due colonne  e n righe in cui nella prima 
colonna ci sia un grafico e nella seconda dei dati
 
sembra che google non consenta di avere questo tipo di approccio
 
soluzioni?
grazie
 
 
<html>
   <head>
<meta http-equiv="Refresh" content="120; URL=cgi_prod21.pgm">
<title>Analisi produzione linee taglio </title>
<link href="/sf_cgidev2/css/css.css" rel="stylesheet" type="text/css">
<script language=javascript>
   var reNumber= /^\s*\d+\,\d{2}$/
function setsbm(xxx) {
    if ((xxx=="list") && (document.form1.xcode.value=="")) {
         alert("alert")
         return
        }
    document.form1.xrequest.value=xxx
    document.form1.submit()
}
</script>
</head>
 
 
<body>
<body bgcolor="#000000">
<body text="#7FFF00">
<form name=form1 method=post action="/sfcgidev2p/cgi_prod01.pgm"> <!-- 
method=get -->
<input type=hidden name=xrequest>
<font face="Courier New">
 
 
 
<table border="1">
<tr>
<td>
     <script type='text/javascript' 
src='
https://www.google.com/jsapi
'></script>
     <script type='text/javascript'>
       google.load('visualization', '1', {packages:['gauge']});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Label');
         data.addColumn('number', 'Value');
         data.addRows(6);
         data.setValue(0 , 0, '1-LTN1500');
         data.setValue(0 , 1, 66);
         data.setValue(1 , 0, '4-LTN1850');
         data.setValue(1 , 1, 0);
         data.setValue(2 , 0, '6-LTN1650');
         data.setValue(2 , 1, 0);
         data.setValue(3 , 0, '3-LTF1500');
         data.setValue(3 , 1, 0);
         data.setValue(4 , 0, '5-LTF1100');
         data.setValue(4 , 1, 0);
         data.setValue(5 , 0, '7-LTF1650');
         data.setValue(5 , 1, 0);
         var chart = new 
google.visualization.Gauge(document.getElementById('chart_div'));
         var options = {width: 1100, height: 350,
	   redFrom: 0   ,     	 redTo: 75   ,
	yellowFrom: 75  ,     yellowTo: 90   ,
          greenFrom: 90  ,      greenTo: 100  ,	
	minorTicks: 25 };
         chart.draw(data, options);
       }
     </script>
   </head>
   <body> <div id='chart_div'></div> </body>
</td>
  <td>
<p><font size="2" face="arial" color="white">Operatore N. (1)
<br>LTN 1500 - turni: 13
<br>LTF 1500 - turni: 0
<br>LTN 1850 - turni: 0
<br>LTN 1100 - turni: 0
<br>LTN 1650 - turni: 0
<br>LTF 1650 - turni: 0
</font></p>
</td>
</tr>
 
 
<tr>
<td>
     <script type='text/javascript' 
src='
https://www.google.com/jsapi
'></script>
     <script type='text/javascript'>
       google.load('visualization', '1', {packages:['gauge']});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Label');
         data.addColumn('number', 'Value');
         data.addRows(6);
         data.setValue(0 , 0, '1-LTN1500');
         data.setValue(0 , 1, 0);
         data.setValue(1 , 0, '4-LTN1850');
         data.setValue(1 , 1, 0);
         data.setValue(2 , 0, '6-LTN1650');
         data.setValue(2 , 1, 86);
         data.setValue(3 , 0, '3-LTF1500');
         data.setValue(3 , 1, 0);
         data.setValue(4 , 0, '5-LTF1100');
         data.setValue(4 , 1, 0);
         data.setValue(5 , 0, '7-LTF1650');
         data.setValue(5 , 1, 0);
         var chart = new 
google.visualization.Gauge(document.getElementById('chart_div'));
         var options = {width: 1100, height: 350,
	   redFrom: 0   ,     	 redTo: 75   ,
	yellowFrom: 75  ,     yellowTo: 90   ,
          greenFrom: 90  ,      greenTo: 100  ,	
	minorTicks: 25 };
         chart.draw(data, options);
       }
     </script>
   </head>
   <body> <div id='chart_div'></div> </body>
</td>
  <td>
<p><font size="2" face="arial" color="white">Operatore N. (2)
<br>LTN 1500 - turni: 0
<br>LTF 1500 - turni: 0
<br>LTN 1850 - turni: 0
<br>LTN 1100 - turni: 0
<br>LTN 1650 - turni: 168
<br>LTF 1650 - turni: 0
</font></p>
</td>
</tr>
 
 
<tr>
<td>
     <script type='text/javascript' 
src='
https://www.google.com/jsapi
'></script>
     <script type='text/javascript'>
       google.load('visualization', '1', {packages:['gauge']});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Label');
         data.addColumn('number', 'Value');
         data.addRows(6);
         data.setValue(0 , 0, '1-LTN1500');
         data.setValue(0 , 1, 63);
         data.setValue(1 , 0, '4-LTN1850');
         data.setValue(1 , 1, 0);
         data.setValue(2 , 0, '6-LTN1650');
         data.setValue(2 , 1, 0);
         data.setValue(3 , 0, '3-LTF1500');
         data.setValue(3 , 1, 0);
         data.setValue(4 , 0, '5-LTF1100');
         data.setValue(4 , 1, 0);
         data.setValue(5 , 0, '7-LTF1650');
         data.setValue(5 , 1, 0);
         var chart = new 
google.visualization.Gauge(document.getElementById('chart_div'));
         var options = {width: 1100, height: 350,
	   redFrom: 0   ,     	 redTo: 75   ,
	yellowFrom: 75  ,     yellowTo: 90   ,
          greenFrom: 90  ,      greenTo: 100  ,	
	minorTicks: 25 };
         chart.draw(data, options);
       }
     </script>
   </head>
   <body> <div id='chart_div'></div> </body>
</td>
  <td>
<p><font size="2" face="arial" color="white">Operatore N. (3)
<br>LTN 1500 - turni: 4
<br>LTF 1500 - turni: 0
<br>LTN 1850 - turni: 0
<br>LTN 1100 - turni: 0
<br>LTN 1650 - turni: 0
<br>LTF 1650 - turni: 0
</font></p>
</td>
</tr>
 
 
<tr>
<td>
     <script type='text/javascript' 
src='
https://www.google.com/jsapi
'></script>
     <script type='text/javascript'>
       google.load('visualization', '1', {packages:['gauge']});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Label');
         data.addColumn('number', 'Value');
         data.addRows(6);
         data.setValue(0 , 0, '1-LTN1500');
         data.setValue(0 , 1, 0);
         data.setValue(1 , 0, '4-LTN1850');
         data.setValue(1 , 1, 0);
         data.setValue(2 , 0, '6-LTN1650');
         data.setValue(2 , 1, 75);
         data.setValue(3 , 0, '3-LTF1500');
         data.setValue(3 , 1, 0);
         data.setValue(4 , 0, '5-LTF1100');
         data.setValue(4 , 1, 0);
         data.setValue(5 , 0, '7-LTF1650');
         data.setValue(5 , 1, 0);
         var chart = new 
google.visualization.Gauge(document.getElementById('chart_div'));
         var options = {width: 1100, height: 350,
	   redFrom: 0   ,     	 redTo: 75   ,
	yellowFrom: 75  ,     yellowTo: 90   ,
          greenFrom: 90  ,      greenTo: 100  ,	
	minorTicks: 25 };
         chart.draw(data, options);
       }
     </script>
   </head>
   <body> <div id='chart_div'></div> </body>
</td>
  <td>
<p><font size="2" face="arial" color="white">Operatore N. (25)
<br>LTN 1500 - turni: 0
<br>LTF 1500 - turni: 0
<br>LTN 1850 - turni: 0
<br>LTN 1100 - turni: 0
<br>LTN 1650 - turni: 6
<br>LTF 1650 - turni: 0
</font></p>
</td>
</tr>
 
 
<tr>
<td>
     <script type='text/javascript' 
src='
https://www.google.com/jsapi
'></script>
     <script type='text/javascript'>
       google.load('visualization', '1', {packages:['gauge']});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Label');
         data.addColumn('number', 'Value');
         data.addRows(6);
         data.setValue(0 , 0, '1-LTN1500');
         data.setValue(0 , 1, 0);
         data.setValue(1 , 0, '4-LTN1850');
         data.setValue(1 , 1, 0);
         data.setValue(2 , 0, '6-LTN1650');
         data.setValue(2 , 1, 0);
         data.setValue(3 , 0, '3-LTF1500');
         data.setValue(3 , 1, 0);
         data.setValue(4 , 0, '5-LTF1100');
         data.setValue(4 , 1, 82);
         data.setValue(5 , 0, '7-LTF1650');
         data.setValue(5 , 1, 72);
         var chart = new 
google.visualization.Gauge(document.getElementById('chart_div'));
         var options = {width: 1100, height: 350,
	   redFrom: 0   ,     	 redTo: 75   ,
	yellowFrom: 75  ,     yellowTo: 90   ,
          greenFrom: 90  ,      greenTo: 100  ,	
	minorTicks: 25 };
         chart.draw(data, options);
       }
     </script>
   </head>
   <body> <div id='chart_div'></div> </body>
</td>
  <td>
<p><font size="2" face="arial" color="white">Operatore N. (26)
<br>LTN 1500 - turni: 0
<br>LTF 1500 - turni: 0
<br>LTN 1850 - turni: 0
<br>LTN 1100 - turni: 94
<br>LTN 1650 - turni: 0
<br>LTF 1650 - turni: 65
</font></p>
</td>
</tr>
 
 
<tr>
<td>
     <script type='text/javascript' 
src='
https://www.google.com/jsapi
'></script>
     <script type='text/javascript'>
       google.load('visualization', '1', {packages:['gauge']});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Label');
         data.addColumn('number', 'Value');
         data.addRows(6);
         data.setValue(0 , 0, '1-LTN1500');
         data.setValue(0 , 1, 14);
         data.setValue(1 , 0, '4-LTN1850');
         data.setValue(1 , 1, 80);
         data.setValue(2 , 0, '6-LTN1650');
         data.setValue(2 , 1, 0);
         data.setValue(3 , 0, '3-LTF1500');
         data.setValue(3 , 1, 0);
         data.setValue(4 , 0, '5-LTF1100');
         data.setValue(4 , 1, 0);
         data.setValue(5 , 0, '7-LTF1650');
         data.setValue(5 , 1, 0);
         var chart = new 
google.visualization.Gauge(document.getElementById('chart_div'));
         var options = {width: 1100, height: 350,
	   redFrom: 0   ,     	 redTo: 75   ,
	yellowFrom: 75  ,     yellowTo: 90   ,
          greenFrom: 90  ,      greenTo: 100  ,	
	minorTicks: 25 };
         chart.draw(data, options);
       }
     </script>
   </head>
   <body> <div id='chart_div'></div> </body>
</td>
  <td>
<p><font size="2" face="arial" color="white">Operatore N. (27)
<br>LTN 1500 - turni: 1
<br>LTF 1500 - turni: 0
<br>LTN 1850 - turni: 13
<br>LTN 1100 - turni: 0
<br>LTN 1650 - turni: 0
<br>LTF 1650 - turni: 0
</font></p>
</td>
</tr>
 
 
<input type="submit" name="submit2" value="SITUAZIONE ATTUALE" 
value="Situazione attuale" >
<br>
<br>
<br>
<input type="button" name="submit3" value="CONFRONTO ANNUALE" 
value="CONFRONTO ANNUALE" 
onclick="location.href='/sfcgidev2p/cgi_prod11.pgm'" >
</td>
</tr>
</table>
<p><font size="5" face="arial" color="white">
messaggio </font></p>
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 soluzioni?
 
Io i google charts li ho sempre usati con php, prendo il risultato 
binario dell'immagine con il curl e lo butto dove voglio (a me è sempre 
servito su pdf).
 
--
Z.
