AndyPet74 AndyPet74 - 1 month ago 14
Javascript Question

PHP Displaying site visits in a line graph VIA Morris.js

I was following this tutorial: Codediesel trying to create a line graph that will show the amount of views per day on a certain page of my website. I have a database set up like:

CREATE TABLE `pageviews` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`date` date NOT NULL,
`views` bigint(20) NOT NULL, PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1


I have data in the table, 3 days, the data looks like the following:

array(3) {
[0]=> array(3) {
["id"]=> int(3)
["date"]=> string(10) "2015-06-19"
["views"]=> int(49)
}
[1]=> array(3) {
["id"]=> int(2)
["date"]=> string(10) "2015-06-18"
["views"]=> int(103)
}
[2]=> array(3) {
["id"]=> int(1)
["date"]=> string(10) "2015-06-17"
["views"]=> int(18)
}
}


My problem is that the page gives me no Graph, the console produces two errors:

Uncaught TypeError: Cannot read property 'match' of undefined

Uncaught Error: Graph container element not found


My morris javascript looks like this when rendered by the page:

Morris.Line({
element: 'morris-line-chart',
data: [{"id":3,"date":"2015-06-19","views":49},{"id":2,"date":"2015-06-18","views":103},{"id":1,"date":"2015-06-17","views":18}],
xkey: 'cron_time',
ykeys: ['Page Views'],
labels: ['Page Views'],
lineColors: ['#0b62a4'],
xLabels: 'Date',
smooth: true,
resize: true
});


without the rendering it looks like:

<div id="morris-line-chart">
<?php
$db = new PDO('mysql:host=localhost;dbname=**********;charset=utf8', '*********', '********');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$stmt = $db->prepare("SELECT * FROM pageviews ORDER BY `id` DESC LIMIT 15");
$stmt->execute();
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<script>
Morris.Line({
element: 'morris-line-chart',
data: <?php echo json_encode($row);?>,
xkey: 'cron_time',
ykeys: ['Page Views'],
labels: ['Page Views'],
lineColors: ['#0b62a4'],
xLabels: 'Date',
smooth: true,
resize: true
});
</script>
</div>


I was not sure exactly where to put the php and , when I copied the code into here I had it between the tags but I have placed it above and below as well to try and rule out other possibilities. Is there anything you see that can help me get this working. I feel as though I am close but I can't quite find the last few errors. I am trying to provide as much code and detail as possible, if there is something you'd like to see that I am forgetting please let me know.

***EDIT:

I fixed the issue, I needed to change my xkey and ykey for it to work, all works now!

Answer

Change xkey to date as it relates to the json array and also change the ykeys, placement goes after the