Monthly visits graph.

sql/02_DATA.SQL

@@ -14,10 +14,10 @@ INSERT INTO text VALUES ('MONTH_03', 'es', 'DATE', 'marzo', null);
 INSERT INTO text VALUES ('MONTH_03', 'en', 'DATE', 'March', null);
 INSERT INTO text VALUES ('MONTH_03', 'eu', 'DATE', 'martxoa', null);
 INSERT INTO text VALUES ('MONTH_04', 'es', 'DATE', 'abril', null);
-INSERT INTO text VALUES ('MONTH_04', 'ee', 'DATE', 'April', null);
+INSERT INTO text VALUES ('MONTH_04', 'en', 'DATE', 'April', null);
 INSERT INTO text VALUES ('MONTH_04', 'eu', 'DATE', 'apirila', null);
 INSERT INTO text VALUES ('MONTH_05', 'es', 'DATE', 'mayo', null);
-INSERT INTO text VALUES ('MONTH_05', 'ee', 'DATE', 'May', null);
+INSERT INTO text VALUES ('MONTH_05', 'en', 'DATE', 'May', null);
 INSERT INTO text VALUES ('MONTH_05', 'eu', 'DATE', 'maiatza', null);
 INSERT INTO text VALUES ('MONTH_06', 'es', 'DATE', 'junio', null);
 INSERT INTO text VALUES ('MONTH_06', 'en', 'DATE', 'June', null);
@@ -35,7 +35,7 @@ INSERT INTO text VALUES ('MONTH_10', 'es', 'DATE', 'octubre', null);
 INSERT INTO text VALUES ('MONTH_10', 'en', 'DATE', 'October', null);
 INSERT INTO text VALUES ('MONTH_10', 'eu', 'DATE', 'urria', null);
 INSERT INTO text VALUES ('MONTH_11', 'es', 'DATE', 'noviembre', null);
-INSERT INTO text VALUES ('MONTH_11', 'en', 'DATE', 'november', null);
+INSERT INTO text VALUES ('MONTH_11', 'en', 'DATE', 'November', null);
 INSERT INTO text VALUES ('MONTH_11', 'eu', 'DATE', 'azaroa', null);
 INSERT INTO text VALUES ('MONTH_12', 'es', 'DATE', 'diciembre', null);
 INSERT INTO text VALUES ('MONTH_12', 'en', 'DATE', 'December', null);

www-admin/script/stats.js

@@ -0,0 +1,76 @@
+function BarGraph(context) {
+
+    var graph = this;
+    this.values = [];
+    this.labels = [];
+
+    this.setLabels = function(labels){
+        this.labels = labels;
+    }
+
+    this.setValues = function(values){
+        this.values = values;
+    }
+
+    this.draw = function () {
+
+        var values = graph.values;
+        var barW;
+        var barH;
+        var barB = 1; // Border
+        var ratio;
+        var maxH;
+        var max;
+        var i;
+
+        // Canvas dimensions
+        context.canvas.width = graph.width;
+        context.canvas.height = graph.height;
+
+        // Width of each bar
+        barW = graph.width / values.length - graph.margin * 2;
+        maxH = graph.height - 25;
+
+        // Reference height
+        var max = 0;
+        for (i = 0; i < values.length; i ++) {
+            if (values[i] > max) {
+                max = values[i];	
+            }
+        }
+
+        // Loop bars
+        for (i = 0; i < values.length; i ++) {
+
+            // Compare with the max value
+            barH = maxH * values[i] / max;
+            graph.height -= 15;
+
+            // Value
+            context.fillStyle = "#003300";
+            context.font = "bold 12px sans-serif";
+            context.textAlign = "center";
+            context.fillText(parseInt(values[i], 10), i * graph.width / values.length + (graph.width / values.length) / 2, graph.height - barH - 3);
+
+            // Bar background (border)
+            context.fillStyle = "#003300";
+            context.fillRect(graph.margin + i * graph.width / values.length, graph.height - barH, barW, barH);
+
+            // Bar fill
+            context.fillStyle = "#ccffcc";
+            context.fillRect(graph.margin + i * graph.width / values.length + barB, graph.height - barH + barB, barW - barB * 2, barH - barB * 2);
+
+            // Label
+            graph.height += 15;
+            context.fillStyle = "#003300";
+            context.font = "10px sans-serif";
+            context.textAlign = "center";
+            context.fillText(graph.labels[i], i * graph.width / values.length + (graph.width / values.length) / 2, graph.height - 5);
+        }
+    };
+
+  this.width = 450;
+  this.height = 150;
+  this.margin = 1;
+  
+}

