MediaWiki:TemplatePageviews.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

var TemplatePageviews = {

	init: function () {
		$( '.template-pageviews' ).each( TemplatePageviews.makeChart );
	},

	makeChart: function () {
		var $div = $( this );

		var $canvas = $( '<canvas width="1000" height="200"></canvas>' );
		$div.html( $canvas );

		var page = $( this ).data( 'page' );
		var days = $( this ).data( 'days' );
		var frequency = $( this ).data( 'frequency' );
		var params = { page: page, days: days, frequency: frequency };
		new mw.Rest().get( '/analytics/views', params ).done( function ( data ) {
			var canvas = $canvas[0];
			new Chart( canvas, {
				type: 'line',
				data: {
					labels: Object.keys( data ),
					datasets: [ {
						data: Object.values( data ),
						borderWidth: 1
					} ]
				},
				options: {
					responsive: false,
					maintainAspectRatio: false,
					plugins: {
						legend: {
							display: false
						}
					},
					scales: {
						y: {
							beginAtZero: true
						}
					}
				}
			} );
		} );
	}
};

// Load Chart.js first
var script = document.createElement( 'script' );
script.onload = TemplatePageviews.init;
script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
document.head.appendChild( script );