Несколько массивов на одной странице, каждая из которых создает 2 диаграммы. Как подготовить их с помощью canvajs?

Question

Я пытаюсь использовать canvasjs для отображения нескольких диаграмм на одной странице

Вот пример этого: play-smart.gr/stats/index2.php

В самом конце страницы есть диаграмма, созданная canvasjs. Однако мне нужна таблица для каждой из таблиц на этой странице.

Много еще не пробовал, так как не знаю, как действовать после создания первого графика. Вы видите, что эти таблицы создаются из базы данных на основе записи результатов для ряда учетных записей один раз в день. Эти учетные записи могут увеличиться, но запрос SQL, который я имею, поднимет его и создаст новую таблицу в конце страницы. Так что эти таблицы могут со временем меняться. После удаления учетной записи ее таблица также удаляется. Поэтому у меня нет фиксированного количества учетных записей для работы и создания массивов для каждой. Мне нужен способ динамически создавать массивы и также передавать их в chart.render () динамически.

Итак, вот мой код, который создает все таблицы и создает диаграмму для последней.

    $idsarray =array();
    for($i=0; $i<$counter; $i++)
    {
        $idsarray[]=$return[$i]['bet_acount_id'];
    }
    $uniqueids = array_unique($idsarray);
    //print_r(array_unique($idsarray)); prints out the unique ids for the whole results array.

    foreach($uniqueids as $uniqueid)
    {
        $arraytoplot = array();
        $arraytoplot1 = array();
        $arraytoplot2 = array();
        echo '<table class="std_table">
        <thead>
        <tr>
            <th colspan="3">Daily Stats of bet accounts totals for robot: '.FindBetAccountFromId($return,$uniqueid,$counter).' - Bet account id: '.$uniqueid.'</th>    
        </tr>
        <tr>
            <th colspan="1" style="width:33%;">Sum - total (money + Unsettled)</th>
            <th colspan="1" style="width:33%;">delta-V</th>
            <th colspan="1" style="width:33%;">Date and time</th>
        </tr>
        </thead>
        <tbody>';
        $currentTableRow = 0;
        $previousRowIndex = 0;
        for($i=0; $i<$counter; $i++)
        {
            if($uniqueid==$return[$i]['bet_acount_id'])
            {
                if($currentTableRow==0)
                {
                    $previousValue=($return[$i]['total']+$return[$i]['unsettled']);

                }
                else
                {
                    $previousValue=($return[$previousRowIndex]['total']+$return[$previousRowIndex]['unsettled']);
                }
                array_push($arraytoplot1, array('x' => strtotime($return[$i]['datetime']), 'y'=>($return[$i]['total']+$return[$i]['unsettled'])));
                array_push($arraytoplot2, array('x' => strtotime($return[$i]['datetime']), 'y'=>(($return[$i]['total']+$return[$i]['unsettled'])-$previousValue)));
                $arraytoplot[$currentTableRow]=array('total' => ($return[$i]['total']+$return[$i]['unsettled']), 'dV'=>(($return[$i]['total']+$return[$i]['unsettled'])-$previousValue), 'date'=>date("d-m-Y \a\\t G:i:s", strtotime($return[$i]['datetime'])));
                echo '<tr>
                    <td>'.($return[$i]['total']+$return[$i]['unsettled']).'</td>
                    <td>'.(($return[$i]['total']+$return[$i]['unsettled'])-$previousValue).'</td>
                    <td>'.date("d-m-Y \a\\t G:i:s", strtotime($return[$i]['datetime'])).'</td>
                </tr>';
                //echo 'Sum for Bet account: '.$return[$i]['bet_acount_id'].'Username: '.$return[$i]['bet365_username'].' is '.($return[$i]['total']+$return[$i]['unsettled']).'. Thats on Date: '.date("d-m-Y \a\\t G:i:s", strtotime($return[$i]['datetime'])).'<br>';
                $currentTableRow++;
                $previousRowIndex = $i;
            }
        }
        echo '</tbody>
        </table>';
        ?>
        <script>

        </script>
    <?php
    } ?>



    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script>
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "light2", // "light1", "light2", "dark1", "dark2"
                animationEnabled: true,
                zoomEnabled: true,
                title: {
                    text: "Δοκιμάστε zoom και pan"
                },
                data: [{
                    type: "area",
                    name: "Total",
                    showInLegend: "true",
                    xValueType: "dateTime",
                    xValueFormatString: "MMM YYYY",
                    yValueFormatString: "€#,##0.##",
                    dataPoints: <?php echo json_encode($arraytoplot1); ?>
                },
                {
                    type: "area",
                    name: "delta-V",
                    showInLegend: "true",
                    xValueType: "dateTime",
                    xValueFormatString: "MMM YYYY",
                    yValueFormatString: "€#,##0.##",
                    dataPoints: <?php echo json_encode($arraytoplot2); ?>
                }]
            });
            chart.render();
        }
    </script>
    <?php 
    print_r($arraytoplot1);
    echo '<br>';
    print_r($arraytoplot2);
    $result='all operations completed successfully'; ?>

Кроме того, строка формата даты и времени не работает, и вместо дат она выдает время, но я думаю, что мы можем решить это позже.

В любом случае, этот код работает, как и должен, но я понятия не имею, как сделать его динамичным. Есть идеи?