mysql sum查询chart.js

Question

Below is my code to display an array of date and amount. It will be used as datasets in chart.js

The date was properly displayed as Apr,2018 May,2018 Jun,2018

But the amount shows only one record.

I tried to run the query in mysql. It gives correct table.

The echo in the code is use to confirm correct record.

I need to display : "Apr,2018", "May,2018", "June,2018"

250.65, 278, 300

which will be used as datasets for chart.js

<?php
    $sql = mysqli_query($mysqli, "SELECT DATE_FORMAT(trip_start,'%Y-%m') as trip_start1, sum(fare_amount) as income
        FROM trip
        WHERE trip_start IS NOT NULL
        GROUP BY trip_start1
        ORDER by trip_start1"
    );
    while($row = mysqli_fetch_array($sql)){
        $fare_amount = $row['income'];
        $date = date('M, Y', strtotime($row['trip_start1']));
        $dates = $dates.'"'.$date.'",';
        $fare_amount= $fare_amount.', '.$fare_amount.',';
    }
    $dates = trim($dates, ",");
    $fare_amount = trim($fare_amount, ",");
    echo $dates . '<br/>' ; //just to confirm if it will display correct array
    echo $fare_amount; //just to confirm if it will display correct array
?>

Here is my db:

CREATE TABLE IF NOT EXISTS `trip` (
    `id` int(10) unsigned NOT NULL,
    `driver_id` int(10) unsigned NOT NULL,
    `passenger_id` int(10) unsigned NOT NULL,
    `source` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
    `destination` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
    `trip_start` timestamp NULL DEFAULT NULL,
    `trip_end` timestamp NULL DEFAULT NULL,
    `fare_amount` double DEFAULT NULL,
    `status` varchar(45) COLLATE utf8_unicode_ci NOT NULL,
    `payment_mode` varchar(45) COLLATE utf8_unicode_ci NOT NULL,
    `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
    `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE 
    CURRENT_TIMESTAMP
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `trip` (`id`, `driver_id`, `passenger_id`, `source`, `destination`, `trip_start`, `trip_end`, `fare_amount`, `status`, `payment_mode`, `created_at`, `updated_at`) 
VALUES(5, 6, 1, '14.6760413', '121.0437003', '2018-04-07 08:01:00', '2018-04-07 09:00:00', 250.65, 'complete', 'cash', '2018-04-06 23:06:43', '2018-04-13 02:28:21'),
(6, 6, 2, '15.6760413', '122.0437003', '2018-05-08 16:11:00', '2018-04-07 17:03:00', 278, 'complete', 'cash', '2018-04-06 23:06:43', '2018-04-14 03:40:58'),
(8, 6, 3, '14.634787799999998,121.0683213', '14.5377516,121.00137940000002', '2018-06-12 16:00:00', NULL, 100, 'booked', 'cash', '2018-04-11 10:51:16', '2018-04-14 03:44:41'),
(9, 6, 3, '14.634787799999998,121.0683213', '14.5377516,121.00137940000002', '2018-06-12 16:00:00', NULL, 100, 'booked', 'cash', '2018-04-11 11:08:43', '2018-04-14 03:45:59'),
(10, 6, 3, '14.634787799999998,121.0683213', '14.5377516,121.00137940000002', '2018-06-28 16:00:00', NULL, 100, 'booked', 'cash', '2018-04-11 11:10:12', '2018-04-14 03:46:37');

My code to display the chart:

        <div><h1>Budget Charts</h1></div>
        <div style="width:60%"><canvas id="Chart" ></canvas></div>
        <!-- jQuery cdn -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
        <!-- Chart.js cdn -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
    </body>
</html>
<script> // chart DOM Element
    var ctx = document.getElementById("Chart");
    var data = {
        datasets: [{
            data: [<?php echo $fare_amount; ?>],
            backgroundColor: 'transparent',
            //backgroundColor: 'rgba(69, 92, 115, 0.5)',
            //backgroundColor: 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', 0.4)',
            //backgroundColor: "#455C73",
            borderColor: "#39a",
            borderWidth: 5,
            label: 'Revenue' // for legend
        }],
        labels: [<?php echo $dates; ?>]
    };
    var xChart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
        // The data for our dataset
        data: data,
        // Configuration options go here
        options: {
            legend: {
                display: true,
                position: 'left',
                labels: {
                    fontColor: 'black'
                    //fontColor: 'rgb(255, 99, 132)'
                }
            },
            tooltips: {mode: 'y'},
            scales: {
                yAxes: [{
                    ticks: {beginAtZero: true}
                }],
                xAxes: [{
                    ticks: {
                        autoskip: true,
                        maxTicksLimit:6
                    }
                }]
            }
        }
    });
</script>

Answer 1

Base approach for preparing data for js codes is to gather data in array, json_encode this array to string and output this string:

$sql = mysqli_query($mysqli, "SELECT DATE_FORMAT(trip_start,'%Y-%m') as
trip_start1,  fare_amount as income
FROM trip
WHERE trip_start IS NOT NULL
GROUP BY trip_start1
ORDER by trip_start1");

$data = [
    'amounts' => [],
    'dates' => [],
];
while($row = mysqli_fetch_array($sql)){
    $data['amounts'][]    = $row['income'];
    $data['dates'][]      =  date('M, Y', strtotime($row['trip_start1']));
}

// merge subarrays into single one to get output as you want
$data = array_merge($data['amounts'], $data['dates']);

echo json_encode($data);