PHP GD creating graph from a MYSQL table - php

Question

I am currently creating a bar graph for PHP using GD (inb4 use Java-script, I can't. This is a requirement) As it stands I have a functioning Bar graph in GD that i can display normal numbers with but now I am trying to retrieve data from a MYSQL table and display it in the graph.
require "connect.php";
$sql = "SELECT
title, searchcount
FROM movies
ORDER BY
searchcount DESC
LIMIT 10";
$result = $conn->query($sql);
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$data = [
$row['title'] => substr_count($row['searchcount'], "1"),
];
}
}
This above code currently works in retrieving one of the required 10 results. What I can't figure out is how to retrieve the other 9, any help would be greatly appreciated.
https://imgur.com/m8sU8QG
This here is a link to the Graph at its current state
How the graph is drawn.
/*
* Chart settings and create image
*/
// Image dimensions
$imageWidth = 700;
$imageHeight = 400;
// Grid dimensions and placement within image
$gridTop = 40;
$gridLeft = 50;
$gridBottom = 340;
$gridRight = 650;
$gridHeight = $gridBottom - $gridTop;
$gridWidth = $gridRight - $gridLeft;
// Bar and line width
$lineWidth = 1;
$barWidth = 20;
// Font settings
$font = 'OpenSans-Regular.ttf';
$fontSize = 10;
// Margin between label and axis
$labelMargin = 8;
// Max value on y-axis
$yMaxValue = 25;
// Distance between grid lines on y-axis
$yLabelSpan = 5;
// Init image
$chart = imagecreate($imageWidth, $imageHeight);
// Setup colors
$backgroundColor = imagecolorallocate($chart, 255, 255, 255);
$axisColor = imagecolorallocate($chart, 85, 85, 85);
$labelColor = $axisColor;
$gridColor = imagecolorallocate($chart, 212, 212, 212);
$barColor = imagecolorallocate($chart, 47, 133, 217);
imagefill($chart, 0, 0, $backgroundColor);
imagesetthickness($chart, $lineWidth);
/*
* Print grid lines bottom up
*/
for($i = 0; $i <= $yMaxValue; $i += $yLabelSpan) {
$y = $gridBottom - $i * $gridHeight / $yMaxValue;
// draw the line
imageline($chart, $gridLeft, $y, $gridRight, $y, $gridColor);
// draw right aligned label
$labelBox = imagettfbbox($fontSize, 0, $font, strval($i));
$labelWidth = $labelBox[4] - $labelBox[0];
$labelX = $gridLeft - $labelWidth - $labelMargin;
$labelY = $y + $fontSize / 2;
imagettftext($chart, $fontSize, 0, $labelX, $labelY, $labelColor, $font, strval($i));
}
/*
* Draw x- and y-axis
*/
imageline($chart, $gridLeft, $gridTop, $gridLeft, $gridBottom, $axisColor);
imageline($chart, $gridLeft, $gridBottom, $gridRight, $gridBottom, $axisColor);
/*
* Draw the bars with labels
*/
$barSpacing = $gridWidth / count($data);
$itemX = $gridLeft + $barSpacing / 2;
foreach($data as $key => $value) {
// Draw the bar
$x1 = $itemX - $barWidth / 2;
$y1 = $gridBottom - $value / $yMaxValue * $gridHeight;
$x2 = $itemX + $barWidth / 2;
$y2 = $gridBottom - 1;
imagefilledrectangle($chart, $x1, $y1, $x2, $y2, $barColor);
// Draw the label
$labelBox = imagettfbbox($fontSize, 0, $font, $key);
$labelWidth = $labelBox[4] - $labelBox[0];
$labelX = $itemX - $labelWidth / 2;
$labelY = $gridBottom + $labelMargin + $fontSize;
imagettftext($chart, $fontSize, 0, $labelX, $labelY, $labelColor, $font, $key);
$itemX += $barSpacing;
}
/*
* Output image to browser
*/
imagepng($chart, 'chart.png');

