Merge branch 'feature/pie_chart' into develop adding the last graph, …

…a new shiny doughnut chart.
vitorfs · Aug 6, 2017 · dfd6f4b · dfd6f4b
2 parents 046ee63 + 6c57cc6
commit dfd6f4b
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 85 deletions.
diff --git a/bootcamp/core/templates/core/profile.html b/bootcamp/core/templates/core/profile.html
@@ -71,6 +71,7 @@ <h1>{{ page_user.profile.get_screen_name }} {% if page_user.get_full_name %}<sma
             <li class="active"><a  href="#1b" data-toggle="tab">{% trans 'Last Feeds' %}</a></li>
             <li><a href="#2b" data-toggle="tab">Activity by type</a></li>
             <li><a href="#3b" data-toggle="tab">Activity by day</a></li>
+            <li><a href="#4b" data-toggle="tab">Activity by Total</a></li>
           </ul>
           <div class="tab-content">
             <div class="tab-pane active" id="1b">
@@ -92,6 +93,12 @@ <h1>{{ page_user.profile.get_screen_name }} {% if page_user.get_full_name %}<sma
               <div class="load"><img src="{% static 'img/loading.gif' %}"></div>
               <!--Line graph-->
             </div>
+            <div class="tab-pane" id="4b">
+              <!--Doughnut graph-->
+              <canvas id="doughnut_chart" width="400" height="160"></canvas>
+              <div class="load"><img src="{% static 'img/loading.gif' %}"></div>
+              <!--Doughnut graph-->
+            </div>
           </div>
       </div>
     </div>

diff --git a/bootcamp/static/js/graph_data.js b/bootcamp/static/js/graph_data.js
@@ -1,11 +1,6 @@
-// var bar_labels = JSON.parse({{ bar_labels|safe }});
-// var bar_data = {{ bar_data }};
-
-// var bar_labels = ["Feeds", "Articles", "Comments", "Questions", "Answers", "Activities"];
-// var bar_data = [34, 23, 25, 23, 45, 54];
-
 setBarChart()
 setLineChart()
+setDoughnutChart()
 
 function setBarChart(){
     var ctx_bar_chart = document.getElementById("bar_chart").getContext('2d');
@@ -86,82 +81,49 @@ function setLineChart(){
     });
 }
 
-// function setBarChart(){
-//     var ctx = document.getElementById("bar_chart").getContext('2d');
-//     var bar_labels = ["Feeds", "Articles", "Comments", "Questions", "Answers", "Activities"];
-//     var bar_data = {{ bar_data }};
-//     var myChart = new Chart(ctx, {
-//         type: 'bar',
-//         data: {
-//             labels: bar_labels,
-//             datasets: [{
-//                 label: 'Activities by type:',
-//                 data: bar_data,
-//                 backgroundColor: [
-//                     'rgba(255, 99, 132, 0.2)',
-//                     'rgba(54, 162, 235, 0.2)',
-//                     'rgba(255, 206, 86, 0.2)',
-//                     'rgba(75, 192, 192, 0.2)',
-//                     'rgba(153, 102, 255, 0.2)',
-//                     'rgba(255, 159, 64, 0.2)'
-//                 ],
-//                 borderColor: [
-//                     'rgba(255,99,132,1)',
-//                     'rgba(54, 162, 235, 1)',
-//                     'rgba(255, 206, 86, 1)',
-//                     'rgba(75, 192, 192, 1)',
-//                     'rgba(153, 102, 255, 1)',
-//                     'rgba(255, 159, 64, 1)'
-//                 ],
-//                 borderWidth: 1
-//             }]
-//         },
-//         options: {
-//             scales: {
-//                 yAxes: [{
-//                     ticks: {
-//                         beginAtZero:true
-//                     }
-//                 }]
-//             }
-//         }
-//     });
-// }
-
-// function setLineChart(){
-//     var ctx = document.getElementById("line_chart").getContext('2d');
-//     var myChart = new Chart(ctx, {
-//         type: 'line',
-//         data: {
-//             labels: bar_labels,
-//             datasets: [{
-//                 label: 'Activities by type:',
-//                 data: bar_data,
-//                 backgroundColor: [
-//                     'rgba(255, 99, 132, 0.2)',
-//                     'rgba(54, 162, 235, 0.2)',
-//                     'rgba(255, 206, 86, 0.2)',
-//                     'rgba(75, 192, 192, 0.2)',
-//                     'rgba(153, 102, 255, 0.2)'
-//                 ],
-//                 borderColor: [
-//                     'rgba(255,99,132,1)',
-//                     'rgba(54, 162, 235, 1)',
-//                     'rgba(255, 206, 86, 1)',
-//                     'rgba(75, 192, 192, 1)',
-//                     'rgba(153, 102, 255, 1)'
-//                 ],
-//                 borderWidth: 1
-//             }]
-//         },
-//         options: {
-//             scales: {
-//                 yAxes: [{
-//                     ticks: {
-//                         beginAtZero:true
-//                     }
-//                 }]
-//             }
-//         }
-//     });
-// }
+function setDoughnutChart(){
+    var ctx_doughnut_chart = document.getElementById("doughnut_chart").getContext('2d');
+    var my_doughnut_chart = new Chart(ctx_doughnut_chart, {
+        type: 'doughnut',
+        data: {
+            labels: bar_labels,
+            datasets: [{
+                label: 'Activities by total participation:',
+                data: bar_data,
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.2)',
+                    'rgba(54, 162, 235, 0.2)',
+                    'rgba(255, 206, 86, 0.2)',
+                    'rgba(75, 192, 192, 0.2)',
+                    'rgba(153, 102, 255, 0.2)',
+                    'rgba(255, 159, 64, 0.2)'
+                ],
+                borderColor: [
+                    'rgba(255,99,132,1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderWidth: 2
+            }]
+        },
+        options: {
+            rotation: -Math.PI,
+            cutoutPercentage: 60,
+            circumference: Math.PI,
+            legend: {
+                position: 'left'
+            },
+            animation: {
+                animateRotate: false,
+                animateScale: true
+            },
+            title: {
+                display: true,
+                text: 'User activity by total participation.'
+            }
+        }
+    });
+}