JavaScript — Как нарисовать гистограмму со значением базы данных

У меня есть некоторая ценность в моей базе данных. Я хочу сделать график с этими значениями резюме.

Вот мой PHP-код для подключения базы данных:

<?php
header('Content-Type: text/html; charset=utf-8');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'futurk_etkin');
define('DB_PASSWORD', 'etkin');
define('DB_NAME', 'futurk_etkin');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT SUM(akim) FROM etkin GROUP BY YEAR(tarih),MONTH(tarih)");

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
$data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

echo json_encode($data);
?>

Этот вывод кода:

[{ «СУММА (аким)»: «851»}, { «СУММА (аким)»: «64»}]

Теперь у меня есть скрипт для рисования графика. Вот мой код скрипта:

<script>
$(document).ready(function(){
var data = <?php echo json_encode($data) ?>;

var akim = [];

for(var i in data) {
akim.push(data[i].SUM(akim));
}

var chartdata = {
labels: id,
datasets : [
{
label: 'akim',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: akim
}
]
};

var ctx = $("#mycanvas1");

var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
});
</script>

Где я не прав? Я думаю, что это должно работать, но это не работает.