google chart with php loop in data array not displaying

Question

I'm trying to display some PHP code within a google chart. I have another chart on the same page using the same process and that one works fine but for some reason, the second chart is not displaying.

I have a key-value array in PHP which I know contains the information I require because I have tested it with this loop.

foreach($categoryKeyValues as $key => $value){
    echo "['".$key.' '.$_SESSION['currency'].number_format($value,2)."', 
    ".number_format($value,2)."],";
}

and it displays correctly so the data is there.

This is the output from the loop ['Entertainment £167.99', 167.99],['Other £0.00', 0.00],['Bill £1,155.81', 1,155.81],['Motoring £225.00', 225.00],['Borrowing £126.58', 126.58],['Saving £187.00', 187.00],['Occasions £87.50', 87.50],['Insurance £37.00', 37.00],

When I call the javascript to display the chart there is an error and the chart is not displayed. Here is my chart code.

<!-- Graph for Categorised expenditure -->
<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});  
    google.charts.setOnLoadCallback(drawCategory);
    function drawCategory()
    {
        var data = google.visualization.arrayToDataTable([
                ['Category', 'Total'],
                <?php
                    foreach($categoryKeyValues as $key => $value)
                    {
                        if($value > 0){
                            echo "['".$key.' '.$_SESSION['currency'].number_format($value,2)."', ".number_format($value,2)."],";
                            $atotal = $atotal + $value;
                        }
                    }
                    //$title = "Account Type, Total - ".$total;
                 ?>
             ]);
        var options = {
              is3D:true,
              chartArea: {left: '1%', top: '5%', right:'1%', width: '95%', height: '100%'},
              width: $(window).width()*0.50,
              height: $(window).width()*0.20,
              pieSliceText: 'none',
              sliceVisibilityThreshold: 0.00,
              pieHole:0.4,
              tooltip: {
                isHtml:true,
                showColorCode: true,
                trigger: 'hover'
              },
              colors: ['#204969', '#719192', '#5f6769', '#5c94bd','#1a3e59', '#315b96', '#719192', '#3c4245', '#dadada']
             };
        var chart = new google.visualization.PieChart(document.getElementById('categoryChart'));  
        chart.draw(data, options);
    }
    // And then:
    $(window).resize(function () {
        drawCategory();
    });
</script>

Image of the working graph and result of the loop for the second graph underneath where the second graph should appear.

Answer 1

Okay so after hours of error checking and testing I found the problem. It was simple in the end but very hard to find so I am posting my findings here and hopefully this will help someone further down the line.

It turns out the error was in the php number_format. I was using number_format($number,2) when my database result returned a number greater than 1000.00 the result was held in the array as 1,000.00 creating an extra array index which in turn created an extra column in my google chart. This caused an exception.

I solved the problem by using number_format($cvalue,2,'.',''). my chart now displays and looks like this.