for (; $day < $today; ++$day) {
preg_match("!(\\d+)/(\\d+)/(\\d+)!", jdtogregorian($day), $matched);
print "<tr>\n";
printf(" <td>%04d-%02d-%02d</td>\n", $matched[3], $matched[1], $matched[2]);
print " <td colspan=\"24\"><div class=\"bar\">\n";
foreach ($deviceStatus as $deviceIndex => $timeOfDay) {
drawBar($deviceIndex, 0, 24 * 60 * 60);
}
print " </div></td>\n";
print "</tr>\n";
}
print "<tr>\n";
print strftime(" <td>%G-%m-%d</td>\n");
print " <td colspan=\"24\"><div class=\"bar\">\n";
foreach ($deviceStatus as $deviceIndex => $timeOfDay) {
drawBar($deviceIndex, 0, $now, 1);
}
print " </div></td>\n";
print "</tr>\n";
}
}
}
if (!isset($parsedLine) || !$parsedLine) {
?>
<tr>
<td colspan="25">No events logged so far.</td>
</tr>
<?php
}
?>
</tbody>
Below: how to draw svg graphics via PHP
*/
$x = 0;
// set the x position
function drawBar($height, $x)
{
echo '<rect width="35" height="' . $height . '" x="' . $x . '" ' . 'style="fill:rgb(0,45,255);stroke-width:3;stroke:rgb(0,0,0)" />';
}
//drawBar(500);
/*loop it out */
$result = $mysqli->query($sql);
/* svg header */
echo '<svg width="400" height="700">';
/* loop out bars */
while ($row = $result->fetch_assoc()) {
drawBar($row['prod_price'] * 20, $x);
$x = $x + 50;
}
echo "</svg>";
/*
POSITION
========
The y-position of a rectangle starts at top left.
How would you position the bars along the y = 400 line?
(Asuming that the svg has the height 400)
STYLE
=====
Style the result via CSS and / or JavaScript.
1. Give each bar a different color.
2. Style background images.