02/08/15 18:14
macco_cl
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:
File .JS esterno (contenente tutte le funzioni)
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:
<HTML> <HEAD> <TITLE>Modifying Table Cell Content</TITLE> <STYLE TYPE="text/css"> THEAD {background-color:lightyellow; font-weight:bold} TFOOT {background-color:lightgreen; font-weight:bold} #myTABLE {background-color:bisque} </STYLE> <SCRIPT src="funzioni.js"></SCRIPT> <SCRIPT type="text/javascript" src="https://www.google.com/jsapi"></SCRIPT> <SCRIPT type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawRightY()); </SCRIPT> </HEAD> <BODY onLoad="init(),nascondi()"> <H1>Modifying Tables</H1> <HR> <FORM NAME="controls"> <FIELDSET> <LEGEND>Add/Remove Rows</LEGEND> <TABLE WIDTH="100%" CELLSPACING=20><TR> <TD><INPUT TYPE="button" VALUE="Append 1 Row" onClick="appendRow(this.form)"></TD> <TD><INPUT TYPE="button" VALUE="Insert 1 Row" onClick="addRow(this.form)"> at index: <SELECT NAME="insertIndex"> <OPTION VALUE="0">0 </SELECT></TD> <TD><INPUT TYPE="button" NAME="removeRowBtn" VALUE="Delete 1 Row" DISABLED onClick="removeRow(this.form)"> at index: <SELECT NAME="deleteIndex"> <OPTION VALUE="0">0 </SELECT></TD> </TR> </TABLE> </FIELDSET> <FIELDSET> <LEGEND>Add/Remove THEAD and TFOOT</LEGEND> <TABLE WIDTH="100%" CELLSPACING=20><TR> <TD><INPUT TYPE="button" NAME="addTHEAD" VALUE="Insert THEAD" onClick="insertTHEAD(this.form)"><BR> <INPUT TYPE="button" NAME="deleteTHEAD" VALUE="Remove THEAD" DISABLED onClick="removeTHEAD(this.form)"> </TD> <TD><INPUT TYPE="button" NAME="addTFOOT" VALUE="Insert TFOOT" onClick="insertTFOOT(this.form)"><BR> <INPUT TYPE="button" NAME="deleteTFOOT" VALUE="Remove TFOOT" DISABLED onClick="removeTFOOT(this.form)"> </TD> </TR> </TABLE> </FIELDSET> <FIELDSET> <LEGEND>Add/Remove Caption</LEGEND> <TABLE WIDTH="100%" CELLSPACING=20><TR> <TD><INPUT TYPE="button" NAME="addCaption" VALUE="Add Caption" onClick="insertCaption(this.form)"></TD> <TD>Text: <INPUT TYPE="text" NAME="captionText" SIZE=40 VALUE="Sample Caption"> <TD><INPUT TYPE="button" NAME="deleteCaption" VALUE="Delete Caption" DISABLED onClick="removeCaption(this.form)"></TD> <TD><INPUT TYPE="button" NAME="Prendi valori" VALUE="get" onClick="GetCellValues()"></TD> </TR> </TABLE> </FIELDSET> <!-- PNG<input type="checkbox" id="png" value="false" />--> <input type="button" value="Traccia Grafico" onclick="mostra(),setDati()" /> <!--Div that will hold the pie chart--> <div id="chart_div"></div> </FORM> <HR> <TABLE ID="myTABLE" CELLPADDING=10 BORDER=1> <TBODY> </TABLE> </BODY> </HTML>
File .JS esterno (contenente tutte le funzioni)
var theTable, theTableBody var myForm = document.forms.myForm; var png = document.getElementById("png"); function init() { theTable = (document.all) ? document.all.myTABLE : document.getElementById("myTABLE") theTableBody = theTable.tBodies[0] } function appendRow(form) { insertTableRow(form, -1) } function addRow(form) { insertTableRow(form, form.insertIndex.value) } function insertTableRow(form, where) { var now = new Date() var nowData = [now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds()] clearBGColors() var newCell var newRow = theTableBody.insertRow(where) for (var i = 0; i < nowData.length; i++) { newCell = newRow.insertCell(i) newCell.innerHTML = nowData[i] newCell.style.backgroundColor = "salmon" } updateRowCounters(form) } function removeRow(form) { theTableBody.deleteRow(form.deleteIndex.value) updateRowCounters(form) } function insertTHEAD(form) { var THEADData = ["Hours","Minutes","Seconds","Milliseconds"] var newCell var newTHEAD = theTable.createTHead() newTHEAD.id = "myTHEAD" var newRow = newTHEAD.insertRow(-1) for (var i = 0; i < THEADData.length; i++) { newCell = newRow.insertCell(i) newCell.innerHTML = THEADData[i] } updateRowCounters(form) form.addTHEAD.disabled = true form.deleteTHEAD.disabled = false } function removeTHEAD(form) { theTable.deleteTHead() updateRowCounters(form) form.addTHEAD.disabled = false form.deleteTHEAD.disabled = true } function insertTFOOT(form) { var TFOOTData = ["Hours","Minutes","Seconds","Milliseconds"] var newCell var newTFOOT = theTable.createTFoot() newTFOOT.id = "myTFOOT" var newRow = newTFOOT.insertRow(-1) for (var i = 0; i < TFOOTData.length; i++) { newCell = newRow.insertCell(i) newCell.innerHTML = TFOOTData[i] } updateRowCounters(form) form.addTFOOT.disabled = true form.deleteTFOOT.disabled = false } function removeTFOOT(form) { theTable.deleteTFoot() updateRowCounters(form) form.addTFOOT.disabled = false form.deleteTFOOT.disabled = true } function insertCaption(form) { var captionData = form.captionText.value var newCaption = theTable.createCaption() newCaption.innerHTML = captionData form.addCaption.disabled = true form.deleteCaption.disabled = false } function removeCaption(form) { theTable.deleteCaption() form.addCaption.disabled = false form.deleteCaption.disabled = true } // housekeeping functions function updateRowCounters(form) { var sel1 = form.insertIndex var sel2 = form.deleteIndex sel1.options.length = 0 sel2.options.length = 0 for (var i = 0; i < theTableBody.rows.length; i++) { sel1.options[i] = new Option(i, i) sel2.options[i] = new Option(i, i) } form.removeRowBtn.disabled = (i==0) } function clearBGColors() { for (var i = 0; i < theTableBody.rows.length; i++) { for (var j = 0; j < theTableBody.rows[i].cells.length; j++) { theTableBody.rows[i].cells[j].style.backgroundColor = "" } } } function GetCellValues() { var table = document.getElementById("myTABLE"); for (var r = 0, n = table.rows.length; r < n; r++) { for (var c = 0, m = table.rows[r].cells.length; c < m; c++) { alert(table.rows[r].cells[c].innerHTML); } } return table; } function mostra() { document.getElementById("chart_div").style.display="block"; } function nascondi() { document.getElementById("chart_div").style.display="none"; } function finestra(){ if(tf == true){ window.open("pngbar.html"); //document.getElementById("chart_div").style.display="none"; } } function setDati(){ //if(png.checked) // tf = true; //else // tf = false; drawRightY(); } function drawRightY() { tf = false; var valori = GetCellValues(); var f = new Array(); for (var i=0;i<valori.rows.length;i++) { f[i]=new Array(); for (var j=0;j<valori.rows[i].cells.length;j++) { f[i][j]= valori.rows[i].cells[j].innerHTML; } } var data = new google.visualization.arrayToDataTable(f,true); var options = { chart: { // title: z, }, hAxis: { minValue: 0, }, vAxis: { }, axes: { y: { 0: {side: 'right'} } } }; if (tf == false){ var material = new google.visualization.BarChart(document.getElementById('chart_div')); material.draw(data, options); } if (tf == true) { var chart_div = document.getElementById('chart_div'); var chart = new google.visualization.BarChart(chart_div); // Wait for the chart to finish drawing before calling the getImageURI() method. google.visualization.events.addListener(chart, 'ready', function () { chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">'; console.log(chart_div.innerHTML); }); options = {width: 1920, height: 1080} chart.draw(data, options); document.getElementById("chart_div").style.display="none"; window.open(chart.getImageURI()); } }
aaa