Answers

• kthorngren Posts: 21,322Questions: 26Answers: 4,949

  August 31

  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 Posts: 213Questions: 33Answers: 2

  August 31 edited August 31

  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 Posts: 21,322Questions: 26Answers: 4,949

  August 31

  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 Posts: 213Questions: 33Answers: 2

  August 31

  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 Posts: 21,322Questions: 26Answers: 4,949

  September 1 edited September 1

  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 Posts: 213Questions: 33Answers: 2

  September 1

  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 Posts: 21,322Questions: 26Answers: 4,949

  September 1 Answer ✓

  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 Posts: 213Questions: 33Answers: 2

  September 3

  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 !