Thread Rating:
  • 1 Vote(s) - 4 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Stats Page Using Chart
#1
[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.
Discord
YASAKA#1898
Reply
#2
Really nice, why don't you create a plugin ?
[MyBB 1.8 mods] - Offer me a coffee
Do not ask me help through PM
Reply
#3
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.
Reply
#4
I highly discourage using this as it currently stands. Especially the more users have access to the stats page.
Reply
#5
very nice. thanks for sharing Wink
Want to Support Me? +Rep Me
Reply
#6
(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()
[MyBB 1.8 mods] - Offer me a coffee
Do not ask me help through PM
Reply
#7
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
The only infinite thing is the universe and human stupidity, but the universe is not for sure

Plugins 1.6.x

Plugins 1.8.x

Reply
#8
This needs to be optimised! Anyway good job and idea! I am looking for the version v2 Smile
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#9
(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
Reply
#10
I like your idea, but I also agree it needs to be optimized. I would like to suggest you try this tool https://sitechecker.pro/page-counter/ to get more information about your project, it will show you what you can fix to make your site`s performance better. This page counter tool and website check is for free. I would like to ask you some questions about the plugin, can I?
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)