I am trying to create a Bar Chart. I used some libraries that I found on github to do this. But now I am having trouble passing over the variables that I pulled from the DB (just some numbers) into the data section on the javascript. If anyone could give some tips or help that would be great.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="Chart.js"></script>
<meta charset="utf-8" />
<title>index</title>
</head>
<body>
<h1>Sales for last three months </h1>
<?php
require("files/connect.php");
$queryJan = "SELECT sales_records FROM games WHERE sale_month='Jan'";
$queryFeb = "SELECT sales_records FROM games WHERE sale_month='Feb'";
$queryMar = "SELECT sales_records FROM games WHERE sale_month='Mar'";
$Jan = mysqli_query($connection,$queryJan) or die(mysqli_error($connection));
$Feb = mysqli_query($connection,$queryFeb) or die(mysqli_error($connection));
$Mar = mysqli_query($connection,$queryMar) or die(mysqli_error($connection));
//Information I want to pass to the javascript.
$JanArray = mysqli_fetch_array($Jan);
$FebArray = mysqli_fetch_array($Feb);
$MarArray = mysqli_fetch_array($Mar);
?>
<canvas id="canvas" height="450" width="600"></canvas>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var barChartData = {
labels : ["January","February","March"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : []
//I want to put the information in here and it will create a bar chart
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : []
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : []
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
</script>
</body>
</html>