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
#2
Nice tutorial, first time I've seen one of those.
Reply
#3
Works well on my localhost however appears to not work on my actual domain for some reason. Good job on this though Smile
Reply
#4
excellent tutorial, i saw someone try to sell this not too long ago
Relaxing and Friendly; Anime Forum
Reply
#5
Thnx Smile

@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 Smile
Reply
#6
Really good work Fayaman, appreciable.
Reply
#7
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: [Image: 06b38a5f34.png]

The posts per day thing on the pie chart is a hover over effect.
Reply
#8
Looking good Smile . Ill give it a try later
Reply
#9
This isn't working Sad
Reply
#10
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.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)