Geek Answers Handbook

Google visualization - getting data from html table

Is it possible to get data like this (html table):

<table border="0"> <thead> <tr> <th scope="row" class="n-1">Month</th> <th class="n-2">NoL</th> <th class="n-3">Val.</th> <th class="n-4">Total</th> <th class="n-5">Num.o.Val.Total</th> </tr> </thead> <tbody> <tr> <td class="n-1">1</td> <td class="n-2">125</td> <td class="n-3">0</td> <td scope="col" class="n-4">125</td> <td class="n-5">0</td> </tr> <tr> <td class="n-1">2</td> <td class="n-2">125</td> <td class="n-3">48.75</td> <td scope="col" class="n-4">173.75</td> <td class="n-5">5</td> </tr> <tr> <td class="n-1">3</td> <td class="n-2">125</td> <td class="n-3">97.5</td> <td scope="col" class="n-4">222.5</td> <td class="n-5">10</td> </tr> </tbody> </table>

with jQuery and placed inside the google visualization script in this format?

  data.addRows(13); // number of rows + 1 data.setValue(0, 0, '1'); // month = 1 (index, 0, $month) data.setValue(0, 1, 125); // for Month =1, Total = 123 (index, 1, $total) data.setValue(0, 2, 0); // for Month = 1, Num.o.Val.Total = 5 (index, 2, $Num.o.Val.Total) etc...

The goal is to create a graph like this: the CHART URL from the html table.

I want to set MONTH COLUMN as hAxis and TOTAL COLUMN as vAxis + Num.o.Val.Total (second line).

Any suggestion is much appreciated.

EDIT:

Not 100% proud of this, but it works:

 var data = new google.visualization.DataTable(); data.addColumn('string', 'Month'); data.addColumn('number', 'Total'); data.addColumn('number', 'Num.o.Val.Total'); var NumOfRows = $('table tbody tr').length; // number of rows data.addRows(NumOfRows); for ( i = 0; i < NumOfRows; ++i) { var CurrentPlusOne = i+1; var Month = $('table tbody tr:nth-child(' + CurrentPlusOne + ')').children(':first-child').html(); var Total = parseInt($('table tbody tr:nth-child(' + CurrentPlusOne + ')').children().eq(3).html()); var TotalNum = parseInt($('table tbody tr:nth-child(' + CurrentPlusOne + ')').children().eq(4).html()); data.setValue(i, 0, Month); data.setValue(i, 1, Total); data.setValue(i, 2, TotalNum); }

DIRECT EXAMPLE HERE

Anyway, could I improve this code?

+4
source share
2 answers

I think other options will work too, it might be a little shorter. Gviz includes the convenient arrayToDataTable function, so if you can get the html table in 2d array format first (the first array is the header), you can quickly generate gviz dataTable from this.

Here's how to do it using the table above - this may require minor changes depending on your table structure. Note. You will also need to add the div 'table_div' to your html for your new gviz table into which you need to insert.

 function drawVisualization() { var values = []; // to hold our values for data table // get our values $('table tr').each(function(i, v){ values[i] = []; // select either th or td, doesn't matter $(this).children('th,td').each(function(ii, vv){ values[i][ii] = $(this).html(); }); }); // convert 2d array to dataTable and draw var data = google.visualization.arrayToDataTable(values); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data); } .... .... <!--somewhere in your html--> <div id='table_div'></div>

Hope this helps.

+2
source

To link the chart dynamically, try saving the data from the html table to an array, use the following method to draw the chart.

 function DrawChart(element, title, dataTable, xAxis) { // Create our data table. var data = new google.visualization.DataTable(); var raw_data = dataTable; data.addColumn('string', 'Month'); //Insert the first value of each array to represent the year. for (var i = 0; i < raw_data.length; ++i) { data.addColumn('number', raw_data[i][0]); } data.addRows(xAxis.length); //Insert xAxis values into the data table. for (var j = 0; j < xAxis.length; ++j) { data.setValue(j, 0, xAxis[j]); } //Insert input values into the data table. for (var i = 0; i < raw_data.length; ++i) { for (var j = 1; j < raw_data[i].length; ++j) { data.setValue(j - 1, i + 1, raw_data[i][j]); } } //Draw the chart. var div = $('#' + element); new google.visualization.LineChart(div.get(0)).draw(data, { title: title, width: div.width() });

}

  • is a container div.
  • title is the name of the chart.
  • dataTable is a jagged array containing values ​​for each legend.
  • xaxis is an array of xaxis values.
0
source

More articles:


All Articles