如何在Laravel中使用Chartjs和JSON数据显示图表

Question

I have create JSON from mysql data with query and result below:

SELECT
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 1 THEN 1 ELSE 0 END ) ) AS `Januari`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 2 THEN 1 ELSE 0 END ) ) AS `Pebruari`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 3 THEN 1 ELSE 0 END ) ) AS `Maret`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 4 THEN 1 ELSE 0 END ) ) AS `April`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 5 THEN 1 ELSE 0 END ) ) AS `Mei`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 6 THEN 1 ELSE 0 END ) ) AS `Juni`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 7 THEN 1 ELSE 0 END ) ) AS `Juli`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 8 THEN 1 ELSE 0 END ) ) AS `Agustus`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 9 THEN 1 ELSE 0 END ) ) AS `September`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 10 THEN 1 ELSE 0 END ) ) AS `Oktober`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 11 THEN 1 ELSE 0 END ) ) AS `November`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 12 THEN 1 ELSE 0 END ) ) AS `Desember`,
    sum( ( CASE YEAR ( `posts`.`created_at` ) WHEN YEAR ( now( ) ) THEN 1 ELSE 0 END ) ) AS `TOTAL` 
FROM
    `posts` 
WHERE
    ( YEAR ( `posts`.`created_at` ) = YEAR ( now( ) ) )

and JSON result in laravel {{route('chart.all')}} showing this :

[{"Januari":0,"Pebruari":0,"Maret":0,"April":0,"Mei":0,"Juni":0,"Juli":0,"Agustus":11,"September":0,"Oktober":0,"November":0,"Desember":0,"TOTAL":0}]

And < script > that I put in php file :

var data = '{{ route('chart.all') }}'

const CHART = document.getElementById('charts');
var lineChart = new Chart(CHART, {
   type: 'bar',
   data: {
      labels: Object.keys(data),
      datasets: [{
         label: 'My first dataset',
         fill: false,
         lineTension: 0,
         data: Object.values(data)
      }]
   }
})

When I run this script, Data show different result, is there any wrong with my script above?

Answer 1

You can below working example and you can use mysql query data into chartjs data like:

    datasets: [
    {
    label: 'this year',
    backgroundColor: '#26B99A',
    borderWidth: 1,
    data: <?php echo json_encode($Data); ?>
    }
    ] 

For more information, you can check this working example link : How to display chart using Chartjs with JSON data in Laravel