diff --git a/notemyprogress/amd/build/metareflexion.js b/notemyprogress/amd/build/metareflexion.js
index e5bbeb5e395b966f0baafd890a3acd27309a6369..d8502a8a0d1bbb057a3693726b2039c6340ac298 100644
--- a/notemyprogress/amd/build/metareflexion.js
+++ b/notemyprogress/amd/build/metareflexion.js
@@ -154,6 +154,10 @@ define([
             this.paginator_week = page;
           }
         });
+        setTimeout(function () {
+          vue.setGraphicsEventListeners();
+        }, 500);
+        vue.setGraphicsEventListeners();
         // if (typeof this.past_week.id != "undefined") {
         //   this.disabled_form = true;
         // }
@@ -554,7 +558,7 @@ define([
           data.labels = [inverted, planified];
           var dataset = new Object();
           dataset.label = "Horas";
-          
+
           dataset.data = [
             parseFloat(this.data_report_meta_hours.hours_worked),
             parseInt(this.data_report_meta_hours.hours_planned),
@@ -617,8 +621,7 @@ define([
             action: "updatemetareflexion",
             metareflexionid: course_module.weekly_schedules_id,
             // days: days_committed,
-            hours:
-              this.current_week[0].weekly_schedules_hours.hours_planned,
+            hours: this.current_week[0].weekly_schedules_hours.hours_planned,
             goals: this.current_week[0].weekly_schedules_goals,
             days: JSON.stringify(
               this.current_week[0].weekly_schedules_days.dias_planificados
@@ -653,8 +656,7 @@ define([
             courseid: this.courseid,
             weekcode: course_module.weekcode,
 
-            hours:
-              this.current_week[0].weekly_schedules_hours.hours_planned,
+            hours: this.current_week[0].weekly_schedules_hours.hours_planned,
             goals: this.current_week[0].weekly_schedules_goals,
             days: JSON.stringify(
               this.current_week[0].weekly_schedules_days.dias_planificados
@@ -890,6 +892,62 @@ define([
           this.get_interactions(week);
           this.get_interacions_last_week(week);
         },
+        setGraphicsEventListeners() {
+          let graphics = document.querySelectorAll(".highcharts-container");
+          if (graphics.length < 1) {
+            setTimeout(vue.setGraphicsEventListeners, 500);
+          } else {
+            graphics[0].id = "EfficiencyChart";
+            graphics.forEach((graph) => {
+              graph.addEventListener("mouseenter", vue.addLogsViewGraphic);
+            });
+          }
+        },
+        addLogsViewGraphic(e) {
+          event.stopPropagation();
+          var action = "";
+          var objectName = "";
+          var objectType = "";
+          var objectDescription = "";
+          switch (e.target.id) {
+            case "EfficiencyChart":
+              action = "viewed";
+              objectName = "reflection_chart";
+              objectType = "chart";
+              objectDescription = "A bar chart";
+              break;
+            default:
+              action = "viewed";
+              objectName = "";
+              objectType = "chart";
+              objectDescription = "A chart";
+              break;
+          }
+          vue.addLogsIntoDB(action, objectName, objectType, objectDescription);
+        },
+        addLogsIntoDB(action, objectName, objectType, objectDescription) {
+          let data = {
+            courseid: content.courseid,
+            userid: content.userid,
+            action: "addLogs",
+            sectionname: "META_REFLECTION",
+            actiontype: action,
+            objectType: objectType,
+            objectName: objectName,
+            currentUrl: document.location.href,
+            objectDescription: objectDescription,
+          };
+          Axios({
+            method: "get",
+            url: M.cfg.wwwroot + "/local/notemyprogress/ajax.php",
+            params: data,
+          })
+            .then((response) => {
+              if (response.status == 200 && response.data.ok) {
+              }
+            })
+            .catch((e) => {});
+        },
       },
     });
   }
diff --git a/notemyprogress/amd/build/student_gamification.js b/notemyprogress/amd/build/student_gamification.js
index d7fb47847300386cc9b36ae99c5382f37b04e6d9..2c4c8bf0051a4c697d0b36a28e9ccd352c3d9af9 100644
--- a/notemyprogress/amd/build/student_gamification.js
+++ b/notemyprogress/amd/build/student_gamification.js
@@ -4,13 +4,15 @@ define([
   "local_notemyprogress/axios",
   "local_notemyprogress/alertify",
   "local_notemyprogress/pageheader",
-], function (Vue, Vuetify, Axios, Alertify, PageHeader) {
+  "local_notemyprogress/chartdynamic",
+], function (Vue, Vuetify, Axios, Alertify, PageHeader, ChartDynamic) {
   "use strict";
 
   function init(content) {
     // console.log(content);
     Vue.use(Vuetify);
     Vue.component("pageheader", PageHeader);
+    Vue.component("chart", ChartDynamic);
     const app = new Vue({
       delimiters: ["[[", "]]"],
       el: "#student_gamification",
@@ -126,6 +128,115 @@ define([
             })
             .catch((e) => {});
         },
+        chart_spread() {
+          let chart = new Object();
+          chart.chart = {
+            type: "column",
+            backgroundColor: null,
+          };
+          chart.title = {
+            text: this.strings.chartTitle,
+          };
+          chart.colors = ["#118AB2"];
+          (chart.xAxis = {
+            type: "category",
+            labels: {
+              rotation: -45,
+              style: {
+                fontSize: "13px",
+                fontFamily: "Verdana, sans-serif",
+              },
+            },
+          }),
+            (chart.yAxis = {
+              min: 0,
+              title: {
+                text: this.strings.chartYaxis,
+              },
+            });
+          chart.legend = {
+            enabled: false,
+          };
+          (chart.series = [
+            {
+              name: null,
+              data: this.strings.chart_data, //[["level : 1", 1]],
+              dataLabels: {
+                enabled: true,
+                rotation: -90,
+                color: "#FFFFFF",
+                align: "right",
+                format: "{point.y:.1f}", // one decimal
+                y: 10, // 10 pixels down from the top
+                style: {
+                  fontSize: "13px",
+                  fontFamily: "Verdana, sans-serif",
+                },
+              },
+            },
+          ]),
+            console.log("series: ");
+          console.log(this.chart_data);
+          return chart;
+        },
+        setGraphicsEventListeners() {
+          console.log("Listeners set");
+          let graphics = document.querySelectorAll(".highcharts-container");
+          if (graphics.length < 1) {
+            setTimeout(app.setGraphicsEventListeners, 500);
+          } else {
+            graphics[0].id = "SpreadChart";
+            graphics.forEach((graph) => {
+              graph.addEventListener("mouseenter", app.addLogsViewGraphic);
+            });
+          }
+        },
+        addLogsViewGraphic(e) {
+          event.stopPropagation();
+          var action = "";
+          var objectName = "";
+          var objectType = "";
+          var objectDescription = "";
+          switch (e.target.id) {
+            case "SpreadChart":
+              action = "viewed";
+              objectName = "spreading_chart";
+              objectType = "chart";
+              objectDescription =
+                "Bar chart that shows the level repartition in gamification";
+              break;
+            default:
+              action = "viewed";
+              objectName = "";
+              objectType = "chart";
+              objectDescription = "A chart";
+              break;
+          }
+          app.addLogsIntoDB(action, objectName, objectType, objectDescription);
+        },
+        addLogsIntoDB(action, objectName, objectType, objectDescription) {
+          let data = {
+            courseid: content.courseid,
+            userid: content.userid,
+            action: "addLogs",
+            sectionname: "STUDENTS_GAMIFICATION",
+            actiontype: action,
+            objectType: objectType,
+            objectName: objectName,
+            currentUrl: document.location.href,
+            objectDescription: objectDescription,
+          };
+          Axios({
+            method: "get",
+            url: M.cfg.wwwroot + "/local/notemyprogress/ajax.php",
+            params: data,
+          })
+            .then((response) => {
+              if (response.status == 200 && response.data.ok) {
+              }
+            })
+            .catch((e) => {});
+        },
       },
     });
   }
diff --git a/notemyprogress/classes/configgamification.php b/notemyprogress/classes/configgamification.php
index 3fb9d502f2dcd001c6e220e6eddce06380f743c5..2957ad39714bc8b1cd6134c09310ddedd84953a9 100644
--- a/notemyprogress/classes/configgamification.php
+++ b/notemyprogress/classes/configgamification.php
@@ -157,11 +157,6 @@ class configgamification {
         $param->userid = $this->user->id;
         if ($enable){ $param->enablegamification =1;}else{ $param->enablegamification =0;}
         $param->timecreated = self::now_timestamp();
-        //if ($timecreated == null){$result = 1;}
-        //if ($timecreated === null){$result = 2;}
-        //if ($timecreated == 'null'){$result = 3;}
-        //if ($timecreated->maximum == null){$result = 9;}
-        //if ($timecreated->maximum === null){$result = 10;}
         $DB->insert_record("notemyprogress_gamification", $param,true);
     }
     /**
diff --git a/notemyprogress/lang/en/local_notemyprogress.php b/notemyprogress/lang/en/local_notemyprogress.php
index 9180c8f4db7091658fb591f991985697d3b6d99e..46e9955c58596acd9efb5a600b4b23f0fbfd0e12 100644
--- a/notemyprogress/lang/en/local_notemyprogress.php
+++ b/notemyprogress/lang/en/local_notemyprogress.php
@@ -1099,6 +1099,8 @@ $string['group_allstudent'] = "All students";
 $string['nmp_use_navbar_menu'] = 'Activate new menu';
 $string['nmp_use_navbar_menu_desc'] = 'Display the plugin menu in the top navigation bar, otherwise it will include the menu in the navigation block.';
 /* Gamification */
+$string['tg_tab1']="Chart";
+$string['tg_tab2']="Ranking";
 $string['EnableGame']="Disable/Enable :";
 $string['studentRanking1']="Do you want to appear in the Ranking Board ?";
 $string['studentRanking2']=" /!\ All the registered in this course having accepted you will see. Accepting is final:";
diff --git a/notemyprogress/lang/es/local_notemyprogress.php b/notemyprogress/lang/es/local_notemyprogress.php
index 5157e0d089db112fb5b66a6fc51c95f4d7a46bb4..94e166b7b7211d3f28ba169c142d1cd6479ef0ed 100644
--- a/notemyprogress/lang/es/local_notemyprogress.php
+++ b/notemyprogress/lang/es/local_notemyprogress.php
@@ -1099,6 +1099,8 @@ $string['group_allstudent'] = 'Todos los estudiantes';
 $string['nmp_use_navbar_menu'] = 'Habilitar nuevo menú';
 $string['nmp_use_navbar_menu_desc'] = 'Despliega el menú del plugin en la barra de navegación superior, del contrario incluirá el menú en el bloque de navegación.';
 /* Gamification */
+$string['tg_tab1']="Cuadro";
+$string['tg_tab2']="Clasificación";
 $string['EnableGame']="Desactivar/Activar :";
 $string['studentRanking1']="¿Quieres aparecer en el ranking ? ";
 $string['studentRanking2']="/!\ Te verán todos los inscritos en este curso que hayan aceptado. Aceptar es definitivo: ";
diff --git a/notemyprogress/lang/fr/local_notemyprogress.php b/notemyprogress/lang/fr/local_notemyprogress.php
index 25080a1748217fc3e94731b842c08476837356c0..d92153eb5d091a8bd395582455874723722163ce 100644
--- a/notemyprogress/lang/fr/local_notemyprogress.php
+++ b/notemyprogress/lang/fr/local_notemyprogress.php
@@ -1101,6 +1101,8 @@ $string['nmp_use_navbar_menu'] = 'Activer le nouveau menu';
 $string['nmp_use_navbar_menu_desc'] = 'Afficher le menu du plugin dans la barre de navigation supérieure, sinon il inclura le menu dans le bloc de navigation.';
 
 /* Gamification */
+$string['tg_tab1']="Répartition";
+$string['tg_tab2']="Classement";
 $string['EnableGame']="Désactiver/Activer :";
 $string['studentRanking1']="Voulez vous apparaitre dans le ranking board ? ";
 $string['studentRanking2']= "/!\ Tout les inscrits à ce cours ayant accepté vous verrons. Accepter est définitif:";
diff --git a/notemyprogress/student_gamification.php b/notemyprogress/student_gamification.php
index cbdf5159391176d6d031400911396b7187b5b6d1..14542d24578daf44f2ab0e7fd27a1d280b0b6fdd 100644
--- a/notemyprogress/student_gamification.php
+++ b/notemyprogress/student_gamification.php
@@ -76,11 +76,17 @@ $content = [
         'studentRanking2'=>get_string("studentRanking2","local_notemyprogress"),
         'studentRanking3'=>get_string("studentRanking3","local_notemyprogress"),
         'overview'=>get_string("overview","local_notemyprogress"),
+        'chartTitle'=>get_string("gm_Chart_Title","local_notemyprogress"),
+        'chartYaxis'=>get_string("gm_Chart_Y","local_notemyprogress"),
+        'chart_data' => $configgamification->get_spread_chart($courseid),
+        'tg_tab1'=> get_string("tg_tab1","local_notemyprogress"),
+        'tg_tab2' =>get_string("tg_tab2","local_notemyprogress")
     ],
     'levels_data' => $configgamification->get_levels_data(),
     'indicators' => $es->get_user_info(),
     'ranking' => $es->get_ranking(1),
     
+    
 ];
 
 $templatecontext = [
diff --git a/notemyprogress/templates/gamification.mustache b/notemyprogress/templates/gamification.mustache
index da85c84fce866f04f705a2d0b10c88f44435ba57..799c17357f7338031fcdd7d678b570c7f28ee9bc 100644
--- a/notemyprogress/templates/gamification.mustache
+++ b/notemyprogress/templates/gamification.mustache
@@ -248,6 +248,7 @@
                                     :chart="chart_spread()"
                                     :lang="strings.chart"
                                 ></chart>
+                            </v-card>
                             </v-row>
                         </v-col>
                      </v-row>
diff --git a/notemyprogress/templates/student_gamification.mustache b/notemyprogress/templates/student_gamification.mustache
index e464216de1cc646ed7a5d23197bbb90db37e66a2..a7a052019e528d569a361afe606c3fdebbeea2d9 100644
--- a/notemyprogress/templates/student_gamification.mustache
+++ b/notemyprogress/templates/student_gamification.mustache
@@ -82,6 +82,23 @@
                         </v-col>                                    
                     </v-col>
                     <v-col cols=12 lg="6">
+                    <v-tabs v-model="tab" background-color="transparent">
+                        <v-tab v-text="strings.tg_tab1"></v-tab>
+                        <v-tab v-text="strings.tg_tab2"></v-tab>
+                    </v-tabs>
+                        <v-tabs-items v-model="tab">
+                        <v-tab-item>
+                            <v-row class =" justify-center">
+                                <v-card elevation = 2 id="SpreadChart">
+                                    <chart
+                                        :container="'week_resourcess'"
+                                        :chart="chart_spread()"
+                                        :lang="strings.chart"
+                                    ></chart>
+                                </v-card>
+                            </v-row>
+                        </v-tab-item>
+                        <v-tab-item> <!-- Level and settings  -->
                         <v-row v-if="strings.rankable"class="py-5 px-8">
                             <v-col cols="12" md="12">
                                 <v-data-table
@@ -152,6 +169,7 @@
                               </v-card-actions>
                             </v-card>
                         </v-row>
+                    </v-tab-item>
                     </v-col>
                 </v-row>
             </v-card>