Create a serie for a chart with the values of the row grouping

MelodyNelson

Link to test case: https://live.datatables.net/xomujosa/7/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi.

In this test case, I want to use the values of the 4 rows called « Trimestre » (rowgroup) to create the series for a chart.

I have made a test case with what I could do : create the 4 series but I think I should do it on the draw event of the table but I can't find how to access to the rowgrouping infos from here.

I've put some comments on the test case and also fake values for the series (at the very end of the JS code) so you can see what kind of chart I want to create.

https://live.datatables.net/xomujosa/7/edit

Do you have any clue for me ?

Thanks

kthorngren

The rowGroup.startRender function inserts a tr for for each row. It is not part of the Datatables data. I can think of two options:

1. Use jQuery or Javascript methods to access the RowGroup rows. note that only the rows on the page are in the document. This might not be an issue for you as it looks like there is only one page. Use the browser's inspect tool to see the HTML structure of the table with RowGroup enabled.
2. Use a global variable to store the calculated values in the rowGroup.startRender function. Use this global variable to generate the chart data.

Kevin

MelodyNelson

It's working with a var inside rowgroup in the test case updated here.
I've add a lot a « traces » in the console to see the content of the var at differents steps.

https://live.datatables.net/xomujosa/10/edit

But when I use it in my page, the final array after the DT is empty (inside rowgroup the var has the right content = the 4 series).

The only difference I see between the live case and my page is all my code is inside $(document).ready(function() {

There is something that I don't understand here.

kthorngren

Possibly a Javascript scoping issue. Make sure var seriesGraphe_BCF = []; is defined in a scope that both Datatables and the charting code can use.

Kevin

MelodyNelson

I've put the array at the beginning like that (it's a copy/paste of my page without everything) but you can see that var seriesGraphe_BCF is at the beginning. It should be working ?

<script>
    
    // VARIABLES POUR LES TABLEAUX (LUXON)
    var today = DateTime.fromISO(DateTime.now());
    var currentYear = today.year;

    // DATASETS DES DIFFÉRENTS TABLEAUX 
    var dataSetBCF = <!--#4DHTML WEB_vt_dataIndicateursBCF -->; 

    // CREATION TABLEAUX POUR LES SERIES DES DIFFERENTS GRAPHES
    var seriesGraphe_BCF = new Array();
    console.log ('before DT exec :');
    console.log (seriesGraphe_BCF);

$(document).ready(function() {
    
// TABLEAU 10 ANS BCF
var table_BCF = new DataTable('#tableau_BCF', {
    // all JS code for the DT
});

// VARIABLES POUR LES GRAPHES
// catégories
var categories10ans = [currentYear-10, currentYear-9, currentYear-8, currentYear-7, currentYear-6, currentYear-5, currentYear-4, currentYear-3, currentYear-2, currentYear-1, currentYear];
// titres des graphes
var titre10ans_BCF = 'TEXT ' + (currentYear-10) + ' à ' + currentYear ;

// GRAPHE 10 ANS BCF    
Highcharts.chart('graphe_BCF', {
    // JS code for the chart
    
    series: seriesGraphe_BCF,
/*  series:  [{
        name: 'Trimestre 1',
        data: [3, 5, 1, 13, 3, 5, 1, 13, 3, 5, 11]
    }, {
        name: 'Trimestre 2',
        data: [14, 8, 8, 12, 14, 8, 8, 12, 14, 9, 15]
    }, {
        name: 'Trimestre 3',
        data: [0, 2, 6, 3, 0, 2, 6, 3, 5, 10, 13]
    }, {
        name: 'Trimestre 4',
        data: [0, 2, 6, 30, 10, 1, 2, 6, 3, 20, 16]
    }]
*/
    
});


// end document ready
 });
 
 </script>

I also tried to add IDs to each cell and get with simple jQuery the content but there is nothing. If I create a table without DT, I can get the content of the cell with this syntax. It's like the cells of the DT doesn't exist for the browser.

Exemple : in an HTML table, if i put this in the console this I will see an array of the cells but if I put the ID of a DT row, nothing.

var test_cells = $("#row1").find("td");

kthorngren

but you can see that var seriesGraphe_BCF is at the beginning. It should be working ?

From everything you posted it looks like it should be working. Make sure you don't have var seriesGraphe_BCF... somewhere else. Can you post a link showing the issue so we can help debug?

if i put this in the console this I will see an array of the cells but if I put the ID of a DT row, nothing.
var test_cells = $("#row1").find("td");

If the row is not on the displayed page then jQuery won't find it. Usually this happens when the row is on another page. But it might also be the case with hiding the rows in the RowGroups. If the row is not on the page then you will need to use row().node() passing the row-selector as the row ID.

See this example:
https://live.datatables.net/gahateqo/1/edit

var test_cells = $("#row3").find("td"); works with the row on the page. var test_cells = $("#row1").find("td"); does not work as the row is not on the page. However $(table.row("#row1").node()).find("td"); will find the row not on the page.

Kevin

MelodyNelson

Thanks for your feedback Kevin.
It was so frustrating that I gave up.
I can't share a link, it's a private website.
I did a test case, it works on it.
Nobody can help me with debugging on the website.
Finally, I've created the series for the chart in a collection when requesting the data. So there is not point to use DT anymore for this particular table except for not writing the HTML code... so much time lost on this page (I don't know if I learn something from it)
Sometimes, life is (⊙＿⊙') or (◔_◔)

kthorngren

I wonder if the problem is a matter of timing and order. It looks like you are drawing the chart sequentially after the Datatables init code. If you are fetching the data via ajax then the chart code will run before Datatables has completed initialization due to the asynchronous ajax operation.

Create the chart inside initComplete or better might be to use the new ready() API as I believe the RowGroup rows are inserted after the table is drawn.

Kevin

MelodyNelson

You're probably right for the timing matter. This page will contain 8 tables and 8 charts, I don't know if I'm ready to do more sports with it

But I keep your answer in mind for other cases and times, I'm sure I will have some opportunity to try it. I have a huge « rewriting » job for a website with tables everywhere !