Basic Charts

Author: kimbtech

.gitignore

@@ -1,3 +1,4 @@
 /data/*.json
 /data/*/*/*.json
-*.json.lock
+*.json.lock
+.DS_Store

php/core/templates/stats_en.html

@@ -60,11 +60,12 @@ <h3>Tables</h3>
 
 <h3>Graph</h3>
 <select id="graphselect">
-	
 </select>
 <button id="displaygraph">Display Graph</button>
 
-<div id="maingraph"></div>
+<div style="width: 99%;">
+	<canvas id="maingraph"></canvas>
+</div>
 <script>
 	var combiData = %%COMBIDATA%%;
 	var graphes = %%GRAPHES%%;
@@ -74,12 +75,19 @@ <h3>Graph</h3>
 	graphes.forEach( (g) => {
 		$("select#graphselect").append('<option value="'+g+'">'+g+'</option>');
 	});
+	var chart = null;
 
 	$("button#displaygraph").click( () => {
 		var url = loadUrl + $("select#graphselect").val()  + '.js';
 		$.getScript( url, () => {
 			if( typeof createGraph === "function" && combiData.length > 0 ){
-				createGraph(combiData, "div#maingraph");
+				if(chart !== null){
+					chart.destroy();
+				}
+				chart = createGraph(
+					combiData,
+					document.getElementById('maingraph').getContext('2d')
+				);
 			}
 		});
 	});

php/load/graphs/PieCategory.js

@@ -0,0 +1,38 @@
+function createGraph(data, canvas){
+	/**
+	 * The DOM has jQuery as $ and the ChartJS library.
+	 * The data can be found in data and canvas is the canvas for the chart.
+	 * The function should return the ChartJS object.
+	 */
+
+	var plotdata = {}
+	data.forEach( (v) => {
+		if( !plotdata.hasOwnProperty(v.category)){
+			plotdata[v.category] = 0
+		}
+		plotdata[v.category] += v.duration;
+	});
+
+	/**
+	 * Colors from
+	 * 	chartjs-plugin-colorschemes MIT License
+	 * 	Copyright (c) 2019 Akihiko Kusanagi
+	 * 	https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/src/colorschemes/colorschemes.tableau.js
+	 */
+	const colors = ['#4E79A7', '#A0CBE8', '#F28E2B', '#FFBE7D', '#59A14F', '#8CD17D', '#B6992D', '#F1CE63', '#499894', '#86BCB6', '#E15759', '#FF9D9A', '#79706E', '#BAB0AC', '#D37295', '#FABFD2', '#B07AA1', '#D4A6C8', '#9D7660', '#D7B5A6']; //['#9999ff', '#993366', '#ffffcc', '#ccffff', '#660066', '#ff8080', '#0066cc', '#ccccff', '#000080', '#ff00ff', '#ffff00', '#0000ff', '#800080', '#800000', '#008080', '#0000ff'];
+
+	var config = {
+		type: 'pie',
+		data: {
+			datasets: [{
+				data: Object.values(plotdata),
+				backgroundColor: colors
+			}],
+			labels: Object.keys(plotdata)
+		},
+		options: {
+			responsive: true
+		}
+	};
+	return new Chart(canvas, config);
+}

php/load/graphs/PieTask.js

@@ -0,0 +1,38 @@
+function createGraph(data, canvas){
+	/**
+	 * The DOM has jQuery as $ and the ChartJS library.
+	 * The data can be found in data and canvas is the canvas for the chart.
+	 * The function should return the ChartJS object.
+	 */
+
+	var plotdata = {}
+	data.forEach( (v) => {
+		if( !plotdata.hasOwnProperty(v.name)){
+			plotdata[v.name] = 0
+		}
+		plotdata[v.name] += v.duration;
+	});
+
+	/**
+	 * Colors from
+	 * 	chartjs-plugin-colorschemes MIT License
+	 * 	Copyright (c) 2019 Akihiko Kusanagi
+	 * 	https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/src/colorschemes/colorschemes.tableau.js
+	 */
+	const colors = ['#4E79A7', '#A0CBE8', '#F28E2B', '#FFBE7D', '#59A14F', '#8CD17D', '#B6992D', '#F1CE63', '#499894', '#86BCB6', '#E15759', '#FF9D9A', '#79706E', '#BAB0AC', '#D37295', '#FABFD2', '#B07AA1', '#D4A6C8', '#9D7660', '#D7B5A6']; //['#9999ff', '#993366', '#ffffcc', '#ccffff', '#660066', '#ff8080', '#0066cc', '#ccccff', '#000080', '#ff00ff', '#ffff00', '#0000ff', '#800080', '#800000', '#008080', '#0000ff'];
+
+	var config = {
+		type: 'pie',
+		data: {
+			datasets: [{
+				data: Object.values(plotdata),
+				backgroundColor: colors
+			}],
+			labels: Object.keys(plotdata)
+		},
+		options: {
+			responsive: true
+		}
+	};
+	return new Chart(canvas, config);
+}

php/load/graphs/simple.js

@@ -25,7 +25,8 @@ input[type=text]{
 div#main{
 	border: 1px solid black;
 	margin:auto;
-	max-width: 800px;
+	min-width: 400px;
+	max-width: 1600px;
 	background-color: white;
 	padding: 5px;
 	border-radius: 4px;