Questo sito utilizza cookies, anche di terze parti, per mostrare pubblicità e servizi in linea con il tuo account. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - Prendere valori da tabella dinamica e rappresentarli graficamente
Forum - Javascript - Prendere valori da tabella dinamica e rappresentarli graficamente

Avatar
macco_cl (Normal User)
Rookie


Messaggi: 34
Iscritto: 27/02/2007

Segnala al moderatore
Postato alle 20:14
Domenica, 02/08/2015
Buonasera a tutti, da poco ho iniziato a programmare in javascript quindi sono molto a livello base.

Spero mi possiate aiutare con il mio problema che ormai da due giorni mi sta facendo letteralmente impazzire.

Quello che devo realizzare è una tabella dinamica a cui posso aggiungere e rimuovere righe in ogni momento, una volta creata la tabella dovrei prendere i valori inseriti e passarli a google charts in modo che me li possa rappresentare.

In teoria dovrei essere riuscito ad acquisire i valori della tabella, ma secondo me sbaglio qualcosa (forse metto i valori nell'array bidimensionale in modo errato).

Il risultato che ottengo da google charts invece del grafico è una carina scritta rossa che dice:

Data column(s) for axis #0 cannot be of type string

Spero mi possiate aiutare perché sono fermo e non riesco a capire dove sbaglio.

Premetto che forse questo che sto seguendo non è il miglior modo di procedere per affrontare il problema ma vi sarei grato se riusciste ad aiutarmi a risolvere il problema ed eventualmente una volta risolto illustrarmi la miglior strada che avrei dovuto seguire, in modo da capire così dove sbagliavo e per un futuro sapere già in che direzione lavorare.

ringrazio in anticipo.

Di seguito il codice:

HTML:

Codice sorgente - presumibilmente Delphi

  1. <HTML>
  2. <HEAD>
  3. <TITLE>Modifying Table Cell Content</TITLE>
  4. <STYLE TYPE="text/css">
  5. THEAD {background-color:lightyellow; font-weight:bold}
  6. TFOOT {background-color:lightgreen; font-weight:bold}
  7. #myTABLE {background-color:bisque}
  8. </STYLE>
  9.         <SCRIPT src="funzioni.js"></SCRIPT>
  10.     <SCRIPT type="text/javascript" src="https://www.google.com/jsapi"></SCRIPT>
  11.     <SCRIPT type="text/javascript">
  12.  
  13.       // Load the Visualization API and the piechart package.
  14.       google.load('visualization', '1.0', {'packages':['corechart']});
  15.  
  16.       // Set a callback to run when the Google Visualization API is loaded.
  17.       google.setOnLoadCallback(drawRightY());
  18.  
  19. </SCRIPT>
  20.  
  21. </HEAD>
  22. <BODY onLoad="init(),nascondi()">
  23. <H1>Modifying Tables</H1>
  24. <HR>
  25. <FORM NAME="controls">
  26. <FIELDSET>
  27. <LEGEND>Add/Remove Rows</LEGEND>
  28. <TABLE WIDTH="100%" CELLSPACING=20><TR>
  29. <TD><INPUT TYPE="button" VALUE="Append 1 Row"
  30.     onClick="appendRow(this.form)"></TD>
  31. <TD><INPUT TYPE="button" VALUE="Insert 1 Row" onClick="addRow(this.form)"> at index:
  32.     <SELECT NAME="insertIndex">
  33.         <OPTION VALUE="0">0
  34.     </SELECT></TD>
  35. <TD><INPUT TYPE="button" NAME="removeRowBtn" VALUE="Delete 1 Row" DISABLED
  36.     onClick="removeRow(this.form)"> at index:
  37.     <SELECT NAME="deleteIndex">
  38.         <OPTION VALUE="0">0
  39.     </SELECT></TD>
  40. </TR>
  41. </TABLE>
  42. </FIELDSET>
  43. <FIELDSET>
  44. <LEGEND>Add/Remove THEAD and TFOOT</LEGEND>
  45. <TABLE WIDTH="100%" CELLSPACING=20><TR>
  46. <TD><INPUT TYPE="button" NAME="addTHEAD" VALUE="Insert THEAD"
  47.     onClick="insertTHEAD(this.form)"><BR>
  48.     <INPUT TYPE="button" NAME="deleteTHEAD" VALUE="Remove THEAD" DISABLED
  49.         onClick="removeTHEAD(this.form)">
  50. </TD>
  51. <TD><INPUT TYPE="button" NAME="addTFOOT" VALUE="Insert TFOOT"
  52.     onClick="insertTFOOT(this.form)"><BR>
  53.     <INPUT TYPE="button" NAME="deleteTFOOT" VALUE="Remove TFOOT" DISABLED
  54.         onClick="removeTFOOT(this.form)">
  55. </TD>
  56. </TR>
  57. </TABLE>
  58. </FIELDSET>
  59. <FIELDSET>
  60. <LEGEND>Add/Remove Caption</LEGEND>
  61. <TABLE WIDTH="100%" CELLSPACING=20><TR>
  62. <TD><INPUT TYPE="button" NAME="addCaption" VALUE="Add Caption"
  63.     onClick="insertCaption(this.form)"></TD>
  64. <TD>Text: <INPUT TYPE="text" NAME="captionText" SIZE=40 VALUE="Sample Caption">
  65. <TD><INPUT TYPE="button" NAME="deleteCaption" VALUE="Delete Caption" DISABLED
  66.     onClick="removeCaption(this.form)"></TD>
  67.    
  68. <TD><INPUT TYPE="button" NAME="Prendi valori" VALUE="get"
  69.     onClick="GetCellValues()"></TD>
  70.  
  71. </TR>
  72. </TABLE>
  73. </FIELDSET>
  74. <!-- PNG<input type="checkbox" id="png" value="false" />-->
  75.            <input type="button" value="Traccia Grafico" onclick="mostra(),setDati()" />
  76.  
  77.     <!--Div that will hold the pie chart-->
  78.        
  79.                 <div id="chart_div"></div>
  80.  
  81. </FORM>
  82. <HR>
  83. <TABLE ID="myTABLE" CELLPADDING=10 BORDER=1>
  84. <TBODY>
  85. </TABLE>
  86.  
  87.  
  88.           </BODY>
  89. </HTML>



File .JS esterno (contenente tutte le funzioni)

Codice sorgente - presumibilmente Php

  1. var theTable, theTableBody
  2. var myForm = document.forms.myForm;    
  3. var png =  document.getElementById("png");
  4.  
  5. function init() {
  6.     theTable = (document.all) ? document.all.myTABLE :
  7.         document.getElementById("myTABLE")
  8.     theTableBody = theTable.tBodies[0]
  9. }
  10. function appendRow(form) {
  11.     insertTableRow(form, -1)
  12. }
  13. function addRow(form) {
  14.     insertTableRow(form, form.insertIndex.value)
  15. }
  16. function insertTableRow(form, where) {
  17.     var now = new Date()
  18.     var nowData = [now.getHours(), now.getMinutes(), now.getSeconds(),
  19.         now.getMilliseconds()]
  20.     clearBGColors()
  21.     var newCell
  22.     var newRow = theTableBody.insertRow(where)
  23.     for (var i = 0; i < nowData.length; i++) {
  24.         newCell = newRow.insertCell(i)
  25.         newCell.innerHTML = nowData[i]
  26.         newCell.style.backgroundColor = "salmon"
  27.     }
  28.     updateRowCounters(form)
  29. }
  30. function removeRow(form) {
  31.     theTableBody.deleteRow(form.deleteIndex.value)
  32.     updateRowCounters(form)
  33. }
  34. function insertTHEAD(form) {
  35.     var THEADData = ["Hours","Minutes","Seconds","Milliseconds"]
  36.     var newCell
  37.     var newTHEAD = theTable.createTHead()
  38.     newTHEAD.id = "myTHEAD"
  39.     var newRow = newTHEAD.insertRow(-1)
  40.     for (var i = 0; i < THEADData.length; i++) {
  41.         newCell = newRow.insertCell(i)
  42.         newCell.innerHTML = THEADData[i]
  43.     }
  44.     updateRowCounters(form)
  45.     form.addTHEAD.disabled = true
  46.     form.deleteTHEAD.disabled = false
  47. }
  48. function removeTHEAD(form) {
  49.     theTable.deleteTHead()    
  50.     updateRowCounters(form)
  51.     form.addTHEAD.disabled = false
  52.     form.deleteTHEAD.disabled = true
  53. }
  54. function insertTFOOT(form) {
  55.     var TFOOTData = ["Hours","Minutes","Seconds","Milliseconds"]
  56.     var newCell
  57.     var newTFOOT = theTable.createTFoot()
  58.     newTFOOT.id = "myTFOOT"
  59.     var newRow = newTFOOT.insertRow(-1)
  60.     for (var i = 0; i < TFOOTData.length; i++) {
  61.         newCell = newRow.insertCell(i)
  62.         newCell.innerHTML = TFOOTData[i]
  63.     }
  64.     updateRowCounters(form)
  65.     form.addTFOOT.disabled = true
  66.     form.deleteTFOOT.disabled = false
  67. }
  68.  
  69. function removeTFOOT(form) {
  70.     theTable.deleteTFoot()    
  71.     updateRowCounters(form)
  72.     form.addTFOOT.disabled = false
  73.     form.deleteTFOOT.disabled = true
  74. }
  75. function insertCaption(form) {
  76.     var captionData = form.captionText.value
  77.     var newCaption = theTable.createCaption()
  78.     newCaption.innerHTML = captionData
  79.     form.addCaption.disabled = true
  80.     form.deleteCaption.disabled = false
  81. }
  82. function removeCaption(form) {
  83.     theTable.deleteCaption()    
  84.     form.addCaption.disabled = false
  85.     form.deleteCaption.disabled = true
  86. }
  87. // housekeeping functions
  88. function updateRowCounters(form) {
  89.     var sel1 = form.insertIndex
  90.     var sel2 = form.deleteIndex
  91.     sel1.options.length = 0
  92.     sel2.options.length = 0
  93.     for (var i = 0; i < theTableBody.rows.length; i++) {
  94.         sel1.options[i] = new Option(i, i)
  95.         sel2.options[i] = new Option(i, i)
  96.     }
  97.     form.removeRowBtn.disabled = (i==0)
  98. }
  99. function clearBGColors() {
  100.     for (var i = 0; i < theTableBody.rows.length; i++) {
  101.         for (var j = 0; j < theTableBody.rows[i].cells.length; j++) {
  102.             theTableBody.rows[i].cells[j].style.backgroundColor = ""        
  103.         }
  104.     }
  105. }
  106.  
  107. function GetCellValues() {
  108.                
  109.         var table = document.getElementById("myTABLE");
  110.        
  111.         for (var r = 0, n = table.rows.length; r < n; r++) {
  112.             for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
  113.                 alert(table.rows[r].cells[c].innerHTML);
  114.             }
  115.         }
  116.        
  117.         return table;
  118. }
  119.  
  120. function mostra() {
  121.         document.getElementById("chart_div").style.display="block";
  122. }
  123.  
  124. function nascondi() {
  125.         document.getElementById("chart_div").style.display="none";
  126. }      
  127.        
  128. function finestra(){
  129.  
  130.                 if(tf == true){
  131.                         window.open("pngbar.html");
  132.                         //document.getElementById("chart_div").style.display="none";
  133.                 }
  134. }
  135.  
  136. function setDati(){
  137.                
  138.                                
  139.                 //if(png.checked)
  140.                 //      tf = true;
  141.                 //else
  142.                 //      tf = false;
  143.                        
  144.                 drawRightY();
  145.                
  146. }
  147.        
  148.        
  149.  
  150. function drawRightY() {
  151.                 tf = false;
  152.                 var valori = GetCellValues();  
  153.                
  154.                
  155.                 var f = new Array();
  156.                
  157.                                
  158.                 for (var i=0;i<valori.rows.length;i++) {
  159.                         f[i]=new Array();
  160.                                 for (var j=0;j<valori.rows[i].cells.length;j++) {
  161.                                         f[i][j]= valori.rows[i].cells[j].innerHTML;
  162.                                        
  163.                         }                      
  164.                 }
  165.                
  166.                                
  167.                
  168.                 var data = new google.visualization.arrayToDataTable(f,true);
  169.  
  170.                  
  171.                
  172.       var options = {
  173.         chart: {
  174.          // title: z,
  175.         },
  176.         hAxis: {
  177.  
  178.           minValue: 0,
  179.         },
  180.         vAxis: {
  181.  
  182.         },
  183.  
  184.                
  185.         axes: {
  186.           y: {
  187.             0: {side: 'right'}
  188.           }
  189.         }
  190.       };
  191.           if (tf == false){
  192.                   var material = new google.visualization.BarChart(document.getElementById('chart_div'));
  193.                   material.draw(data, options);
  194.           }
  195.            if (tf == true) {
  196.                    var chart_div = document.getElementById('chart_div');
  197.                    var chart = new google.visualization.BarChart(chart_div);
  198.  
  199.                   // Wait for the chart to finish drawing before calling the getImageURI() method.
  200.                     google.visualization.events.addListener(chart, 'ready', function () {
  201.                          chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
  202.                          console.log(chart_div.innerHTML);
  203.                        
  204.                    });
  205.  
  206.    
  207.                  
  208.                    options = {width: 1920, height: 1080}
  209.                    chart.draw(data, options);
  210.                    document.getElementById("chart_div").style.display="none";
  211.                    window.open(chart.getImageURI());
  212.                  
  213.                 }
  214.        
  215.          
  216.          
  217. }




PM Quote
Avatar
pierotofy (Admin)
Guru^2


Messaggi: 6223
Iscritto: 04/12/2003

Segnala al moderatore
Postato alle 15:07
Mercoledì, 05/08/2015
Cambia:

Codice sorgente - presumibilmente Plain Text

  1. f[i][j]= valori.rows[i].cells[j].innerHTML;



Con:

Codice sorgente - presumibilmente Plain Text

  1. f[i][j]= parseFloat(valori.rows[i].cells[j].innerHTML);



"Data column(s) for axis #0 cannot be of type string" significa che stai passando delle stringhe invece che dei numeri.


Il mio blog: https://piero.dev
PM Quote