Nice looking HTML chart for stats page
#1
Wink 
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

<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

<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

<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

/* 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  Huh


Source from codepen
This is the chart you get http://codepen.io/ejsado/pen/cLrlm


Attached Files
.js   chart.js (Size: 1.71 KB / Downloads: 262)
Reply


Messages In This Thread
Nice looking HTML chart for stats page - by Fayaman - 2016-03-26, 04:31 AM

Forum Jump:


Users browsing this thread: 1 Guest(s)