Polyline for stats sections

[Bloc]

Had an idea using svg's polyline for rendering stats - or at least certain sections of stats - and it seems to work well. This is from the posting activity section. Pies are also possible using SVG but for now I am exploring polyline's capabilities.

Beats importing JS frameworks doing the same thing.

[SychO]

Creative I've been wanting to look into svg for a while now

[Bloc]

Needs tweaking for sure, but quite interesting to work with.

[Bloc]

Heres another attempt, this one works better for the hour-stats of activity stats, by making it a bit more square(ish). Still using just a simple svg that also scales up and down.

[Antechinus]

Different. I'm not sure the current presentation is to my taste, but it's certainly worth playing with to see what you can get.

[Bloc]

Yeah, after toying with a bit I came to the conclusion that polyline works best on many values, as in a regular graph showing a tendency or curve. The last example looks more like bars - which can be done with regular html anyway.

[Antechinus]

Is there any saving in code with the polyline?

[Bloc]

Not really.. Its more code, not a lot, but its great to be able to actually show graphs.

This is a quick'n'dirty example that gives you teh last example:

Code Select Expand


echo '
<svg style="max-width: 100%; border-bottom: solid 1px #ccc; box-sizing: border-box; height: auto; margin-bottom: 1rem;" viewBox="0 0 240 60">
  <polyline
     fill="white"
     stroke="teal"
     stroke-width="0.5"
     points="0,60 ';

foreach ($context['posts_by_time'] as $time_of_day)
{
echo ($time_of_day['hour_format']*10) , ',' , 59-($time_of_day['relative_percent']/2) , '
',
($time_of_day['hour_format']*10)+10 , ',' , 59-($time_of_day['relative_percent']/2), '
';
}
echo '240,60
"/>';

foreach ($context['posts_by_time'] as $time_of_day)
echo '
<text y="7%" x="' , ($time_of_day['hour_format']*10)+3 , '" font-size="4" fill="#777">' , $time_of_day['hour_format'] , '</text>
';

echo '
</svg>';


[Antechinus]

Hey that's pretty clean. I wouldn't consider that bloat if there are good uses for it.

[Diego Andrés]

Really nice, I like it