SVG Grid und Datendarstellung

[svg-fan]

Hi Helmut,

Ich brauche ein grobes Raster für jeweils 31 Tage und Werte zwischen Minus 20 und Plus 40 (kWh).

Wie kann ich so ein Raster erstellen?

mit ChatGPT erstellt:

<?php
// Function to get the number of days in a given month and year
function getDaysInMonth($month, $year) {
    return cal_days_in_month(CAL_GREGORIAN, $month, $year);
}

// Current month and year
$currentMonth = date('n'); // Numeric representation of the current month (1 to 12)
$currentYear = date('Y');

// Get the number of days in the current month
$daysInMonth = getDaysInMonth($currentMonth, $currentYear);

// SVG chart dimensions
$chartWidth = 600;
$chartHeight = 300;
$barWidth = $chartWidth / $daysInMonth;

// SVG chart content
$svgContent = '<?xml version="1.0" encoding="UTF-8"?>
<svg width="' . $chartWidth . '" height="' . $chartHeight . '" xmlns="http://www.w3.org/2000/svg">';

// Loop through each day and create a rectangle representing the bar
for ($day = 1; $day <= $daysInMonth; $day++) {
    $x = ($day - 1) * $barWidth;
    $barHeight = mt_rand(50, $chartHeight - 50); // Random height for demonstration purposes
    $svgContent .= '<rect x="' . $x . '" y="' . ($chartHeight - $barHeight) . '" width="' . $barWidth . '" height="' . $barHeight . '" fill="blue" />';
}

$svgContent .= '</svg>';

// Output the SVG chart
header('Content-Type: image/svg+xml');
echo $svgContent;
?>

Save the above code in a PHP file (e.g., chart.php) and run it on your web server. When you access the PHP file in your browser, it will generate and display an SVG chart where each bar represents the number of days in the current month, and the x-axis will have the days labeled from 1 to the last day of the month. The height of each bar is randomly generated for demonstration purposes, but you can replace it with actual data representing your chart.

Ich würde jetzt erst mal schauen, wie das SVG ausschaut und es manuell anpassen.

Dann chatGPT fragen, wie man …

... mehrere Kurven für Vormonat, Monat, Vorjahr..., oder so ähnlich in verschiedenen Farben reinzeichne[t]? Die Werte liegen in CSV-Dateien vor

To create an SVG line diagram with data from a CSV file using PHP, we'll first need to read the data from the CSV file and then use that data to generate the SVG content. In this example, we'll assume the CSV file contains two columns: "Day" and "Value", where "Day" represents the day of the month and "Value" represents the data value for each day.

Let's proceed with the code:

Create a CSV file named data.csv with the following sample data (you can replace it with your actual data):

Day,Value
1,10
2,20
3,15
4,25
5,30
6,18
7,22
8,17
9,29
10,33

Create a PHP script to read the CSV file, generate the SVG content, and display the SVG line diagram:

<?php
// Function to read CSV file and return an array of data
function readCSV($filename) {
    $data = [];
    if (($handle = fopen($filename, "r")) !== false) {
        while (($row = fgetcsv($handle, 1000, ",")) !== false) {
            $data[] = $row;
        }
        fclose($handle);
    }
    return $data;
}

// Read the CSV data
$csvData = readCSV('data.csv');

// SVG chart dimensions
$chartWidth = 600;
$chartHeight = 300;

// Find the maximum value in the data to scale the chart
$maxValue = max(array_column($csvData, 1));
$dataCount = count($csvData);

// Calculate the x and y positions of the points in the chart
$stepX = $chartWidth / ($dataCount - 1);
$stepY = $chartHeight / $maxValue;

// SVG chart content
$svgContent = '<?xml version="1.0" encoding="UTF-8"?>
<svg width="' . $chartWidth . '" height="' . $chartHeight . '" xmlns="http://www.w3.org/2000/svg">';

// Generate the points for the line
$linePoints = '';
foreach ($csvData as $index => $data) {
    $x = $index * $stepX;
    $y = $chartHeight - ($data[1] * $stepY);
    $linePoints .= $x . ',' . $y . ' ';
}

// Draw the line
$svgContent .= '<polyline points="' . $linePoints . '" fill="none" stroke="blue" stroke-width="2" />';

// Draw the x and y axis
$svgContent .= '<line x1="0" y1="0" x2="0" y2="' . $chartHeight . '" stroke="black" stroke-width="1" />';
$svgContent .= '<line x1="0" y1="' . $chartHeight . '" x2="' . $chartWidth . '" y2="' . $chartHeight . '" stroke="black" stroke-width="1" />';

$svgContent .= '</svg>';

// Output the SVG chart
header('Content-Type: image/svg+xml');
echo $svgContent;
?>

Save the PHP code in a file (e.g., chart.php) and make sure the data.csv file is in the same directory as the PHP script. When you access the PHP file in your browser, it will generate and display an SVG line diagram using the data from the data.csv file. The x-axis represents the days, and the y-axis represents the values from the CSV data. The blue line connects the data points.

Überprüf das mal und pass das an Deine Bedürfnisse an.

Liebe Grüße
Helmut

LG Tom