I'm very new to using JavaScript and I'm trying to dynamically create separate charts for each row in an HTML table

HTML table:

With code:

<table>
    <tr>
        <th>Property</th>
        <th>France</th>
        <th>Germany</th>
        <th>Italy</th>
        <th>UK</th>
    </tr>
    <tr>
        <th>Coastline</th>
        <td>4,853</td>
        <td>2,389</td>
        <td>7,600</td>
        <td>12,429</td>
    </tr>
    <tr>
        <th>Life Expectancy</th>
        <td>81.8</td>
        <td>80.7</td>
        <td>82.2</td>
        <td>80.7</td>
    </tr>
    <tr>
        <th>Elevation</th>
        <td>375</td>
        <td>263</td>
        <td>538</td>
        <td>162</td>
    </tr>
    <tr>
        <th>Population</th>
        <td>66,836,154</td>
        <td>80,722,792</td>
        <td>62,007,540</td>
        <td>64,430,428</td>
    </tr>
    <tr>
        <th>Age</th>
        <td>41.2</td>
        <td>46.8</td>
        <td>45.1</td>
        <td>40.5</td>
    </tr>
</table>

I want to create a separate chart for each row (i.e. Coastline, Life Expectancy etc.) with each chart having the country column labels (France, Germany etc.) I've been trying to use chart.js, but whichever way would get the job done I'm happy with.

Any suggestions as to how to go about do this would be much appreciated, thanks.

I'm very new to using JavaScript and I'm trying to dynamically create separate charts for each row in an HTML table

HTML table:

With code:

<table>
    <tr>
        <th>Property</th>
        <th>France</th>
        <th>Germany</th>
        <th>Italy</th>
        <th>UK</th>
    </tr>
    <tr>
        <th>Coastline</th>
        <td>4,853</td>
        <td>2,389</td>
        <td>7,600</td>
        <td>12,429</td>
    </tr>
    <tr>
        <th>Life Expectancy</th>
        <td>81.8</td>
        <td>80.7</td>
        <td>82.2</td>
        <td>80.7</td>
    </tr>
    <tr>
        <th>Elevation</th>
        <td>375</td>
        <td>263</td>
        <td>538</td>
        <td>162</td>
    </tr>
    <tr>
        <th>Population</th>
        <td>66,836,154</td>
        <td>80,722,792</td>
        <td>62,007,540</td>
        <td>64,430,428</td>
    </tr>
    <tr>
        <th>Age</th>
        <td>41.2</td>
        <td>46.8</td>
        <td>45.1</td>
        <td>40.5</td>
    </tr>
</table>

I want to create a separate chart for each row (i.e. Coastline, Life Expectancy etc.) with each chart having the country column labels (France, Germany etc.) I've been trying to use chart.js, but whichever way would get the job done I'm happy with.

Any suggestions as to how to go about do this would be much appreciated, thanks.

• javascript
• charts

Share Improve this question Follow asked Apr 17, 2018 at 15:23 TobyBBrownTobyBBrown 16711 gold badge44 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

To achieve expected result, use below option of creating bar chart for each row using chart.js

1. Loop table data and create array of row data

2. Create canvas using unique id for row

3. Loop through the data array and create chart for each row data

Note: Scale and legend must be adjusted as required for each row

code sample - https://codepen.io/nagasai/pen/XqrqRj

var table = document.querySelector('table')
var tableArr = [];
var tableLab = [];
//loop all rows and form data array
for ( var i = 1; i < table.rows.length; i++ ) {
    tableArr.push([
     table.rows[i].cells[1].innerHTML,
     table.rows[i].cells[2].innerHTML,
     table.rows[i].cells[3].innerHTML,
     table.rows[i].cells[4].innerHTML
    ]);
tableLab.push(table.rows[i].cells[0].innerHTML)
var canvas = document.createElement("canvas");
canvas.setAttribute("id", "myChart"+i);
table.rows[i].cells[5].appendChild(canvas);
}
console.log(tableArr);

//loop array of data and create chart for each row
tableArr.forEach(function(e,i){
  var chartID = "myChart"+ (i+1)
  var ctx = document.getElementById(chartID).getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["France", "Germany", "Italy", "UK"],
        datasets: [{
            label: tableLab[i],
            data: e,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
})

table ,tr, td,th {
  border:1px solid black;
}

https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.2/Chart.min.js
<table>
    <tr>
        <th>Property</th>
        <th>France</th>
        <th>Germany</th>
        <th>Italy</th>
        <th>UK</th>
        <th>Chart</th>
    </tr>
    <tr>
        <th>Coastline</th>
        <td>4,853</td>
        <td>2,389</td>
        <td>7,600</td>
        <td>12,429</td>
        <td></td>
    </tr>
    <tr>
        <th>Life Expectancy</th>
        <td>81.8</td>
        <td>80.7</td>
        <td>82.2</td>
        <td>80.7</td>
        <td></td>
    </tr>
    <tr>
        <th>Elevation</th>
        <td>375</td>
        <td>263</td>
        <td>538</td>
        <td>162</td>
        <td></td>
    </tr>
    <tr>
        <th>Population</th>
        <td>66,836,154</td>
        <td>80,722,792</td>
        <td>62,007,540</td>
        <td>64,430,428</td>
        <td></td>
    </tr>
    <tr>
        <th>Age</th>
        <td>41.2</td>
        <td>46.8</td>
        <td>45.1</td>
        <td>40.5</td>
        <td></td>
    </tr>
</table>

Without an IDE in front of me, maybe you can do something like this:

$('table > tr').each(function() {
    var charName = $(this).find('th:eq(0)').val();
    var france = $(this).find('th:eq(1)').val();
    var germany= $(this).find('th:eq(2)').val();
    var italy= $(this).find('th:eq(3)').val();
    var uk = $(this).find('th:eq(4)').val();

    //Give your chart these values via a method that takes these countries as args
     buildChart(chartName,france, germany, italy, uk);
});

Basically for each group of table > tr you want to take the associated country's data and use it to build it's own chart. You will most likely have to play around with this to get it to work, but this should hopefully point you in the right direction.