Chart.js – Получение данных из базы данных с использованием mysql и php

Я пытаюсь преобразовать статические данные в результаты базы данных. Я буду использовать mysql и php.

Это пример кода, который у меня есть

var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var lineChartData = { labels : ["January","February","March","April","May","June","July"], datasets : [ { label: "My First dataset", fillColor : "rgba(220,220,220,0.2)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] }, { label: "My Second dataset", fillColor : "rgba(151,187,205,0.2)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(151,187,205,1)", data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] } ] } window.onload = function(){ var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, { responsive: true }); } 

Ниже мой php / msql

 $result = mysql_query("SELECT COUNT(*) FROM customer WHERE month='january'") or die(mysql_error()); $row1 = mysql_fetch_array( $result ); $result = mysql_query("SELECT COUNT(*) FROM customer WHERE month='february'") or die(mysql_error()); $row2 = mysql_fetch_array( $result ); $result = mysql_query("SELECT COUNT(*) FROM customer WHERE month='march'") or die(mysql_error()); $row3 = mysql_fetch_array( $result ); 

Как я могу использовать эти подсчеты из моего запроса mysql и реализовать его для наборов данных на диаграммах? Мне также хотелось бы, чтобы метки были сгенерированы из моего запроса mysql. Должен ли я зацикливать наборы данных внутри кода jquery?

Это плагин, который я использую: http://www.chartjs.org/docs/#line-chart-introduction

    Поместите ваш php-код в другой файл api.php и используйте $.ajax чтобы получить эти данные в формате JSON . Чтобы преобразовать данные в данные формата JSON, вы должны использовать функцию json_encode() php.

    Я привел пример примера, который вы можете увидеть здесь .

    См. Пример кода:

    1. api.php

       $arrLabels = array("January","February","March","April","May","June","July"); $arrDatasets = array('label' => "My First dataset",'fillColor' => "rgba(220,220,220,0.2)", 'strokeColor' => "rgba(220,220,220,1)", 'pointColor' => "rgba(220,220,220,1)", 'pointStrokeColor' => "#fff", 'pointHighlightFill' => "#fff", 'pointHighlightStroke' => "rgba(220,220,220,1)", 'data' => array('28', '48', '40', '19', '86', '27', '90')); $arrReturn = array(array('labels' => $arrLabels, 'datasets' => $arrDatasets)); print (json_encode($arrReturn)); 
    2. example.html

       $.ajax({ type: 'POST', url: 'api.php', success: function (data) { lineChartData = data;//alert(JSON.stringify(data)); var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData); var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, {responsive: true}); } }); 

    Обратите внимание, что вы должны передать значение randomScalingFactor() на api.php .

    Пожалуйста, проверьте и дайте мне знать, если вам нужна дополнительная помощь.

    Сначала получите данные в подходящие структуры данных, используя PHP

     $months = array("january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"); $monthvalues = array(); foreach ($months as $month) { $monthvalues[$month] = 0; } $result = mysql_query("SELECT month, count(*) FROM customer group by month") or die(mysql_error()); while ($row = mysql_fetch_array($result, MYSQL_NUM)) { $monthvalues[$row[0]] = (int)$row[1]; } 

    Ниже, просто подключите эти структуры данных к вашему Javascript

     var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var lineChartData = { labels : <?=json_encode($months);?>, datasets : [ { label: "My First dataset", fillColor : "rgba(220,220,220,0.2)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data : <?=json_encode(array_values($monthvalues));?> } ] } 

    предполагая, что window.onload и HTML для элемента canvas находятся в их соответствующих местах.