File
Login or Register via GitHub
<html> <head> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <link href="https://cdn.datatables.net/v/bm/dt-2.1.4/rg-1.5.0/datatables.min.css" rel="stylesheet"> <script src="https://cdn.datatables.net/v/bm/dt-2.1.4/rg-1.5.0/datatables.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head> <body> <figure class="highcharts-figure"> <div id="graphe_BCF"></div></figure> <div class="container"> <table id="tableau_trimestres" class="table is-bordered indicateurs is-hoverable is-narrow font80rem"> <thead> <tr class="has-background-light"> <th class="is-narrow has-text-weight-semibold dimgrey">Année</th> <th class="is-narrow has-text-weight-semibold dimgrey">2014</th> <th class="is-narrow has-text-weight-semibold dimgrey">2015</th> <th class="is-narrow has-text-weight-semibold dimgrey">2016</th> <th class="is-narrow has-text-weight-semibold dimgrey">2017</th> <th class="is-narrow has-text-weight-semibold dimgrey">2018</th> <th class="is-narrow has-text-weight-semibold dimgrey">2019</th> <th class="is-narrow has-text-weight-semibold dimgrey">2020</th> <th class="is-narrow has-text-weight-semibold dimgrey">2021</th> <th class="is-narrow has-text-weight-semibold dimgrey">2022</th> <th class="is-narrow has-text-weight-semibold dimgrey">2023</th> <th class="is-narrow has-text-weight-semibold dimgrey">2024</th> </tr> </thead> <tfoot> <tr> <th class="is-narrow has-background-light totalIndicateur has-text-weight-semibold">Total</th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> <th class="is-narrow totalIndicateur has-text-weight-medium"></th> </tr> <tr> <th class="is-narrow has-background-light moyenneIndicateur has-text-weight-semibold">Moyenne</th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> <th class="is-narrow moyenneIndicateur has-text-weight-medium"></th> </tr> </tfoot></table> </div> </body></html>body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff;} table.indicateurs.dataTable {border-collapse: collapse; border-color:silver !important;} table.table.indicateurs td.sorting_1, table.table.indicateurs td.sorting_2, table.table.indicateurs td.sorting_3 {box-shadow: none !important;}.totalIndicateur {color:Chocolate !important;}.moyenneIndicateur {color:#008cb3 !important;}// variables pour le tableau (luxon)var DateTime = luxon.DateTime;var today = DateTime.fromISO(DateTime.now());var currentYear = today.year;// VAR FOR THE CHART SERIESvar seriesGraphe_BCF = [];console.log ('before DT exec :');console.log (seriesGraphe_BCF); var table2 = new DataTable('#tableau_trimestres', { //language: myLanguage, ordering: false, scrollX: true, data: [ { "mois": 1, "trimestre": 1, "2014": { "annee": 2014, "mois": 1, "reel": 60619, "trimestre": 1 }, "2015": { "annee": 2015, "mois": 1, "reel": 120372, "trimestre": 1 }, "2016": { "annee": 2016, "mois": 1, "reel": 139570, "trimestre": 1 }, "2017": { "annee": 2017, "mois": 1, "reel": 1640, "trimestre": 1 }, "2018": { "annee": 2018, "mois": 1, "reel": 53992, "trimestre": 1 }, "2019": { "annee": 2019, "mois": 1, "reel": 10744, "trimestre": 1 }, "2020": { "annee": 2020, "mois": 1, "reel": 86333, "trimestre": 1 }, "2021": { "annee": 2021, "mois": 1, "reel": 197369, "trimestre": 1 }, "2022": { "annee": 2022, "mois": 2, "reel": 5000, "trimestre": 1 }, "2023": { "annee": 2023, "mois": 1, "reel": 0, "trimestre": 1 }, "2024": null }, { "mois": 2, "trimestre": 1, "2014": { "annee": 2014, "mois": 2, "reel": 23394, "trimestre": 1 }, "2015": { "annee": 2015, "mois": 2, "reel": 82297, "trimestre": 1 }, "2016": { "annee": 2016, "mois": 2, "reel": 137025, "trimestre": 1 }, "2017": { "annee": 2017, "mois": 2, "reel": 80173, "trimestre": 1 }, "2018": { "annee": 2018, "mois": 2, "reel": 40798, "trimestre": 1 }, "2019": { "annee": 2019, "mois": 2, "reel": 11934, "trimestre": 1 }, "2020": { "annee": 2020, "mois": 2, "reel": 10347, "trimestre": 1 }, "2021": { "annee": 2021, "mois": 2, "reel": 59749, "trimestre": 1 }, "2022": { "annee": 2022, "mois": 2, "reel": 5000, "trimestre": 1 }, "2023": { "annee": 2023, "mois": 2, "reel": 0, "trimestre": 1 }, "2024": null }, { "mois": 3, "trimestre": 1, "2014": { "annee": 2014, "mois": 3, "reel": 58784, "trimestre": 1 }, "2015": { "annee": 2015, "mois": 3, "reel": 72932, "trimestre": 1 }, "2016": { "annee": 2016, "mois": 3, "reel": 31680, "trimestre": 1 }, "2017": { "annee": 2017, "mois": 3, "reel": 60197, "trimestre": 1 }, "2018": { "annee": 2018, "mois": 3, "reel": 79066, "trimestre": 1 }, "2019": { "annee": 2019, "mois": 3, "reel": 104324, "trimestre": 1 }, "2020": { "annee": 2020, "mois": 3, "reel": 20671, "trimestre": 1 }, "2021": { "annee": 2021, "mois": 3, "reel": 14616, "trimestre": 1 }, "2022": { "annee": 2022, "mois": 3, "reel": 4265, "trimestre": 1 }, "2023": { "annee": 2023, "mois": 3, "reel": 0, "trimestre": 1 }, "2024": null }, { "mois": 4, "trimestre": 2, "2014": { "annee": 2014, "mois": 4, "reel": 66116, "trimestre": 2 }, "2015": { "annee": 2015, "mois": 4, "reel": 12432, "trimestre": 2 }, "2016": { "annee": 2016, "mois": 4, "reel": 25750, "trimestre": 2 }, "2017": { "annee": 2017, "mois": 4, "reel": 12540, "trimestre": 2 }, "2018": { "annee": 2018, "mois": 4, "reel": 46888, "trimestre": 2 }, "2019": { "annee": 2019, "mois": 4, "reel": 15670, "trimestre": 2 }, "2020": { "annee": 2020, "mois": 4, "reel": 5000, "trimestre": 2 }, "2021": { "annee": 2021, "mois": 4, "reel": 1392, "trimestre": 2 }, "2022": null, "2023": { "annee": 2023, "mois": 4, "reel": 0, "trimestre": 2 }, "2024": { "annee": 2024, "mois": 4, "reel": 212121, "trimestre": 2 }, }, { "mois": 5, "trimestre": 2, "2014": { "annee": 2014, "mois": 5, "reel": 54658, "trimestre": 2 }, "2015": { "annee": 2015, "mois": 5, "reel": 4088, "trimestre": 2 }, "2016": { "annee": 2016, "mois": 5, "reel": 62917, "trimestre": 2 }, "2017": { "annee": 2017, "mois": 5, "reel": 88465, "trimestre": 2 }, "2018": { "annee": 2018, "mois": 5, "reel": 8327, "trimestre": 2 }, "2019": { "annee": 2019, "mois": 5, "reel": 6773, "trimestre": 2 }, "2020": { "annee": 2020, "mois": 5, "reel": 6843, "trimestre": 2 }, "2021": null, "2022": null, "2023": { "annee": 2023, "mois": 5, "reel": 0, "trimestre": 2 }, "2024": null }, { "mois": 6, "trimestre": 2, "2014": { "annee": 2014, "mois": 6, "reel": 30641, "trimestre": 2 }, "2015": { "annee": 2015, "mois": 6, "reel": 15256, "trimestre": 2 }, "2016": { "annee": 2016, "mois": 6, "reel": 14908, "trimestre": 2 }, "2017": { "annee": 2017, "mois": 6, "reel": 32456, "trimestre": 2 }, "2018": { "annee": 2018, "mois": 6, "reel": 96564, "trimestre": 2 }, "2019": { "annee": 2019, "mois": 6, "reel": 55344, "trimestre": 2 }, "2020": { "annee": 2020, "mois": 6, "reel": 8870, "trimestre": 2 }, "2021": null, "2022": null, "2023": null, "2024": { "annee": 2024, "mois": 6, "reel": 210474, "trimestre": 2 }, }, { "mois": 7, "trimestre": 3, "2014": { "annee": 2014, "mois": 7, "reel": 53493, "trimestre": 3 }, "2015": { "annee": 2015, "mois": 7, "reel": 252927, "trimestre": 3 }, "2016": { "annee": 2016, "mois": 7, "reel": 111818, "trimestre": 3 }, "2017": { "annee": 2017, "mois": 7, "reel": 131027, "trimestre": 3 }, "2018": { "annee": 2018, "mois": 7, "reel": 45270, "trimestre": 3 }, "2019": { "annee": 2019, "mois": 7, "reel": 240754, "trimestre": 3 }, "2020": { "annee": 2020, "mois": 7, "reel": 2072, "trimestre": 3 }, "2021": null, "2022": null, "2023": null, "2024": null }, { "mois": 8, "trimestre": 3, "2014": { "annee": 2014, "mois": 8, "reel": 13336, "trimestre": 3 }, "2015": { "annee": 2015, "mois": 8, "reel": 52317, "trimestre": 3 }, "2016": { "annee": 2016, "mois": 8, "reel": 7900, "trimestre": 3 }, "2017": { "annee": 2017, "mois": 8, "reel": 158772, "trimestre": 3 }, "2018": { "annee": 2018, "mois": 8, "reel": 206487, "trimestre": 3 }, "2019": { "annee": 2019, "mois": 8, "reel": 53189, "trimestre": 3 }, "2020": { "annee": 2020, "mois": 8, "reel": 4305, "trimestre": 3 }, "2021": null, "2022": null, "2023": null, "2024": null }, { "mois": 9, "trimestre": 3, "2014": { "annee": 2014, "mois": 9, "reel": 151711, "trimestre": 3 }, "2015": { "annee": 2015, "mois": 9, "reel": 7539, "trimestre": 3 }, "2016": { "annee": 2016, "mois": 9, "reel": 17844, "trimestre": 3 }, "2017": { "annee": 2017, "mois": 9, "reel": 48692, "trimestre": 3 }, "2018": { "annee": 2018, "mois": 9, "reel": 181139, "trimestre": 3 }, "2019": null, "2020": { "annee": 2020, "mois": 9, "reel": 38366, "trimestre": 3 }, "2021": null, "2022": null, "2023": null, "2024": null }, { "mois": 10, "trimestre": 4, "2014": { "annee": 2014, "mois": 10, "reel": 30582, "trimestre": 4 }, "2015": { "annee": 2015, "mois": 10, "reel": 9043, "trimestre": 4 }, "2016": { "annee": 2016, "mois": 10, "reel": 9316, "trimestre": 4 }, "2017": { "annee": 2017, "mois": 10, "reel": 31109, "trimestre": 4 }, "2018": { "annee": 2018, "mois": 10, "reel": 164281, "trimestre": 4 }, "2019": { "annee": 2019, "mois": 10, "reel": 20555, "trimestre": 4 }, "2020": { "annee": 2020, "mois": 10, "reel": 18530, "trimestre": 4 }, "2021": null, "2022": { "annee": 2022, "mois": 10, "reel": 2424, "trimestre": 4 }, "2023": null, "2024": null }, { "mois": 11, "trimestre": 4, "2014": { "annee": 2014, "mois": 11, "reel": 282560, "trimestre": 4 }, "2015": { "annee": 2015, "mois": 11, "reel": 52009, "trimestre": 4 }, "2016": { "annee": 2016, "mois": 11, "reel": 48629, "trimestre": 4 }, "2017": { "annee": 2017, "mois": 11, "reel": 74059, "trimestre": 4 }, "2018": null, "2019": { "annee": 2019, "mois": 11, "reel": 26202, "trimestre": 4 }, "2020": { "annee": 2020, "mois": 11, "reel": 44361, "trimestre": 4 }, "2021": null, "2022": null, "2023": null, "2024": null }, { "mois": 12, "trimestre": 4, "2014": { "annee": 2014, "mois": 12, "reel": 18063, "trimestre": 4 }, "2015": { "annee": 2015, "mois": 12, "reel": 27091, "trimestre": 4 }, "2016": { "annee": 2016, "mois": 12, "reel": 399192, "trimestre": 4 }, "2017": { "annee": 2017, "mois": 12, "reel": 35708, "trimestre": 4 }, "2018": { "annee": 2018, "mois": 12, "reel": 169964, "trimestre": 4 }, "2019": { "annee": 2019, "mois": 12, "reel": 17020, "trimestre": 4 }, "2020": { "annee": 2020, "mois": 12, "reel": 18867, "trimestre": 4 }, "2021": null, "2022": null, "2023": null, "2024": null }, ], columns: [ { data: 'mois', render: function ( data, type, row ) { return DateTime.local(currentYear, data, 1).monthLong; } }, { data: currentYear-10+'.reel', defaultContent: '0' }, { data: currentYear-9+'.reel', defaultContent: '0' }, { data: currentYear-8+'.reel', defaultContent: '0' }, { data: currentYear-7+'.reel', defaultContent: '0' }, { data: currentYear-6+'.reel', defaultContent: '0' }, { data: currentYear-5+'.reel', defaultContent: '0' }, { data: currentYear-4+'.reel', defaultContent: '0' }, { data: currentYear-3+'.reel', defaultContent: '0' }, { data: currentYear-2+'.reel', defaultContent: '0' }, { data: currentYear-1+'.reel', defaultContent: '0' }, { data: currentYear+'.reel', defaultContent: '0' }, ], pageLength: -1, caption: '', layout: { topStart: null, topEnd: null, bottomStart: null, bottomEnd: null }, columnDefs: [ { orderable: false, targets: '_all' }, { className: 'is-capitalized has-text-right', target: 0 }, { className: 'has-text-grey', targets: '_all' }, { render: DataTable.render.number(' ', null, 0, '' , ''), targets : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] }, ], createdRow: function( row, data, dataIndex ) { // ajout d'un ID + CCS pour toutes les lignes avec les données mensuelles // pour afficher/masquer mois quand on clique sur un trimestre (trimestre = rowgroup) $(row).addClass( 'child trimestre' + data.trimestre ); //$(row).addClass( 'is-hidden' ); // fonctionne pas si je masque avec une class $(row).attr('style', 'display:none;'); $(row).attr('id', 'trimestre' + data.trimestre + '_mois' + data.mois); }, rowGroup: { dataSrc: ['trimestre'], startClassName: 'trimestre hasChild', startRender: function ( rows, group, level ) { var api = $('#tableau_trimestres').DataTable(); // TOTAUX TRIMESTRIELS var Year10_subtotal = rows .data() .pluck(currentYear-10+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; var Year9_subtotal = rows .data() .pluck(currentYear-9+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; var Year8_subtotal = rows .data() .pluck(currentYear-8+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; var Year7_subtotal = rows .data() .pluck(currentYear-7+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; var Year6_subtotal = rows .data() .pluck(currentYear-6+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; var Year5_subtotal = rows .data() .pluck(currentYear-5+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; var Year4_subtotal = rows .data() .pluck(currentYear-4+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; var Year3_subtotal = rows .data() .pluck(currentYear-3+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; var Year2_subtotal = rows .data() .pluck(currentYear-2+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; var Year1_subtotal = rows .data() .pluck(currentYear-1+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; var CurrentYear_subtotal = rows .data() .pluck(currentYear+'.reel') .reduce(function (a, b) { return a + b * 1; }, 0) ; // CREATING THE SERIES BUT I THINK I SHOULD DO IT ON TABLE DRAW // format serie = { name: 'text', data: [number, number, etc] } switch( group ) { case 1: var serie1 = { name: 'Trimestre ' + group, data: [Year10_subtotal, Year9_subtotal, Year8_subtotal, Year7_subtotal, Year6_subtotal, Year5_subtotal, Year4_subtotal, Year3_subtotal, Year2_subtotal, Year1_subtotal, CurrentYear_subtotal] }; seriesGraphe_BCF.push(serie1); break; case 2: var serie2 = { name: 'Trimestre ' + group, data: [Year10_subtotal, Year9_subtotal, Year8_subtotal, Year7_subtotal, Year6_subtotal, Year5_subtotal, Year4_subtotal, Year3_subtotal, Year2_subtotal, Year1_subtotal, CurrentYear_subtotal] }; seriesGraphe_BCF.push(serie2); break; case 3: var serie3 = { name: 'Trimestre ' + group, data: [Year10_subtotal, Year9_subtotal, Year8_subtotal, Year7_subtotal, Year6_subtotal, Year5_subtotal, Year4_subtotal, Year3_subtotal, Year2_subtotal, Year1_subtotal, CurrentYear_subtotal] }; seriesGraphe_BCF.push(serie3); break; case 4: var serie4 = { name: 'Trimestre ' + group, data: [Year10_subtotal, Year9_subtotal, Year8_subtotal, Year7_subtotal, Year6_subtotal, Year5_subtotal, Year4_subtotal, Year3_subtotal, Year2_subtotal, Year1_subtotal, CurrentYear_subtotal] }; seriesGraphe_BCF.push(serie4); break; } console.log ('inside start rowgroup :');console.log (seriesGraphe_BCF); // formatage Year10_subtotal = DataTable.render.number(' ', null, '', null, '').display(Year10_subtotal); Year9_subtotal = DataTable.render.number(' ', null, '', null, '').display(Year9_subtotal); Year8_subtotal = DataTable.render.number(' ', null, '', null, '').display(Year8_subtotal); Year7_subtotal = DataTable.render.number(' ', null, '', null, '').display(Year7_subtotal); Year6_subtotal = DataTable.render.number(' ', null, '', null, '').display(Year6_subtotal); Year5_subtotal = DataTable.render.number(' ', null, '', null, '').display(Year5_subtotal); Year4_subtotal = DataTable.render.number(' ', null, '', null, '').display(Year4_subtotal); Year3_subtotal = DataTable.render.number(' ', null, '', null, '').display(Year3_subtotal); Year2_subtotal = DataTable.render.number(' ', null, '', null, '').display(Year2_subtotal); Year1_subtotal = DataTable.render.number(' ', null, '', null, '').display(Year1_subtotal); CurrentYear_subtotal = DataTable.render.number(' ', null, '', null, '').display(CurrentYear_subtotal); // affichage totaux trimestriels return $('<tr id="trimestre' + group + '" />') .append('<td class="has-background-light has-text-weight-semibold dimgrey">Trimestre ' + group +'</td>') .append('<td class="has-text-right">' + Year10_subtotal + '</td>') .append('<td class="has-text-right">' + Year9_subtotal + '</td>') .append('<td class="has-text-right">' + Year8_subtotal + '</td>') .append('<td class="has-text-right">' + Year7_subtotal + '</td>') .append('<td class="has-text-right">' + Year6_subtotal + '</td>') .append('<td class="has-text-right">' + Year5_subtotal + '</td>') .append('<td class="has-text-right">' + Year4_subtotal + '</td>') .append('<td class="has-text-right">' + Year3_subtotal + '</td>') .append('<td class="has-text-right">' + Year2_subtotal + '</td>') .append('<td class="has-text-right">' + Year1_subtotal + '</td>') .append('<td class="has-text-right">' + CurrentYear_subtotal + '</td>') ; } }, footerCallback: function (row, data, start, end, display) { var api = this.api(); var pageInfo = api.page.info(); // TOTAUX ET MOYENNES ANNUELS var Year10_total = api .column(1, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var Year9_total = api .column(2, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var Year8_total = api .column(3, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var Year7_total = api .column(4, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var Year6_total = api .column(5, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var Year5_total = api .column(6, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var Year4_total = api .column(7, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var Year3_total = api .column(8, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var Year2_total = api .column(9, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var Year1_total = api .column(10, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var CurrentYear_total = api .column(11, { page: 'current' }) .data() .reduce(function (a, b) { return a + b * 1; }, 0); var Year10_moyenne = Year10_total / 12; var Year9_moyenne = Year9_total / 12; var Year8_moyenne = Year8_total / 12; var Year7_moyenne = Year7_total / 12; var Year6_moyenne = Year6_total / 12; var Year5_moyenne = Year5_total / 12; var Year4_moyenne = Year4_total / 12; var Year3_moyenne = Year3_total / 12; var Year2_moyenne = Year2_total / 12; var Year1_moyenne = Year1_total / 12; /* pour l'année en cours, il faut calculer la moyenne uniquement sur les mois écoulés exemple : en mars, on doit calculer la moyenne pour janvier + février, donc diviser le total par 2 si mois = 1, moisEcoules = 1 si mois # 1, moisEcoules = mois en cours -1*/ if (today.month == 1) { var moisEcoules = 1; } else { var moisEcoules = today.month - 1; } var CurrentYear_moyenne = CurrentYear_total / moisEcoules ; // formatage Year10_total = DataTable.render.number(' ', null, '', null, '').display(Year10_total); Year9_total = DataTable.render.number(' ', null, '', null, '').display(Year9_total); Year8_total = DataTable.render.number(' ', null, '', null, '').display(Year8_total); Year7_total = DataTable.render.number(' ', null, '', null, '').display(Year7_total); Year6_total = DataTable.render.number(' ', null, '', null, '').display(Year6_total); Year5_total = DataTable.render.number(' ', null, '', null, '').display(Year5_total); Year4_total = DataTable.render.number(' ', null, '', null, '').display(Year4_total); Year3_total = DataTable.render.number(' ', null, '', null, '').display(Year3_total); Year2_total = DataTable.render.number(' ', null, '', null, '').display(Year2_total); Year1_total = DataTable.render.number(' ', null, '', null, '').display(Year1_total); CurrentYear_total = DataTable.render.number(' ', null, '', null, '').display(CurrentYear_total); Year10_moyenne = DataTable.render.number(' ', null, '', null, '').display(Year10_moyenne); Year9_moyenne = DataTable.render.number(' ', null, '', null, '').display(Year9_moyenne); Year8_moyenne = DataTable.render.number(' ', null, '', null, '').display(Year8_moyenne); Year7_moyenne = DataTable.render.number(' ', null, '', null, '').display(Year7_moyenne); Year6_moyenne = DataTable.render.number(' ', null, '', null, '').display(Year6_moyenne); Year5_moyenne = DataTable.render.number(' ', null, '', null, '').display(Year5_moyenne); Year4_moyenne = DataTable.render.number(' ', null, '', null, '').display(Year4_moyenne); Year3_moyenne = DataTable.render.number(' ', null, '', null, '').display(Year3_moyenne); Year2_moyenne = DataTable.render.number(' ', null, '', null, '').display(Year2_moyenne); Year1_moyenne = DataTable.render.number(' ', null, '', null, '').display(Year1_moyenne); CurrentYear_moyenne = DataTable.render.number(' ', null, '', null, '').display(CurrentYear_moyenne); // update footer $(api.column(1).footer()).html(Year10_total); $(api.column(2).footer()).html(Year9_total); $(api.column(3).footer()).html(Year8_total); $(api.column(4).footer()).html(Year7_total); $(api.column(5).footer()).html(Year6_total); $(api.column(6).footer()).html(Year5_total); $(api.column(7).footer()).html(Year4_total); $(api.column(8).footer()).html(Year3_total); $(api.column(9).footer()).html(Year2_total); $(api.column(10).footer()).html(Year1_total); $(api.column(11).footer()).html(CurrentYear_total); $(api.column(1).footer(1)).html(Year10_moyenne); $(api.column(2).footer(1)).html(Year9_moyenne); $(api.column(3).footer(1)).html(Year8_moyenne); $(api.column(4).footer(1)).html(Year7_moyenne); $(api.column(5).footer(1)).html(Year6_moyenne); $(api.column(6).footer(1)).html(Year5_moyenne); $(api.column(7).footer(1)).html(Year4_moyenne); $(api.column(8).footer(1)).html(Year3_moyenne); $(api.column(9).footer(1)).html(Year2_moyenne); $(api.column(10).footer(1)).html(Year1_moyenne); $(api.column(11).footer(1)).html(CurrentYear_moyenne); } }); // afficher / masquer les lignes mensuelles lors du clic sur la ligne d'un trimestre table2.on('click', '.trimestre', function () { var id = this.id; var child = '.child.' + id; $( child ).toggle(); });// CREATE THE SERIES FOR THE CHART// EXAMPLE CHART WITH STACKED COLUMNS// https://www.highcharts.com/demo/highcharts/column-stackedtable2.on('draw', function () { console.log ('inside DT on draw :');console.log (seriesGraphe_BCF); });// INFOS FOR THE CHARTvar titleChart = 'Infos company name ' + (currentYear-10) + ' - ' + currentYear ;var categories = [currentYear-10, currentYear-9, currentYear-8, currentYear-7, currentYear-6, currentYear-5, currentYear-4, currentYear-3, currentYear-2, currentYear-1, currentYear];// the series I want to get from the row groupingconsole.log ('after DT exec :');console.log (seriesGraphe_BCF);// CHART 10 YEARS Highcharts.chart('graphe_BCF', { chart: { type: 'column' }, title: { text: titleChart, }, xAxis: { categories: categories, }, yAxis: { reversedStacks: false, min: 0, }, legend: { enabled:true, }, tooltip: { headerFormat: '<b>{point.x}</b><br/>', pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' }, plotOptions: { column: { stacking: 'normal', } }, series: seriesGraphe_BCF // fake data for the demo /*[{ 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] }]*/});
300px
You can jump to the latest bin by adding /latest to your URL
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + [ | Indents selected lines |
| ctrl + ] | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Clone Bin |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |