Combining character statistics and imagefontwidth() to draw text bar charts

In web development, drawing charts is a common requirement, especially when presenting statistics. Although there are many professional chart libraries, sometimes we only need to use simple text and PHP built-in functions to quickly implement an intuitive bar chart. This article will introduce how to combine character statistics and PHP's imagefontwidth() function to draw a simple text bar chart using the GD library.

1. Core idea

The horizontal axis of the bar chart uses text to represent the category, and the vertical axis uses text characters to represent the size of the value. We calculate the width of each column by counting the number of characters in the string and combining the imagefontwidth() function, thereby dynamically drawing the width of each column.

2. Preparation

Make sure your PHP environment supports GD libraries, usually just enable the php_gd2 extension.

3. Introduction to key functions

• imagefontwidth(int $font): int
  Returns the character width of the built-in font. The GD library has several fonts (1 to 5) built in, with varying sizes and widths.

• imagestring(resource $image, int $font, int $x, int $y, string $string, int $color): bool
  Draw a string in the image.

4. Sample code

Here is a simple example to illustrate how to draw a text bar chart:

 <?php
// Data sample，category => Value(Expressed by character length)
$data = [
    'apple' => 5,
    'banana' => 8,
    'tangerine' => 3,
    'Grape' => 6,
    'pear' => 4,
];

// Canvas Size
$width = 400;
$height = 300;

// Create true color images
$image = imagecreatetruecolor($width, $height);

// Color definition
$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);
$blue = imagecolorallocate($image, 0, 0, 255);

// Fill background color
imagefill($image, 0, 0, $white);

// Select a font size（1 arrive 5）
$font = 5;
$fontWidth = imagefontwidth($font);
$fontHeight = imagefontheight($font);

// Calculate the column spacing
$barSpacing = 10;

// Define the starting drawing coordinates
$xStart = 50;
$yStart = 50;

// Maximum column length（Character count mapped to pixels）
$maxLength = max($data);
$maxBarWidth = 200;

// Draw histograms through data
foreach ($data as $label => $value) {
    // Calculate the column width，基于最大Value缩放
    $barWidth = intval($value / $maxLength * $maxBarWidth);

    // Drawing columns（Use blue rectangles）
    imagefilledrectangle($image, $xStart, $yStart, $xStart + $barWidth, $yStart + $fontHeight, $blue);

    // 绘制category文字（On the left side of the post）
    imagestring($image, $font, $xStart - strlen($label) * $fontWidth - 10, $yStart, $label, $black);

    // 绘制Value文字（On the right side of the post）
    imagestring($image, $font, $xStart + $barWidth + 5, $yStart, str_repeat('|', $value), $black);

    // The vertical coordinate of the next column is moved down
    $yStart += $fontHeight + $barSpacing;
}

// Output picture header
header('Content-Type: image/png');
imagepng($image);

// Free memory
imagedestroy($image);
?>

5. Code description

• The $data array defines each category and its corresponding numerical values. The larger the value, the longer the column.

• Use imagefontwidth() to obtain the character width to ensure accurate calculation of text and column lengths.

• Draw a columnar rectangle with imagefilledrectangle() .

• Use imagestring() to draw a numerical bar chart represented by | characters.

• Dynamically calculate the column width, and the column length is proportional to the maximum value.

6. Effect display

After running the above PHP script, a PNG picture will be generated, showing a simple text bar chart. The blue columns arranged horizontally represent the size of the value, the category name on the left, and the numerical bars represented by vertical characters on the right.

This method is suitable for scenarios where graphics are not high, or that it is necessary to quickly generate simple statistical graphs. Combining more GD functions, more complex graphics and charts can also be drawn.

If you want to further optimize, such as adding axes, titles, and dynamic fonts, you can expand on this basis.