[英]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. 我正在学习本教程: Codediesel试图创建一个折线图,该折线图将显示我网站的特定页面上每天的浏览量。 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: 我的表格中有数据,为期3天,数据如下所示:
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 javascript看起来像这样:
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. 我不确定确切将php和放在哪里,当我将代码复制到此处时,我将其放在标签之间,但我也将其放在上下,以尝试排除其他可能性。 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! 我已解决此问题,我需要更改其xkey和ykey才能使其正常工作,现在一切正常!
将xkey更改为与json数组相关的日期,并更改ykey,将其放置在
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.