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

回答

相關問題