Question

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

<table border="0">

    <thead>
    <tr>
            <th scope="row" class="n-1">Month</th>
            <th class="n-2">N.o.L.</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 put 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 this kind of chart: CHART URL from html table.

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

Any suggestion much appreciated.

---

EDIT:

Not 100% proud of it, but does work:

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);


    }

LIVE EXAMPLE HERE

Any way I could improve that code?

Answer 1

I think the other options will work too, this may just be a slightly shorter way. Gviz includes a convenient arrayToDataTable function, so, if you can first get your html table into a 2d array format (first array is header), you can then quickly generate a gviz dataTable from that.

Here is a way of doing that using the table you included above – it may need minor modification depending on your table structure. Note: You will also need to add a div ‘table_div’ to your html for your new gviz table to be drawn in.

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 that helps.