MyBB Community Forums
Stats Page Using Chart - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Stats Page Using Chart (/thread-226110.html)



Stats Page Using Chart - YASAKA - 2020-01-19

[Image: JW959fw.png]

Step 1
Edit stats.php file.

Find this
$plugins->run_hooks("stats_end");

Add this before the code
// Stats Page [Custom]
$i = 1;

while ($i <= 30) {
	$daily[$i] = TIME_NOW - (86400 * $i);
	$before[$i] = TIME_NOW - (86400 * ($i + 1));

	$datestats[$i] = date('Y,m,d', strtotime("-1 months", TIME_NOW - (86400 * ($i - 1))));

	// Posts
	$postquery[$i] = $db->query("SELECT COUNT(*) AS newposts FROM `".TABLE_PREFIX."posts` WHERE dateline BETWEEN '".$before[$i]."' AND '".$daily[$i]."'");
	$postsdata[$i] = my_number_format($db->fetch_field($postquery[$i], "newposts"));

	// Threads
	$threadquery[$i] = $db->query("SELECT COUNT(*) AS newthreads FROM `".TABLE_PREFIX."threads` WHERE dateline BETWEEN '".$before[$i]."' AND '".$daily[$i]."' AND closed NOT LIKE 'moved|%'");
	$threadsdata[$i] = my_number_format($db->fetch_field($threadquery[$i], "newthreads"));

	// New Users
	$newuserquery[$i] = $db->query("SELECT COUNT(*) AS newusers FROM `".TABLE_PREFIX."users` WHERE regdate BETWEEN '".$before[$i]."' AND '".$daily[$i]."'");
	$newusersdata[$i] = my_number_format($db->fetch_field($newuserquery[$i], "newusers"));

	// Active Users
	$activequery[$i] = $db->query("SELECT COUNT(*) AS activeusers FROM `".TABLE_PREFIX."users` WHERE lastvisit BETWEEN '".$before[$i]."' AND '".$daily[$i]."'");
	$activesdata[$i] = my_number_format($db->fetch_field($activequery[$i], "activeusers"));

	$i = $i + 1;
}
// End Custom

Like this: https://i.imgur.com/uWZXucF.png

Step 2
Go to Templates > YOUR template > Statistics Templates > stats.

Add this after {$headerinclude}
<script src="https://code.highcharts.com/highcharts.src.js"></script>

Step 3
Chart Code

Add this after {$header}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder showhide fullwidth">
<tr>
<td class="tcat"><strong>Monthly Stats</strong></td>
</tr>
<tr>
<td class="trow1">
<div id="graphstats" style="width:100%; height:300px;"></div>
<script type="text/javascript">
Highcharts.chart('graphstats', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: ''
    },
    legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom',
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'transparent',
		itemStyle: {
            color: 'white'
        },
        itemHoverStyle:{
            color: 'gray'
        },
        itemHiddenStyle:{
            color: '#444'
        }   
    },
    xAxis: {
			gridLineColor: '#2f2f2f',
			type:'datetime'
    },
    yAxis: {
        title: {
            text: 'Count'
        },
			gridLineColor: '#2f2f2f'
    },
    tooltip: {
        shared: true
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.4
        }
    },
    series: [{
        name: 'Posts',
        data: [[Date.UTC({$datestats[1]}),{$postsdata[1]}],
					[Date.UTC({$datestats[2]}),{$postsdata[2]}],
					[Date.UTC({$datestats[3]}),{$postsdata[3]}],
					[Date.UTC({$datestats[4]}),{$postsdata[4]}],
					[Date.UTC({$datestats[5]}),{$postsdata[5]}],
					[Date.UTC({$datestats[6]}),{$postsdata[6]}],
					[Date.UTC({$datestats[7]}),{$postsdata[7]}],
					[Date.UTC({$datestats[8]}),{$postsdata[8]}],
					[Date.UTC({$datestats[9]}),{$postsdata[9]}],
					[Date.UTC({$datestats[10]}),{$postsdata[10]}],
					[Date.UTC({$datestats[11]}),{$postsdata[11]}],
					[Date.UTC({$datestats[12]}),{$postsdata[12]}],
					[Date.UTC({$datestats[13]}),{$postsdata[13]}],
					[Date.UTC({$datestats[14]}),{$postsdata[14]}],
					[Date.UTC({$datestats[15]}),{$postsdata[15]}],
					[Date.UTC({$datestats[16]}),{$postsdata[16]}],
					[Date.UTC({$datestats[17]}),{$postsdata[17]}],
					[Date.UTC({$datestats[18]}),{$postsdata[18]}],
					[Date.UTC({$datestats[19]}),{$postsdata[19]}],
					[Date.UTC({$datestats[20]}),{$postsdata[20]}],
					[Date.UTC({$datestats[21]}),{$postsdata[21]}],
					[Date.UTC({$datestats[22]}),{$postsdata[22]}],
					[Date.UTC({$datestats[23]}),{$postsdata[23]}],
					[Date.UTC({$datestats[24]}),{$postsdata[24]}],
					[Date.UTC({$datestats[25]}),{$postsdata[25]}],
					[Date.UTC({$datestats[26]}),{$postsdata[26]}],
					[Date.UTC({$datestats[27]}),{$postsdata[27]}],
					[Date.UTC({$datestats[28]}),{$postsdata[28]}],
					[Date.UTC({$datestats[29]}),{$postsdata[29]}],
					[Date.UTC({$datestats[30]}),{$postsdata[30]}]],
			pointStart: Date.UTC({$datestats[1]})
    }, {
		color:'#c84040',
        name: 'Threads',
        data: [[Date.UTC({$datestats[1]}),{$threadsdata[1]}],
					[Date.UTC({$datestats[2]}),{$threadsdata[2]}],
					[Date.UTC({$datestats[3]}),{$threadsdata[3]}],
					[Date.UTC({$datestats[4]}),{$threadsdata[4]}],
					[Date.UTC({$datestats[5]}),{$threadsdata[5]}],
					[Date.UTC({$datestats[6]}),{$threadsdata[6]}],
					[Date.UTC({$datestats[7]}),{$threadsdata[7]}],
					[Date.UTC({$datestats[8]}),{$threadsdata[8]}],
					[Date.UTC({$datestats[9]}),{$threadsdata[9]}],
					[Date.UTC({$datestats[10]}),{$threadsdata[10]}],
					[Date.UTC({$datestats[11]}),{$threadsdata[11]}],
					[Date.UTC({$datestats[12]}),{$threadsdata[12]}],
					[Date.UTC({$datestats[13]}),{$threadsdata[13]}],
					[Date.UTC({$datestats[14]}),{$threadsdata[14]}],
					[Date.UTC({$datestats[15]}),{$threadsdata[15]}],
					[Date.UTC({$datestats[16]}),{$threadsdata[16]}],
					[Date.UTC({$datestats[17]}),{$threadsdata[17]}],
					[Date.UTC({$datestats[18]}),{$threadsdata[18]}],
					[Date.UTC({$datestats[19]}),{$threadsdata[19]}],
					[Date.UTC({$datestats[20]}),{$threadsdata[20]}],
					[Date.UTC({$datestats[21]}),{$threadsdata[21]}],
					[Date.UTC({$datestats[22]}),{$threadsdata[22]}],
					[Date.UTC({$datestats[23]}),{$threadsdata[23]}],
					[Date.UTC({$datestats[24]}),{$threadsdata[24]}],
					[Date.UTC({$datestats[25]}),{$threadsdata[25]}],
					[Date.UTC({$datestats[26]}),{$threadsdata[26]}],
					[Date.UTC({$datestats[27]}),{$threadsdata[27]}],
					[Date.UTC({$datestats[28]}),{$threadsdata[28]}],
					[Date.UTC({$datestats[29]}),{$threadsdata[29]}],
					[Date.UTC({$datestats[30]}),{$threadsdata[30]}]],
			pointStart: Date.UTC({$datestats[1]})
    }, {
		color:'#800080',
		name: 'Users',
        data: [[Date.UTC({$datestats[1]}),{$newusersdata[1]}],
					[Date.UTC({$datestats[2]}),{$newusersdata[2]}],
					[Date.UTC({$datestats[3]}),{$newusersdata[3]}],
					[Date.UTC({$datestats[4]}),{$newusersdata[4]}],
					[Date.UTC({$datestats[5]}),{$newusersdata[5]}],
					[Date.UTC({$datestats[6]}),{$newusersdata[6]}],
					[Date.UTC({$datestats[7]}),{$newusersdata[7]}],
					[Date.UTC({$datestats[8]}),{$newusersdata[8]}],
					[Date.UTC({$datestats[9]}),{$newusersdata[9]}],
					[Date.UTC({$datestats[10]}),{$newusersdata[10]}],
					[Date.UTC({$datestats[11]}),{$newusersdata[11]}],
					[Date.UTC({$datestats[12]}),{$newusersdata[12]}],
					[Date.UTC({$datestats[13]}),{$newusersdata[13]}],
					[Date.UTC({$datestats[14]}),{$newusersdata[14]}],
					[Date.UTC({$datestats[15]}),{$newusersdata[15]}],
					[Date.UTC({$datestats[16]}),{$newusersdata[16]}],
					[Date.UTC({$datestats[17]}),{$newusersdata[17]}],
					[Date.UTC({$datestats[18]}),{$newusersdata[18]}],
					[Date.UTC({$datestats[19]}),{$newusersdata[19]}],
					[Date.UTC({$datestats[20]}),{$newusersdata[20]}],
					[Date.UTC({$datestats[21]}),{$newusersdata[21]}],
					[Date.UTC({$datestats[22]}),{$newusersdata[22]}],
					[Date.UTC({$datestats[23]}),{$newusersdata[23]}],
					[Date.UTC({$datestats[24]}),{$newusersdata[24]}],
					[Date.UTC({$datestats[25]}),{$newusersdata[25]}],
					[Date.UTC({$datestats[26]}),{$newusersdata[26]}],
					[Date.UTC({$datestats[27]}),{$newusersdata[27]}],
					[Date.UTC({$datestats[28]}),{$newusersdata[28]}],
					[Date.UTC({$datestats[29]}),{$newusersdata[29]}],
					[Date.UTC({$datestats[30]}),{$newusersdata[30]}]],
			pointStart: Date.UTC({$date01})
    }, {
		color:'#FFD700',
		name: 'Active Users',
       data: [[Date.UTC({$datestats[1]}),{$activesdata[1]}],
					[Date.UTC({$datestats[2]}),{$activesdata[2]}],
					[Date.UTC({$datestats[3]}),{$activesdata[3]}],
					[Date.UTC({$datestats[4]}),{$activesdata[4]}],
					[Date.UTC({$datestats[5]}),{$activesdata[5]}],
					[Date.UTC({$datestats[6]}),{$activesdata[6]}],
					[Date.UTC({$datestats[7]}),{$activesdata[7]}],
					[Date.UTC({$datestats[8]}),{$activesdata[8]}],
					[Date.UTC({$datestats[9]}),{$activesdata[9]}],
					[Date.UTC({$datestats[10]}),{$activesdata[10]}],
					[Date.UTC({$datestats[11]}),{$activesdata[11]}],
					[Date.UTC({$datestats[12]}),{$activesdata[12]}],
					[Date.UTC({$datestats[13]}),{$activesdata[13]}],
					[Date.UTC({$datestats[14]}),{$activesdata[14]}],
					[Date.UTC({$datestats[15]}),{$activesdata[15]}],
					[Date.UTC({$datestats[16]}),{$activesdata[16]}],
					[Date.UTC({$datestats[17]}),{$activesdata[17]}],
					[Date.UTC({$datestats[18]}),{$activesdata[18]}],
					[Date.UTC({$datestats[19]}),{$activesdata[19]}],
					[Date.UTC({$datestats[20]}),{$activesdata[20]}],
					[Date.UTC({$datestats[21]}),{$activesdata[21]}],
					[Date.UTC({$datestats[22]}),{$activesdata[22]}],
					[Date.UTC({$datestats[23]}),{$activesdata[23]}],
					[Date.UTC({$datestats[24]}),{$activesdata[24]}],
					[Date.UTC({$datestats[25]}),{$activesdata[25]}],
					[Date.UTC({$datestats[26]}),{$activesdata[26]}],
					[Date.UTC({$datestats[27]}),{$activesdata[27]}],
					[Date.UTC({$datestats[28]}),{$activesdata[28]}],
					[Date.UTC({$datestats[29]}),{$activesdata[29]}],
					[Date.UTC({$datestats[30]}),{$activesdata[30]}]],
			pointStart: Date.UTC({$date01})
    }]
});
</script>
</td>
</tr>
</table>
<br>

CSS
Transparent background

Add this in global.css
.highcharts-background {
    fill: transparent!important;
}

Chart Styles


Credits

Highcharts®
Highcharts is a battle-tested SVG-based, multi-platform charting library that has been actively developed since 2009. It makes it easy to add interactive, mobile-optimized charts to your web and mobile projects. It features robust documentation, advanced responsiveness and industry-leading accessibility support.


RE: Stats Page Using Chart - Crazycat - 2020-01-19

Really nice, why don't you create a plugin ?


RE: Stats Page Using Chart - SvePu - 2020-01-19

It looks nice but it creates 120 extra db queries... maybe you have to optimize the php part.
You could use the default stats db table. Also look into "/admin/modules/tools/statistics.php" file.


RE: Stats Page Using Chart - Omar G. - 2020-03-10

I highly discourage using this as it currently stands. Especially the more users have access to the stats page.


RE: Stats Page Using Chart - sarvin - 2020-03-11

very nice. thanks for sharing Wink


RE: Stats Page Using Chart - Crazycat - 2020-03-11

(2020-01-19, 09:25 AM)SvePu Wrote: It looks nice but it creates 120 extra db queries... maybe you have to optimize the php part.
You could use the default stats db table. Also look into "/admin/modules/tools/statistics.php" file.
(2020-03-10, 03:09 PM)Omar G. Wrote: I highly discourage using this as it currently stands. Especially the more users have access to the stats page.
Sure, number of queries could be divided by 30 using group by and FROM_UNIXTIME()


RE: Stats Page Using Chart - Whiteneo - 2020-03-11

I have something similar writen for DNT Advanced Stats but i have writen it many time ago and works fine Smile i have it already into my forums and it's highly optimized, but i think it can be optimized by cache, but right now it have not too much trafic so, i think it's fine Smile

https://soportemybb.es/statistics.php

You can see the statistics page in there and the plugin itself into index page Smile


RE: Stats Page Using Chart - Eldenroot - 2020-03-11

This needs to be optimised! Anyway good job and idea! I am looking for the version v2 Smile


RE: Stats Page Using Chart - WallBB - 2020-06-23

(2020-03-11, 09:37 PM)Eldenroot Wrote: This needs to be optimised! Anyway good job and idea! I am looking for the version v2 Smile

Exactly my thoughts Smile

Good work again YASAKA


RE: Stats Page Using Chart - Darkrad - 2020-10-11

Any improvements on this tutorial? I love the idea but I am scared after reading the comments.