PHP

Çubuk Performans Grafiği Oluşturma: PHP ve HTML ile Basit Bir Örnek

Çubuk performans grafiği, verilerin görsel olarak temsil edilmesinde sıkça kullanılan etkili bir araçtır. Bu grafik türü, belirli bir dönem boyunca değişen değerleri görsel olarak analiz etmek için idealdir. Bu yazıda, PHP ve HTML kullanarak basit bir çubuk performans grafiği nasıl oluşturulacağını öğreneceğiz.

Zeki BOSTAN

Şub 20, 2024 - 12:48

Şub 20, 2024 - 13:56

0 198

Çubuk Performans Grafiği Oluşturma: PHP ve HTML ile Basit Bir Örnek

İçindekiler

Veri Hazırlama:

İlk adım olarak, grafiğimizi oluşturmak için gerekli olan veri setini hazırlamamız gerekiyor. Örneğimizde, aylara göre bir performans veri seti kullanacağız. PHP dizilerini kullanarak bu veri setini oluşturacağız.

// Örnek veri dizisi
$data = array(
    'Ocak' => 40, 'Şubat' => 60, 'Mart' => 90, 'Nisan' => 100, 'Mayıs' => 75, 'Haziran' => 75, 'Temmuz' => 75,
    'Ağustos' => 75, 'Eylül' => 75, 'Ekim' => 75, 'Kasım' => 75, 'Aralık' => 99
);

Grafik Oluşturma:

Veri setimizi hazırladıktan sonra, HTML ve PHP kombinasyonunu kullanarak çubuk performans grafiğini oluşturacağız. HTML ile çubukları, PHP ile veri setini ve değerleri kullanarak dinamik olarak oluşturacağız.

<div class="container">
    <div class="y-axis">
        <!-- Y ekseni etiketleri -->
        <?php
        // Y ekseni etiketlerini oluştur
        foreach ($data as $i = > $maxValue) {
            echo '<div class="y-label">' . $i . '</div>';
        }
        ?>
    </div>
    <div class="chart">
        <!-- Çubuk performans grafiği -->
        <?php
        // Veri dizisindeki her bir değer için bir çubuk oluştur
        foreach ($data as $value) {
            // Çubuğun yüksekliğini oranlayarak ayarla
            $heightPercentage = ($value / $maxValue) * 90; // 90 yerine 100 olabilir
            echo '<div class="bar" style="height: ' . $heightPercentage . '%;">' . $value . '</div>';
        }
        ?>
    </div>
    <div class="x-axis">
        <!-- X ekseni etiketleri -->
        <?php
        // X ekseni etiketlerini oluştur
        foreach ($data as $key = > $value) {
            echo '<div class="x-label">' . $key . '</div>';
        }
        ?>
    </div>
</div>

CSS Stilleri:

Grafiğimizi düzenlemek için CSS kullanacağız. Çubukların boyutu, eksenlerin düzeni ve genel grafik stili gibi özellikleri CSS ile ayarlayacağız.

/* CSS stilleri */
.container {
    position: relative;
    max-width: 98%;
    min-width: 98%;
}

/* Diğer stilleri kendi isteğimize göre ayarlayabiliriz. Aşağıdaki derlemede geniş bir örneklendirme bulabilirsiniz. */
/* ... */

Derleyelim:

Tüm kodları birleştirelim ve bir örnek üzerinde tüm değişkenleri hesaplayarak daha kapsamlı bir grafik oluşturalım. Bu örnekler kişiye ve istenilen seçeneklere göre değişikliklerle kişiselleştirilebilri veya veritabanına bağlanarak verilerin alındığı bir dinamik yapıya çevrilebilir.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Çubuk Performans Grafiği</title>
	<?php
		// Örnek veri dizisi
		$data = array('Ocak'=>40, 'Şubat'=>60, 'Mart'=>90, 'Nisan'=>100, 'Mayıs'=>75, 'Haziran'=>75, 'Temmuz'=>75, 'Ağustos'=>75, 'Eylül'=>75, 'Ekim'=>75, 'Kasım'=>75, 'Aralık'=>99,'ortlama'=>70);
		//datadan bize lazım olacak verileri oluşturalım.
        $maxValue = max($data); // en yüksek değeri bulalım.
		$maxw=96/(count($data))/2.8; // değerlerin adetini bulup genişliği oranlayalım.
	?>
    <style>
		.container {
			position: absolute;
			max-width:98%;
			min-width:98%;
		}
        .chart {
            display: flex;
            align-items: flex-end;
            height: 300px;
            border-bottom: 1px solid #ccc;
            position: relative;
			left:25px;
			max-width:96%;
			min-width:96%;
        }       
        .bar {
			min-width:<?=$maxw;?>%;
			max-width:<?=$maxw;?>%;
            background-color: blue;
            margin: <?=$maxw/3;?>%;
            padding: <?=$maxw/1.6;?>%;
            text-align: center;
            color: white;
        }
		.x-axis {
			display: flex;
			justify-content: space-between;
			padding: 0 0 0 25px;
			min-height: 60px;
			max-height: 60px;
        }
        .x-label {
			min-width:<?=$maxw;?>%;
			max-width:<?=$maxw;?>%;
            text-align: center;
			margin: <?=$maxw/3;?>%;
			padding: <?=$maxw/1.6;?>%;
			-webkit-transform: rotate(45deg);	/* Safari */
			-moz-transform: rotate(45deg);  /* Firefox */
			-ms-transform: rotate(45deg);  /* IE */
			-o-transform: rotate(45deg);  /* Opera */
			filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  /* Internet Explorer */
        }
        .y-axis {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 50px;
            width: 25px;
            display: flex;
            flex-direction: column;
			justify-content: space-between;
        }
        .y-label {
            text-align: right;
            padding-right: 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="y-axis">
		<?php
			// Y eksenini oluştur
            for ($i = $maxValue; $i >= 0; $i -= 20) {
                echo '<div class="y-label">' . $i . '</div>';
            }
		?>
    </div>
	<div class="chart">
		<?php
			// Veri dizisindeki her bir değer için bir çubuk oluştur
			foreach ($data as $value) {
				// Çubuğun yüksekliğini oranlayarak ayarla
				$heightPercentage = ($value / $maxValue) * 90; // 90 yerine 100 olabilir ancak buradaki 90 grafik alanının dışına çıkmamak için azaltılmıştır.
				echo '<div class="bar" style="height: ' . $heightPercentage . '%;">' . $value . '</div>';
			}
		?>
	</div>
	<div class="x-axis">
        <?php
			// X eksenini oluştur
			foreach ($data as $key => $value) {
				echo '<div class="x-label">' . $key . '</div>';
			}
        ?>
    </div>
</div>
</body>
</html>

Ekran çıktısı:

Sonuç:

Bu adımları izleyerek, PHP ve HTML kullanarak basit bir çubuk performans grafiği oluşturduk. Bu teknikleri kullanarak, daha karmaşık grafikler oluşturabilir ve verilerinizi daha etkili bir şekilde görselleştirebilirsiniz.