MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > Stats Page Using Chart
Full Version: Stats Page Using Chart
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

YASAKA

2020-01-19, 03:18 AM
[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.

Crazycat

2020-01-19, 08:53 AM
Really nice, why don't you create a plugin ?

SvePu

2020-01-19, 09:25 AM
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.

Omar G.

2020-03-10, 03:09 PM
I highly discourage using this as it currently stands. Especially the more users have access to the stats page.

sarvin

2020-03-11, 08:52 AM
very nice. thanks for sharing Wink

Crazycat

2020-03-11, 04:00 PM
(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()

Whiteneo

2020-03-11, 06:23 PM
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

Eldenroot

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

WallBB

2020-06-23, 06:29 AM
(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

Darkrad

2020-10-11, 04:11 PM
Any improvements on this tutorial? I love the idea but I am scared after reading the comments.
MyBB Community Forums > Resources > Tutorials > Stats Page Using Chart