Chartjs-CakePhp3 – Showing values on ChartJs

by

3👍

✅

You can do like this

In Controller

        $this->loadModel('Incomes');
        $incomes = $this->Incomes->find('list', [
            'keyField' => 'month',
            'valueField' => 'amount',
            'fields'=>[
                'month' => 'MONTHNAME(created)',
                'amount' => 'SUM(amount)'
            ],
            'group' => ['month'],
            'order'=>['MONTH(created)'=>'ASC'],
        ])->toArray();

        $months = json_encode(array_keys($incomes));
        $amounts = json_encode(array_values($incomes));
        $this->set('months', $months);
        $this->set('amounts', $amounts);

In view

// Get context with jQuery - using jQuery's .get() method.
var areaChartCanvas = $("#areaChart").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var areaChart = new Chart(areaChartCanvas);

var areaChartData = {
  labels: <?= $months; ?>,
  datasets: [
    {
      label: "Electronics",
      fillColor: "rgba(210, 214, 222, 1)",
      strokeColor: "rgba(210, 214, 222, 1)",
      pointColor: "rgba(210, 214, 222, 1)",
      pointStrokeColor: "#c1c7d1",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: <?= $amounts; ?>
    }
  ]
};

Leave a comment