www-admin/stats/index.php

@@ -0,0 +1,98 @@
+<?php
+    session_start();
+    $http_host = $_SERVER["HTTP_HOST"];
+    $doc_root = $_SERVER["DOCUMENT_ROOT"] . "/";
+    include $doc_root . "functions.php";
+    $proto = get_protocol();
+    $lang = "en";
+    $con = start_db();
+    $server = $proto . $http_host;
+    $pserver = $proto . substr($http_host, 0, strpos($http_host, ':')); // public server
+    if (!check_session($con)){
+        http_response_code(401);
+        header("Location: /authentication.php");
+    }
+    else{
+?>
+<html>
+    <head>
+        <meta content='text/html; charset=windows-1252' http-equiv='content-type'/>
+        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'>
+        <link rel='shortcut icon' href='<?=$pserver?>/img/logo/x2/favicon.ico'/>
+        <title><?=$title?>Stats - I&ntilde;igo Valentin - Administration Panel</title>
+        <style>
+<?php
+            include $doc_root . "css/ui.css";
+            include $doc_root . "css/stats.css";
+?>
+        </style>
+        <!-- CSS for mobile version -->
+        <style media='(max-width : 990px)'>
+<?php
+            include $doc_root . "css/m/ui.css";
+            include $doc_root . "css/m/stats.css";
+?>
+        </style>
+        <!-- Script files -->
+        <script type='text/javascript'>
+<?php
+            include $doc_root . "script/ui.js";
+            include $doc_root . "script/stats.js";
+?>
+        </script>
+    </head>
+    <body>
+        <div id='content'>
+            <div class='section' id='post_edit'>
+                <h3 class='section_title'>Visits</h3>
+                <div class='entry'>
+                    <div id='visitCanvas'></div>
+                    <script>
+                        (function () {
+                            function createCanvas() {
+                                var parent = document.getElementById("visitCanvas");
+                                var canvas = document.createElement("canvas");
+                                parent.appendChild(canvas);
+                                return canvas.getContext("2d");
+                            }
+                            var context = createCanvas();
+                            var graph = new BarGraph(context);
+                            graph.width = 450;
+                            graph.height = 150;;
+<?php
+                            $q_month = mysqli_query($con, "SELECT month(dtime) AS month, count(id) AS total FROM stat_visit GROUP BY year(dtime), month(dtime) ORDER BY dtime DESC LIMIT 12;");
+                            $name_string = "";
+                            $valu_string = "";
+                            $month = date('m');
+
+                            // Show at least the last twelve months, even if there is no data that old.
+                            for ($i = 0; $i < 12 - mysqli_num_rows($q_month); $i ++){
+                                $month_number = intval($month) - (12 - $i) + 1;
+                                if ($month_number <= 0){
+                                    $month_number = $month_number + 12;
+                                }
+                                $name_string = $name_string . "\"" . ucfirst(substr(text($con, "MONTH_" . str_pad($month_number, 2, "0", STR_PAD_LEFT), $lang), 0, 3)) . "\", ";     //"\"" . text($con, "MONTH_" . $r_month["month"], $lang) . "\", ";
+                                $valu_string = $valu_string . "0, ";
+                            }
+
+                            // Loop data
+                            while ($r_month = mysqli_fetch_array($q_month)){
+                                $name_string = $name_string . "\"" . ucfirst(substr(text($con, "MONTH_" . $r_month["month"], $lang), 0, 3)) . "\", ";
+                                $valu_string = $valu_string . $r_month["total"] . ", ";
+                            }
+                            $name_string = substr(trim($name_string), 0, -1);
+                            $valu_string = substr(trim($valu_string), 0, -1);
+?>
+                            graph.setLabels([<?=$name_string?>]);
+                            graph.setValues([<?=$valu_string?>]);
+                            graph.draw();
+
+                        }());
+                    </script>
+                </div>
+            </div>
+        </div>
+    </div>
+<?php
+    }
+?>