Highchart column total

Erdinc Ozer

Hello. With the codes below. I am using datatables and highchart. The following codes show the number of lines. Instead of count, I want to use total. Column2 has the salary amounts paid. How can I show the total amount for column3?

$(document).ready(function() {
    // Create DataTable
    var table = $('#example').DataTable({
        dom: 'Pfrtip',
    });
 
    // Create the chart with initial data
    var container = $('<div/>').insertBefore(table.table().container());
 
    var chart = Highcharts.chart(container[0], {
        chart: {
            type: 'pie',
        },
        title: {
            text: 'Staff Count Per Position',
        },
        series: [
            {
                data: chartData(table),
            },
        ],
    });
 
    // On each draw, update the data in the chart
    table.on('draw', function() {
        chart.series[0].setData(chartData(table));
    });
});
 
function chartData(table) {
    var counts = {};
 
    // Count the number of entries for each position
    table
        .column(1, { search: 'applied' })
        .data()
        .each(function (val) {
            if (counts[val]) {
                counts[val] += 1;
            } else {
                counts[val] = 1;
            }
        });
 
    // And map it to the format highcharts uses
    return $.map(counts, function (val, key) {
        return {
            name: key,
            y: val,
        };
    });
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

See this example for the code to sum a column.

Kevin

Erdinc Ozer

Thank you for your quick response. The sample codes I sent work without any problems. In which part of these codes do I need to make changes/additions? I don't know how to change the parts that say count in the codes. I just started using highchart.

kthorngren

Looks like you are using the solution from this blog. The example, like you said, is just counting each unique field value. Based on the example in the blog it sounds like you want to sum the salaries for each office, as an example. You can use rows().every() to loop through the rows to get the sum for each office. Something like this:
https://live.datatables.net/kubiwaca/1/edit

Kevin

Erdinc Ozer

Yes. You got my point right. I'm trying to adapt the highchart chart in the block link. these codes calculate count: table
.column(2, { search: 'applied' })
.data()
.each(function (val) {
if (counts[val]) {
counts[val] += 1;
} else {
counts[val] = 1;
}
});
I think the codes that calculate the total should be as short as this. I will try the codes you suggested.

Erdinc Ozer

Hello everyone. Many thanks to all friends who contributed to datatables. I solved the problem with these codes: https://live.datatables.net/cebucive/1/edit
These codes were not sorting on the chart. This is how I found the solution.
Part1:

    // On draw, get updated salaries and refresh axis and series
    table.on("draw", function() {
        salary = getSalaries(table);
    
    // Start: Add these codes to sort on chart
    
    salary = Object.entries(salary)
    .sort(([,a],[,b]) => a-b)
    .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
    //End: Add these codes to sort on chart
      
     myChart.axes[0].categories = Object.keys(salary);
     myChart.series[0].setData(Object.values(salary));
    });
    
    var salary = getSalaries(table);

Part2:

    // For each row, extract the office and add the salary to the array
    for (var i = 0; i < indexes.length; i++) {
        var office = table.cell(indexes[i], 3).data();
        
        // Start: Add these codes to sort the chart. These codes replace all non-alphabetic characters and spaces with the (_) sign.
        office = office.replace(/[\W_]+/g,"_");
        // End: Add these codes to sort the chart. These codes replace all non-alphabetic characters and spaces with the (_) sign.

        if (salaryCounts[office] === undefined) {
            salaryCounts[office] = [+table.cell(indexes[i], 5).data().replace(/[^0-9.]/g, "")];
        }
        else {
            salaryCounts[office].push(+table.cell(indexes[i], 5).data().replace(/[^0-9.]/g, ""));
        }
    }
     
    // Extract the office names that are present in the table
    var keys = Object.keys(salaryCounts);
     
    // For each office work out the average salary

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.