{"id":111,"date":"2020-01-06T16:48:20","date_gmt":"2020-01-06T15:48:20","guid":{"rendered":"http:\/\/stuff.frankdux.de\/?p=111"},"modified":"2020-01-06T16:55:59","modified_gmt":"2020-01-06T15:55:59","slug":"display-progress-in-a-circle-with-jquery-and-php","status":"publish","type":"post","link":"https:\/\/stuff.frankdux.de\/?p=111","title":{"rendered":"Display progress in a circle with JQuery and PHP"},"content":{"rendered":"\n

On my unspontan-site<\/a>, I use some Javascript stuff as published by kottenator<\/a>. See the linked GitHub page for examples.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n
\n

At unspontan.com (which is used to count attendance of people, e.g. for an upcoming soccer training), I use it to display the numbers of participants that have given positive feedback; if that total number is below a certain treshold, the number is red; and above it’s green. Click here <\/a>to see a demo.
Additionally, there is a maximum number of allowed positive feedbacks (i.e. maximum number of attendees); if that is reached, the circle reaches 100% (and is full). No further feedback is possible then.<\/p>\n<\/div><\/div>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

The interesting part in my implementation is the dynamic creation of these progress markers, based on available positive feedback and minimum and maximum treshold. <\/p>\n\n\n\n

<\/p>\n\n\n\n

\n
\"\"<\/figure><\/div>\n<\/div><\/div>\n\n\n\n

Additionally, the font-size varies depending on the actual number, so the number doesn’t run outside of the circle.
Let’s look at some code (which is CSS whith inline PHP – very dirty, but it explains the concept). <\/p>\n\n\n\n

These two styles (“greennumber<\/code>” and “rednumber<\/code>“) define the appearance of the actual number. $positivefeedbackfornextdate<\/code> is the number of positive feedbacks, i.e. the number to be displayed.<\/p>\n\n\n\n

<style type=\"text\/css\">\n.greennumber {\n  margin-top: 0.05em;\n  <?php if ($positivefeedbackfornextdate <= 9) {print \"font-size: 3em;position:relative; left:-1px; top:-64px;\\n\";} else {print \"font-size: 2em;position:relative; left:0px; top:-55px;\\n\";}?>\n  font-weight: bold;\n  font-family: \"Arial Black\", sans-serif;\n  color: #31B404;\n  text-shadow: 0 0 0.1em #888, 0 0 0.1em #888, 0 0 0.1em #888; \n           }\n.rednumber {\n  margin-top: 0.05em;\n<?php if ($positivefeedbackfornextdate <= 9) {print \"font-size: 3em;position:relative; left:-1px; top:-64px;\\n\";} else {print \"font-size: 2em;position:relative; left:0px; top:-55px;\\n\";}?>\n  font-weight: bold;\n  font-family: \"Arial Black\", sans-serif;color: #a33537;\n  text-shadow: 0 0 0.1em #888, 0 0 0.1em #888, 0 0 0.1em #888;\n         }<\/code><\/pre>\n\n\n\n
Now we draw the circle. $fulfillmentvalue<\/code> is the number in percent that is reached; calculate it based on your numbers (I calculate it as $fulfillmentvalue = ($positivefeedbackfornextdate \/ $nextdatemaxpeople); <\/code>with  $nextdatemaxpeople<\/code>  being the allowed number of positive feedbacks).<\/p>\n\n\n\n
The PHP code with embedded Javascript looks like this:<\/p>\n\n\n\n
print \"<div id=\\\"circle\\\" style='position:relative; left:0px; top:26px;'>\\n\";\nprint \" <div class='greennumber'><strong><\/strong><\/div>\";\nprint \"<\/div>\\n\";\nprint \"<script>\\n\";\nprint \"$('#circle').circleProgress({\\n\";\nprint \"    value: $fulfillmentvalue,\\n\";\nprint \"    startAngle: -1.552,\\n\";\nprint \"    thickness: 8,\\n\";\nprint \"    size: 70,\\n\";\nprint \"    fill: {\\n\";\nprint \"        gradient: [\\\"#33FF00\\\", \\\"#006600\\\"]\\n\";\nprint \"    },\\n\";\nprint \"    animation: { duration: 2000}\\n\";\nprint \"})\\n\";\nprint \".on('circle-animation-progress', function(event, progress) {\\n\";\nprint \"$(this).find('strong').html(parseInt(\" . $positivefeedbackfornextdate . \" * progress));\\n\";\nprint \"});\\n\";\nprint \"<\/script>\\n\";<\/code><\/pre>\n\n\n\n
This is the positive case. For the negative case (i.e. red number) your would exchange the class of the number:<\/p>\n\n\n\n
print \" <div class='rednumber'><strong><\/strong><\/div>\";<\/code><\/pre>\n\n\n\n
Play around with the CSS settings (e.g. size of the font) to find the best way for your site.<\/p>\n\n\n\n
On my site, the final screen (including feedback details) looks like this:<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
On my unspontan-site, I use some Javascript stuff as published by kottenator. See the linked GitHub page for examples. At unspontan.com (which is used to count attendance of people, e.g. for an upcoming soccer training), I use it to display the numbers of participants that have given positive feedback; if that total number is below […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[7,6],"class_list":["post-111","post","type-post","status-publish","format-standard","hentry","category-varioustechstuff","tag-css","tag-php"],"_links":{"self":[{"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/posts\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=111"}],"version-history":[{"count":11,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":129,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=\/wp\/v2\/posts\/111\/revisions\/129"}],"wp:attachment":[{"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stuff.frankdux.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}