Highcharts integration : your advices on my (working) beginner code

MelodyNelson

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

Hi,

I've read a lot the documentation, and your answers in the forum to work on a page.

I've found great infos on the blog for Highcharts integration and I took the code of this case :
https://live.datatables.net/cebucive/1/edit

Adapted for my page because I needed 2 series of data in the column chart, here is the live demo :
https://live.datatables.net/huralawe/3/edit

When I'm reading the code, I'm sure there is a better way the « collect » the data for the series because I think I'm repeating myself (for example function getFactures + function getMarges) I think I could have one function to do both) but I'm at the « beginner level »...

I would love to read your critics and tips for this test case.

Thank you

allan

It looks great - nice one!

I agree that you could basically merge getFactures and getMarges into a single function. The only difference between them is the column index used to gather the data. So rather than passing a single argument (table) you could pass two - the second being the column to get the data from - e.g.:

var facture = getItems(tablem 10);
var marge = getItems(table, 11);

Allan

MelodyNelson

Thanks Allan.
I knew that I was missing something, I can't wait to try your advice.

MelodyNelson

I could find time today to follow your advices but I think my JS level is not good enough because with the following code for the function getItems, I only get the last value of each column, and not the total.

I've updated the test case :
https://live.datatables.net/kakepoqu/1/edit

function getItems(table, column) {
    var itemsCounts = {};
//  var factureCounts = {};
    var facture = {};
//  var margeCounts = {};
    var marge = {};
     
    // Get the row indexes for the rows displayed under the current search
    var indexes = table
        .rows({ search: "applied" })
        .indexes()
        .toArray();
 
    // For each row, extract the commettant and add the Facture + Marge to the arrays
    for (var i = 0; i < indexes.length; i++) {
        var commettant = table.cell(indexes[i], 1).data(); // numero colonne pour commettant

        if (itemsCounts[commettant] === undefined) {
            facture[commettant] = [+table.cell(indexes[i], column).data().replace(/[^0-9.]/g, "")]; 
            marge[commettant] = [+table.cell(indexes[i], column).data().replace(/[^0-9.]/g, "")];       
        }
        else {
            facture[commettant].push(+table.cell(indexes[i], column).data().replace(/[^0-9.]/g, ""));
            marge[commettant].push(+table.cell(indexes[i], column).data().replace(/[^0-9.]/g, ""));

        }
    }
     
    // Extract the commettant names that are present in the table
    var keys = Object.keys(itemsCounts);
     
    // For each commettant work out : total Facture + Total Marge 
    for (var i = 0; i < keys.length; i++) {
        var totalFacture = facture[keys[i]].reduce((a, b) => a + b, 0);
        facture[keys[i]] = totalFacture ;
        var totalMarge = marge[keys[i]].reduce((a, b) => a + b, 0);
        marge[keys[i]] = totalMarge ;
    }
        return marge ;
        return facture ;
};

kthorngren

The idea is to create a generic function, not a function that tries to calculate both marge and facture values. I took your second example to show this:
https://live.datatables.net/huralawe/5/edit

Kevin

MelodyNelson

Thanks for the example.

I understood I should create a generic code but didn't know how to do it, its not easy to when you're beginning with JS.

I imagine I can add another « generic level » with a third argument to choose the column for the category., something like :

```getItems(table, columnCat, column)

and then using it like that :

```var category = table.cell(indexes[i], columnCat).data();

kthorngren

Yes it takes awhile to learn JS. Its good you recognized the duplicated code. Soon you will be able to refactor your code into more efficient code.

Adding a third parameter for the category column would be good. If desired you can set a default value, like 1, in cases where you might not pass that parameter. See this tutorial.

Kevin

MelodyNelson

Thanks Kevin,
Just add the default parameter for the column category.