Home › forums › Using CanvasJS › How can I use PHP MySQL data to create a bar chart like this
This topic contains 1 reply, has 2 voices, and was last updated by 
-
AuthorPosts
-
January 29, 2016 at 10:42 am #9837
This is my data.php
<?phpheader(‘Content-Type: application/json’);
include(“dbFunctions.php”);
$data_points1 = array();
$data_points2 = array();
$data_points3 = array();$result1 = mysqli_query($link,”SELECT facility_cat, COUNT(facility_cat) WHERE YEAR(CURDATE()) -2 FROM
bookingGROUP BY facility_cat”);
$result2 = mysqli_query($link,”SELECT facility_cat, COUNT(facility_cat) ,YEAR(CURDATE()) -1 FROMbookingGROUP BY facility_cat”);
$result3 = mysqli_query($link,”SELECT facility_cat, COUNT(facility_cat) ,YEAR(CURDATE()) FROMbookingGROUP BY facility_cat”);while($row = mysqli_fetch_array($result1))
{
$point1 = array(“indexLabel” =>$row[‘facility_cat’], “label” => $row[‘facility_cat’] , “y” => $row[‘COUNT(facility_cat)’]);array_push($data_points1, $point1);
}while($row = mysqli_fetch_array($result2))
{
$point2 = array(“indexLabel” =>$row[‘facility_cat’], “label” => $row[‘facility_cat’] , “y” => $row[‘COUNT(facility_cat)’]);array_push($data_points2, $point2);
}
while($row = mysqli_fetch_array($result3))
{
$point3 = array(“indexLabel” =>$row[‘facility_cat’], “label” => $row[‘facility_cat’] , “y” => $row[‘COUNT(facility_cat)’]);array_push($data_points3, $point3);
}echo json_encode($data_points1, JSON_NUMERIC_CHECK);
echo json_encode($data_points2, JSON_NUMERIC_CHECK);
echo json_encode($data_points3, JSON_NUMERIC_CHECK);mysqli_close($link);
?>
This is my DataBarChart.php
<?php
include(“dbFunctions.php”);
session_start();?>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link href=”stylesheets/style.css” rel=”stylesheet”/>
<script type=”text/javascript” src=”script/jquery.validate.min.js”></script>
<script type=”text/javascript” src=”script/canvasjs.min.js”></script></head>
<script type=”text/javascript” src=”js/jquery-1.6.1.min.js”></script></head>
<title>Online Booking System</title>
<script type=”text/javascript”>
$(document).ready(function () {$.getJSON(“DataBarChart.php”, function (result1,result2,result3) {
var chart = new CanvasJS.Chart(“BarChart”, {
theme: “theme2”,
title:{
text: “Bookings over the years”
},
exportFileName: “Bookings over the years”, //Give any name accordingly
exportEnabled: true,
axisY: {
includeZero: false,},
axisX: {
interval: 10
},
axisY: {
title: “Number of Bookings Made over the years”,
maximum: 250
},data: [
{
type: “bar”,
showInLegend: true,
toolTipContent: “{y} – #percent %”,
legendText: “{indexLabel}”,
color: “gold”,
dataPoints: result1
},
{
type: “bar”,
showInLegend: true,
toolTipContent: “{y} – #percent %”,
legendText: “{indexLabel}”,
color: “silver”,
dataPoints: result2
},
{
type: “bar”,
showInLegend: true,
toolTipContent: “{y} – #percent %”,
legendText: “{indexLabel}”,
color: “#DCA978″,
dataPoints: result3
},
]
});chart.render();
});
});
</script>
</head>
<body><div id=”MainContent”>
<div class=”sub_contents”>
<h8>Number of Facility Book Pie Chart</h8>
<div id=”BarChart” style=”height: 300px; width: 100%; float: right;”></div>
</div></div>
</body>
February 5, 2016 at 11:59 am #9849 -
AuthorPosts
You must be logged in to reply to this topic.