Answer 1

Ok, i tested your code and it works, so my guess is that is not formatted the right way or you not getting the right output from DB.
Try to change this lines:
$data = [
$row['title'] => substr_count($row['searchcount'], "1"),
];
to this:
$data[$row['title']] = substr_count($row['searchcount'], "1");
As you expecting to get a $key => $value pair, so the $value to not be an array(). Here are the test data i used and result:
<?php
$data = array(
'test1' => 10,
'test2' => 4,
'test3' => 10,
'test4' => 4,
'test5' => 10,
'test6' => 4,
'test7' => 10,
'test8' => 4,
'test9' => 10,
'test10' => 4
);
/*
* Chart settings and create image
*/
// Image dimensions
$imageWidth = 700;
$imageHeight = 400;
// Grid dimensions and placement within image
$gridTop = 40;
$gridLeft = 50;
$gridBottom = 340;
$gridRight = 650;
$gridHeight = $gridBottom - $gridTop;
$gridWidth = $gridRight - $gridLeft;
// Bar and line width
$lineWidth = 1;
$barWidth = 20;
// Font settings
$font = getcwd() . '/arial.ttf'; // I switched to use Arial font
$fontSize = 10;
// Margin between label and axis
$labelMargin = 8;
// Max value on y-axis
$yMaxValue = 25;
// Distance between grid lines on y-axis
$yLabelSpan = 5;
// Init image
$chart = imagecreate($imageWidth, $imageHeight);
// Setup colors
$backgroundColor = imagecolorallocate($chart, 255, 255, 255);
$axisColor = imagecolorallocate($chart, 85, 85, 85);
$labelColor = $axisColor;
$gridColor = imagecolorallocate($chart, 212, 212, 212);
$barColor = imagecolorallocate($chart, 47, 133, 217);
imagefill($chart, 0, 0, $backgroundColor);
imagesetthickness($chart, $lineWidth);
/*
* Print grid lines bottom up
*/
for($i = 0; $i <= $yMaxValue; $i += $yLabelSpan) {
$y = $gridBottom - $i * $gridHeight / $yMaxValue;
// draw the line
imageline($chart, $gridLeft, $y, $gridRight, $y, $gridColor);
// draw right aligned label
$labelBox = imagettfbbox($fontSize, 0, $font, strval($i));
$labelWidth = $labelBox[4] - $labelBox[0];
$labelX = $gridLeft - $labelWidth - $labelMargin;
$labelY = $y + $fontSize / 2;
imagettftext($chart, $fontSize, 0, $labelX, $labelY, $labelColor, $font, strval($i));
}
/*
* Draw x- and y-axis
*/
imageline($chart, $gridLeft, $gridTop, $gridLeft, $gridBottom, $axisColor);
imageline($chart, $gridLeft, $gridBottom, $gridRight, $gridBottom, $axisColor);
/*
* Draw the bars with labels
*/
$barSpacing = $gridWidth / count($data);
$itemX = $gridLeft + $barSpacing / 2;
foreach($data as $key => $value) {
// Draw the bar
$x1 = $itemX - $barWidth / 2;
$y1 = $gridBottom - $value / $yMaxValue * $gridHeight;
$x2 = $itemX + $barWidth / 2;
$y2 = $gridBottom - 1;
imagefilledrectangle($chart, $x1, $y1, $x2, $y2, $barColor);
// Draw the label
$labelBox = imagettfbbox($fontSize, 0, $font, $key);
$labelWidth = $labelBox[4] - $labelBox[0];
$labelX = $itemX - $labelWidth / 2;
$labelY = $gridBottom + $labelMargin + $fontSize;
imagettftext($chart, $fontSize, 0, $labelX, $labelY, $labelColor, $font, $key);
$itemX += $barSpacing;
}
/*
* Output image to browser
*/
imagepng($chart, 'chart.png');
?>
Output