Add charts on user page.

templates/base.html

@@ -8,7 +8,9 @@
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin="anonymous">
-
+        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    
     <link rel="stylesheet" type="text/css" href="../static/css/style.css">
     <title>libOpenAnal appliance</title>
     {% endblock %}
@@ -24,7 +26,8 @@
         crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin="anonymous"></script>
-    {% endblock %}
+        {% endblock %}
+ultradesu 2018
 </body>
 
 </html>

templates/user.html

@@ -113,5 +113,53 @@
                 </table>
         </div>
     </div>
+
 </div>
-{% endblock %}
+<div class="card text-center">
+    <div class="card-body">
+        <h5 class="card-title">Charts</h5>
+        <div id="words_chart">
+        </div>
+        <div id="messages_chart">
+        </div>
+        <script>
+            var user_id = {{ user_info.id }};
+            var plot_data = [];
+            $.ajax({
+                type: 'GET',
+                url: '/data',
+                data: { action: 'user_word_count', user: user_id },
+                dataType: 'json',
+                success: function (data) {
+                    plot_data[0] = data[0];
+                    write_plot()
+                }
+            });
+            $.ajax({
+                type: 'GET',
+                url: '/data',
+                data: { action: 'user_message_count', user: user_id },
+                dataType: 'json',
+                success: function (data) {
+                    plot_data[1] = data[0];
+                    write_plot()
+                }
+            });
+            function write_plot() {
+                var layout = {
+                    title: 'Words per day',
+                    showlegend: false,
+                    //autosize: false,
+                    //width: 500,
+                    //height: 500,
+                    margin: {
+                        t: 30,
+                        pad: 20
+                    },
+                };
+                Plotly.newPlot('words_chart', plot_data, layout, { displayModeBar: false });
+            }
+        </script>
+    </div>
+</div>
+{% endblock %}