MyBB Community Forums

Today im going to show you how to add a nice looking and working HTML/CSS chart for your stats page.






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  


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

Nice tutorial, first time I've seen one of those.

Works well on my localhost however appears to not work on my actual domain for some reason. Good job on this though

excellent tutorial, i saw someone try to sell this not too long ago

Thnx

@Garden of Sinners its working fine for me on localhost and on the live site. Maybe a conflict with the scripts from your theme?

Hope you get it solved

Really good work Fayaman, appreciable.

This is what me and a friend did to fix the issue we were having, although not as good looking as your version is if it works it works. This is a JS version of what you made using an external script from CanvasJS.com

in Statistics -> Stats put 

<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 

underneath {$headerinclude}

replace 

<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>

with 

<td class="trow1" rowspan="3" valign="top">
<div id="piechart" style="height: 300px; width: 100%;">
</td>

Underneath the </body> tag put

<script>		  
        CanvasJS.addColorSet("pie",
                [

                "#2F4F4F",
                "#008080",
                "#2E8B57",
                "#3CB371",
                "#90EE90",
			    "#636F57"
                ]);
		  
window.onload = function () {
	var chart = new CanvasJS.Chart("piechart",
	{
		backgroundColor: "#1F1F1F",
		colorSet:  "pie",
		title:{
			text: ""
		},
                animationEnabled: true,
		legend:{
			verticalAlign: "center",
			horizontalAlign: "left",
			fontSize: 20,
			fontFamily: "Helvetica",      
			    fontColor: "white"
		},
		theme: "theme2",
		data: [
		{        
			type: "pie",       
			indexLabelFontFamily: "Garamond",       
			indexLabelFontSize: 20,
			indexLabel: "{label} {y}",
			startAngle:-20,      
			showInLegend: true,
			toolTipContent:"{legendText} {y}",
			dataPoints: [
				{  y: {$postsperday}, legendText:"Posts per day", label: "" },
				{  y: {$threadsperday}, legendText:"Threads per day", label: "" },
				{  y: {$membersperday}, legendText:"Members per day", label: "" },
				{  y: {$postspermember}, legendText:"Posts per member" , label: ""},       
				{  y: {$threadspermember}, legendText:"Threads per member" , label: ""},
				{  y: {$repliesperthread}, legendText:"Replies per thread" , label: ""}
			]
		}
		]
	});
	chart.render();
}

of course replace the hex colours and the font colour with the font and pie colours that you want.

The end result will look something like this:

The posts per day thing on the pie chart is a hover over effect.

Looking good . Ill give it a try later

This isn't working

first one freezes up.

second one will work.

its not index_stats.

its under the stats template. if you are under index template section you are in the wrong spot.