Today im going to show you how to add a nice looking and working HTML/CSS chart for your stats page.
![[Image: l00cWSM.png]]()
![[Image: c3ak7iO.png]]()
Step 1
Go to Templates/YOUR template/Statistics Templates/stats and look for this part
and replace with
Step 2
add this at the end of your Templates/YOUR template/Statistics Templates/stats template
Step 3
Now got to your theme global.css and paste this at the end
Step 4
Download the attachment and place it inside your theme folder
Done![Huh]( "Huh")
Source from codepen
This is the chart you get http://codepen.io/ejsado/pen/cLrlm
![.js]( "Unknown")
chart.js (Size: 1.71 KB / Downloads: 22)
![[Image: l00cWSM.png]](http://i.imgur.com/l00cWSM.png)
![[Image: c3ak7iO.png]](http://i.imgur.com/c3ak7iO.png)
Step 1
Go to Templates/YOUR template/Statistics Templates/stats and look for this part
Code:
<td class="trow1" rowspan="3" valign="top">
{$lang->ppd} <strong>{$postsperday}</strong><br />
{$lang->tpd} <strong>{$threadsperday}</strong><br />
{$lang->mpd} <strong>{$membersperday}</strong><br />
{$lang->ppm} <strong>{$postspermember}</strong><br />
{$lang->tpm} <strong>{$threadspermember}</strong><br />
{$lang->rpt} <strong>{$repliesperthread}</strong>
</td>and replace with
Code:
<td class="trow1" rowspan="3" valign="top">
<!-- begin -->
<section>
<div class="pieID pie">
</div>
<ul class="pieID legend">
<li>
<em>Post per day</em>
<span>{$postsperday}</span>
</li>
<li>
<em>Threads per day</em>
<span>{$threadsperday}</span>
</li>
<li>
<em>Members per day</em>
<span>{$membersperday}</span>
</li>
<li>
<em>Posts per member</em>
<span>{$postspermember}</span>
</li>
<li>
<em>Threads per member</em>
<span>{$threadspermember}</span>
</li>
<li>
<em>Replies per thread</em>
<span>{$repliesperthread}</span>
</li>
</ul>
</section>
<!-- end -->
</td>Step 2
add this at the end of your Templates/YOUR template/Statistics Templates/stats template
Code:
<script type="text/javascript" src="{$theme['imgdir']}/chart.js"></script>Step 3
Now got to your theme global.css and paste this at the end
Code:
/* test code */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
@keyframes bake-pie {
from {
transform: rotate(0deg) translate3d(0,0,0);
}
}
section {
margin-top: 30px;
margin-left: 50px;
}
.pieID {
display: inline-block;
vertical-align: top;
}
.pie {
height: 200px;
width: 200px;
position: relative;
margin: 0 30px 30px 0;
}
.pie::before {
content: "";
display: block;
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background: #EEE;
border-radius: 50%;
top: 50px;
left: 50px;
}
.pie::after {
content: "";
display: block;
width: 120px;
height: 2px;
background: rgba(0,0,0,0.1);
border-radius: 50%;
box-shadow: 0 0 3px 4px rgba(0,0,0,0.1);
margin: 220px auto;
}
.slice {
position: absolute;
width: 200px;
height: 200px;
clip: rect(0px, 200px, 200px, 100px);
animation: bake-pie 1s;
}
.slice span {
display: block;
position: absolute;
top: 0;
left: 0;
background-color: black;
width: 200px;
height: 200px;
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
}
.legend {
list-style-type: none;
padding: 0;
margin: 0;
padding: 15px;
font-size: 13px;
}
.legend li {
width: 130px;
height: 1.25em;
margin-bottom: 0.7em;
padding-left: 0.5em;
border-left: 1.25em solid black;
}
.legend em {
font-style: normal;
}
.legend span {
float: right;
}Step 4
Download the attachment and place it inside your theme folder
Done
Source from codepen
This is the chart you get http://codepen.io/ejsado/pen/cLrlm
chart.js (Size: 1.71 KB / Downloads: 22)