Razor chart.js labels/data not in sync

Question

I have a Razor application that generates three columns of data to use in a chart graph. The page and javascript to do that looks like this:

<div><canvas id="myChart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    var Maanden = [];
    var Totalen = [];
    @foreach (var m in Model.Grafieks)
    {
        @:Maanden.push("@m.maand" + "-" + "@m.jaar");
        @:Totalen.push(@m.Total);
    }

    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: Maanden,
            datasets: [
                { label: 'Facturen €',    
                data: Totalen,
                backgroundColor: 'rgb(255, 255, 132)',
                borderColor: 'rgb(255, 99, 132)',
                borderWidth: 1,             
                }
                ]
            },
     });
</script>

Problem is that the labels are displayed OK but the data is off. Every second column is empty and its data pushed to the next column:

Chrome says:

Is there something wrong pushing the data into the arrays?

score 0 · Answer 1 · answered Mar 08 '22 at 17:36

I had to convert the comma in decimal Totalen to a period!

   @foreach (var m in Model.Grafieks)
        {
            @:Maanden.push("@m.maand" + "-" + "@m.jaar");
           <text>bedrag = parsePotentiallyGroupedFloat("@m.Total");</text> 
            @:Totalen.push(bedrag);
        }   
    function parsePotentiallyGroupedFloat(stringValue) {
            stringValue = stringValue.trim();
            var result = stringValue.replace(/[^0-9]/g, '');
            if (/[,\.]\d{2}$/.test(stringValue)) {
                result = result.replace(/(\d{2})$/, '.$1');
            }
            return parseFloat(result);
        }

The function "parsePotentiallyGroupedFloat" is from here: Convert String with Dot or Comma as decimal separator to number in JavaScript

Razor chart.js labels/data not in sync

1 Answers1