PHP显示实地考察VIA Morris.js

我下面这个教程：Codediesel试图创建一个折线图，将显示我的网站的某个页面上的观看每天的量。我有一个数据库设置，如：PHP显示实地考察VIA Morris.js

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

我有表中的数据，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) 
    } 
}

我的问题是，页面没有给我图，控制台产生两个错误：

Uncaught TypeError: Cannot read property 'match' of undefined 

Uncaught Error: Graph container element not found

我莫里斯时的页面渲染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 
});

而不使其看起来像：

<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>

我不知道究竟在何处，以把PHP，当我复制代码到这里我有它的标记之间，但我已经把它上面和以下以及尝试并排除其他可能性。有什么你看到，可以帮助我得到这个工作。我感觉自己好像很近，但我无法找到最后的几个错误。我正在尽可能提供尽可能多的代码和详细信息，如果有些事情您希望看到我忘记了，请让我知道。

***编辑：

我固定的问题，我需要改变我和x键为ykey它的工作，所有的作品吧！

来源

2015-06-19 AndyPet74

将xkey更改为日期，因为它与json数组相关并且还更改了ykeys，放置位于

来源

2015-06-19 18:04:24 AndyPet74

PHP显示实地考察VIA Morris.js

回答

相关问题