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


Messages In This Thread
Stats Page Using Chart - by YASAKA - 2020-01-19, 03:18 AM
RE: Stats Page Using Chart - by Crazycat - 2020-01-19, 08:53 AM
RE: Stats Page Using Chart - by SvePu - 2020-01-19, 09:25 AM
RE: Stats Page Using Chart - by Omar G. - 2020-03-10, 03:09 PM
RE: Stats Page Using Chart - by Crazycat - 2020-03-11, 04:00 PM
RE: Stats Page Using Chart - by sarvin - 2020-03-11, 08:52 AM
RE: Stats Page Using Chart - by Whiteneo - 2020-03-11, 06:23 PM
RE: Stats Page Using Chart - by Eldenroot - 2020-03-11, 09:37 PM
RE: Stats Page Using Chart - by WallBB - 2020-06-23, 06:29 AM
RE: Stats Page Using Chart - by Darkrad - 2020-10-11, 04:11 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)