Я действительно новичок во внедрении моих данных в графики. Вчера я работал с круговыми диаграммами и закончил свою работу с ним. Теперь я наткнулся на реализацию гистограммы, которая имеет два бара в месяц, которые я хотел бы сделать. Я видел пару образцов гистограмм. В моей базе данных у меня есть две таблицы для двух типов пользователей (Stylist и Client). Когда я регистрируюсь в определенном типе пользователя, в моей таблице будет столбец date_created, указывающий на создание учетной записи. Что касается всех пользовательских таблиц. Его формат в 2019-02-16, поэтому в гг-мм - дд. Я планирую получить месяц посередине, а также год, и на моем графике (2 бара в месяц, есть пример кода из Интернета) будет для каждой таблицы. Можете ли вы, господа, помочь мне с этим? Я действительно не понимаю, как реализовать это.
Это мой php файл.
<?php $connect = mysqli_connect("xxx","xxx","xxx","xxx");
//THIS IS THE FIRST BAR for the graph, it needs to be replaced with my data
$dataPoints1 = array(
array("label"=> "2010", "y"=> 36.12),
array("label"=> "2011", "y"=> 34.87),
array("label"=> "2012", "y"=> 40.30),
array("label"=> "2013", "y"=> 35.30),
array("label"=> "2014", "y"=> 39.50),
array("label"=> "2015", "y"=> 50.82),
array("label"=> "2016", "y"=> 74.70)
);
//THIS IS THE SECOND BAR in the graph and also needs my data
$dataPoints2 = array(
array("label"=> "2010", "y"=> 64.61),
array("label"=> "2011", "y"=> 70.55),
array("label"=> "2012", "y"=> 72.50),
array("label"=> "2013", "y"=> 81.30),
array("label"=> "2014", "y"=> 63.60),
array("label"=> "2015", "y"=> 69.38),
array("label"=> "2016", "y"=> 98.70)
);
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Users registered every month"
},
legend:{
cursor: "pointer",
verticalAlign: "center",
horizontalAlign: "right",
itemclick: toggleDataSeries
},
data: [{
type: "column",
name: "Real Trees",
indexLabel: "{y}",
yValueFormatString: "$#0.##",
showInLegend: true,
dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
},{
type: "column",
name: "Artificial Trees",
indexLabel: "{y}",
yValueFormatString: "$#0.##",
showInLegend: true,
dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
function toggleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else{
e.dataSeries.visible = true;
}
chart.render();
}
}
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<div id="piechart" style="width: 625px; height: 400px; border: 3px solid black; border-radius: 25px; margin-bottom: 20px; padding: 10px;"></div>
</body>
</html>