2015-09-21 2 views
3

Ниже мой код, и я хочу, чтобы в xaxis и yaxis отображались мои данные из базы данных.Как заполнить Charts.js данными mysql?

<script src="../Chart.js"></script> 
<script> 
var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; 

var barChartData = { 
    labels : <?=json_encode(array_values($count));?>, 
    datasets : [ 

     { 
      fillColor : "rgba(151,187,205,0.5)", 
      strokeColor : "rgba(151,187,205,0.8)", 
      highlightFill : "rgba(151,187,205,0.75)", 
      highlightStroke : "rgba(151,187,205,1)", 
      data :<?=json_encode(array_values($auditor));?> 
     } 
    ] 

} 
window.onload = function(){ 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myBar = new Chart(ctx).Bar(barChartData, { 
     responsive : true 
    }); 
} 

</script> 

Мой PHP код это:

<?php 

     $link = mysql_connect('localhost', 'root', '') 
       or die('Could not connect: ' . mysql_error()); 

     mysql_select_db('laravel') or die('Could not select database'); 

     $auditor = array(); 
     $sql = "SELECT DATE(created) AS date, COUNT(auditor_id) AS 'count' FROM auditor WHERE created BETWEEN '2015-09-01 00:00:00' AND '2015-09-31 23:59:59' GROUP BY date ORDER BY date"; 
     $result = mysql_query($sql) or die('Query failed: ' . mysql_error()); 
     if ($result) { 
      while ($row = mysql_fetch_assoc($result)) { 
       $date = $row["date"]; 
       $count = $row["count"]; 
       //add to data array 
       $auditor[$date] = $count; 
      } 
     } 

В основном я хочу, чтобы эти данные после Сгруппированные для отображения на оси X и оси Y

+0

Что вы хотите отобразить на этикетке (по оси x)? –

+0

После того, как я группирую данные, у меня будет столбец count и date, поэтому я хочу, чтобы дата была по оси x. –

ответ

1

Я сделал дату и сосчитать массив отдельно. и конвертировать его в json. Я использовал этот url для справки. http://www.chartjs.org/docs/#bar-chart-example-usage

Я не тестировал этот код в своем местном. Поэтому сначала проверьте его в своей системе. Я думаю, это даст вам больше идеи.

Сначала измените его в своем php-коде.

if ($result) { 
     $dates = array(); 
     $counts = array(); 
     while ($row = mysql_fetch_assoc($result)) { 
      $dates[] = $row["date"]; 
      $counts[] = $row["count"]; 
     } 
    } 

Теперь установите эти значения в код jquery.

var barChartData = { 
labels : <?=json_encode($dates);?>, 
datasets : [ 

    { 
     fillColor : "rgba(151,187,205,0.5)", 
     strokeColor : "rgba(151,187,205,0.8)", 
     highlightFill : "rgba(151,187,205,0.75)", 
     highlightStroke : "rgba(151,187,205,1)", 
     data :<?=json_encode($counts);?> 
    } 
] 

} 
+0

Спасибо, это сработало. –

1

Просто измените эту строку

<?=json_encode(array_values($count));?>

в

<?=json_encode(array_keys($auditor));?>

Смежные вопросы