Trying to access array offset on value of type int

This is suppossed to do with PHP 7.4 but I can't find any solution.
Im trying to build a chart with Google charts, from data coming from a DB.
So if I put this:

Code:

<!--Div that will hold the pie chart-->
    <div id="curve_chart"></div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Pro', 'Non Pro'],
          <?php foreach($price as $prices): ?>
            ['<?= $prices['date'] ?>', <?php if(isset($prices['price_pro'])): ?>'<?= $game['price'] ?>'<?php else: ?>'<?= $prices['price_pro'] ?>'<?php endif; ?>, <?php if(isset($prices['price_nonpro'])): ?>'<?= $game['price'] ?>'<?php else: ?>'<?= $prices['price_nonpro'] ?>'<?php endif; ?>],
            <?php endforeach; ?>
        ]);

        var options = {
          title: 'Chart Prices',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>

I tried puttin another type of code like this:

Code:

<!--Div that will hold the pie chart-->
    <div id="curve_chart"></div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Pro', 'Non Pro'],
          <?php foreach($price as $prices): ?>
            ['<?= $prices['date'] ?>', <?php if($prices['price_pro'] === ''): ?>'<?= $game['price'] ?>'<?php else: ?>'<?= $prices['price_pro'] ?>'<?php endif; ?>, <?php if($prices['price_nonpro'] === ''): ?>'<?= $game['price'] ?>'<?php else: ?>'<?= $prices['price_nonpro'] ?>'<?php endif; ?>],
            <?php endforeach; ?>
        ]);

        var options = {
          title: 'Chart Prices',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>

But again ends with the same error that I put on the title: Trying to acces array offset on value type int
Anyone has any solution or guide me to the right solution?
Thanks a lot!