From b424ea012be2b58b7a7af3bc022ceee646d70be6 Mon Sep 17 00:00:00 2001
From: christianesperar <christianesperar@gmail.com>
Date: Mon, 18 Apr 2016 23:07:10 +0800
Subject: [PATCH] Fix doughnut chart become bigger when resizing

---
 production/index.html  |  77 ++++++-------
 production/index3.html | 250 ++++++++++++++++++++---------------------
 2 files changed, 160 insertions(+), 167 deletions(-)

diff --git a/production/index.html b/production/index.html
index d47c7fe2..af45bca7 100755
--- a/production/index.html
+++ b/production/index.html
@@ -583,7 +583,6 @@
                 <div class="clearfix"></div>
               </div>
               <div class="x_content">
-
                 <table class="" style="width:100%">
                   <tr>
                     <th style="width:37%;">
@@ -1228,47 +1227,49 @@
     icons.play();
   </script>
 
-  <!-- dashbord linegraph -->
+  <!-- Doughnut Chart -->
   <script>
-    Chart.defaults.global.legend = {
-      enabled: false
-    };
+    $('document').ready(function() {
+      var options = {
+        legend: false,
+        responsive: false
+      };
 
-    var data = {
-      labels: [
-        "Symbian",
-        "Blackberry",
-        "Other",
-        "Android",
-        "IOS"
-      ],
-      datasets: [{
-        data: [15, 20, 30, 10, 30],
-        backgroundColor: [
-          "#BDC3C7",
-          "#9B59B6",
-          "#455C73",
-          "#26B99A",
-          "#3498DB"
-        ],
-        hoverBackgroundColor: [
-          "#CFD4D8",
-          "#B370CF",
-          "#34495E",
-          "#36CAAB",
-          "#49A9EA"
-        ]
-
-      }]
-    };
-
-    var canvasDoughnut = new Chart(document.getElementById("canvas1"), {
-      type: 'doughnut',
-      tooltipFillColor: "rgba(51, 51, 51, 0.55)",
-      data: data
+      new Chart(document.getElementById("canvas1"), {
+        type: 'doughnut',
+        tooltipFillColor: "rgba(51, 51, 51, 0.55)",
+        data: {
+          labels: [
+            "Symbian",
+            "Blackberry",
+            "Other",
+            "Android",
+            "IOS"
+          ],
+          datasets: [{
+            data: [15, 20, 30, 10, 30],
+            backgroundColor: [
+              "#BDC3C7",
+              "#9B59B6",
+              "#E74C3C",
+              "#26B99A",
+              "#3498DB"
+            ],
+            hoverBackgroundColor: [
+              "#CFD4D8",
+              "#B370CF",
+              "#E95E4F",
+              "#36CAAB",
+              "#49A9EA"
+            ]
+          }]
+        },
+        options: options
+      });
     });
   </script>
-  <!-- /dashbord linegraph -->
+  <!-- /Doughnut Chart -->
+  
   <!-- datepicker -->
   <script type="text/javascript">
     $(document).ready(function() {
diff --git a/production/index3.html b/production/index3.html
index 3d5452a1..79402a93 100755
--- a/production/index3.html
+++ b/production/index3.html
@@ -384,7 +384,7 @@
             <div class="col-md-4 col-sm-6 col-xs-12">
               <div class="x_panel fixed_height_320">
                 <div class="x_title">
-                  <h2>Application Devices <small>Sessions</small></h2>
+                  <h2>App Devices <small>Sessions</small></h2>
                   <ul class="nav navbar-right panel_toolbox">
                     <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                     </li>
@@ -493,7 +493,7 @@
             <div class="col-md-4 col-sm-6 col-xs-12">
               <div class="x_panel fixed_height_320">
                 <div class="x_title">
-                  <h2>Daily active users <small>Sessions</small></h2>
+                  <h2>Daily users <small>Sessions</small></h2>
                   <ul class="nav navbar-right panel_toolbox">
                     <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                     </li>
@@ -512,70 +512,68 @@
                   <div class="clearfix"></div>
                 </div>
                 <div class="x_content">
-
-                  <table class="tile" style="width:100%">
-                    <tr>
-                      <th style="width:37%;">
-                        <span>Top 5</span>
-                      </th>
-                      <th>
-                        <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
-                          <span class="hidden-small">Disbursement</span>
-                        </div>
-                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
-                          <span class="hidden-small">Progress</span>
-                        </div>
-                      </th>
-                    </tr>
-                    <tr>
-                      <td>
-                        <canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
-                      </td>
-                      <td>
-                        <table class="tile_info">
-                          <tr>
-                            <td>
-                              <p><i class="fa fa-square blue"></i>IOS </p>
-                            </td>
-                            <td>30%</td>
-                          </tr>
-                          <tr>
-                            <td>
-                              <p><i class="fa fa-square green"></i>Android </p>
-                            </td>
-                            <td>10%</td>
-                          </tr>
-                          <tr>
-                            <td>
-                              <p><i class="fa fa-square purple"></i>Blackberry </p>
-                            </td>
-                            <td>20%</td>
-                          </tr>
-                          <tr>
-                            <td>
-                              <p><i class="fa fa-square aero"></i>Symbian </p>
-                            </td>
-                            <td>15%</td>
-                          </tr>
-                          <tr>
-                            <td>
-                              <p><i class="fa fa-square red"></i>Others </p>
-                            </td>
-                            <td>30%</td>
-                          </tr>
-                        </table>
-                      </td>
-                    </tr>
-                  </table>
+                <table class="" style="width:100%">
+                  <tr>
+                    <th style="width:37%;">
+                      <p>Top 5</p>
+                    </th>
+                    <th>
+                      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
+                        <p class="">Device</p>
+                      </div>
+                      <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
+                        <p class="">Progress</p>
+                      </div>
+                    </th>
+                  </tr>
+                  <tr>
+                    <td>
+                      <canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
+                    </td>
+                    <td>
+                      <table class="tile_info">
+                        <tr>
+                          <td>
+                            <p><i class="fa fa-square blue"></i>IOS </p>
+                          </td>
+                          <td>30%</td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <p><i class="fa fa-square green"></i>Android </p>
+                          </td>
+                          <td>10%</td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <p><i class="fa fa-square purple"></i>Blackberry </p>
+                          </td>
+                          <td>20%</td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <p><i class="fa fa-square aero"></i>Symbian </p>
+                          </td>
+                          <td>15%</td>
+                        </tr>
+                        <tr>
+                          <td>
+                            <p><i class="fa fa-square red"></i>Others </p>
+                          </td>
+                          <td>30%</td>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                </table>
                 </div>
               </div>
             </div>
 
-
             <div class="col-md-4 col-sm-6 col-xs-12">
               <div class="x_panel fixed_height_320">
                 <div class="x_title">
-                  <h2>Daily active users <small>Sessions</small></h2>
+                  <h2>Profile Settings <small>Sessions</small></h2>
                   <ul class="nav navbar-right panel_toolbox">
                     <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                     </li>
@@ -596,27 +594,20 @@
                 <div class="x_content">
                   <div class="dashboard-widget-content">
                     <ul class="quick-list">
-                      <li><i class="fa fa-calendar-o"></i><a href="#">Settings</a>
-                      </li>
-                      <li><i class="fa fa-bars"></i><a href="#">Subscription</a>
-                      </li>
-                      <li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li>
-                      <li><i class="fa fa-line-chart"></i><a href="#">Achievements</a>
-                      </li>
-                      <li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li>
-                      <li><i class="fa fa-line-chart"></i><a href="#">Achievements</a>
-                      </li>
-                      <li><i class="fa fa-area-chart"></i><a href="#">Logout</a>
-                      </li>
+                      <li><i class="fa fa-line-chart"></i><a href="#">Achievements</a></li>
+                      <li><i class="fa fa-thumbs-up"></i><a href="#">Favorites</a></li>
+                      <li><i class="fa fa-calendar-o"></i><a href="#">Activities</a></li>
+                      <li><i class="fa fa-cog"></i><a href="#">Settings</a></li>
+                      <li><i class="fa fa-area-chart"></i><a href="#">Logout</a></li>
                     </ul>
 
                     <div class="sidebar-widget">
                       <h4>Profile Completion</h4>
                       <canvas width="150" height="80" id="foo" class="" style="width: 160px; height: 100px;"></canvas>
                       <div class="goal-wrapper">
-                        <span class="gauge-value pull-left">$</span>
-                        <span id="gauge-text" class="gauge-value pull-left">3,200</span>
-                        <span id="goal-text" class="goal-value pull-right">$5,000</span>
+                        <span id="gauge-text" class="gauge-value pull-left">0</span>
+                        <span class="gauge-value pull-left">%</span>
+                        <span id="goal-text" class="goal-value pull-right">100%</span>
                       </div>
                     </div>
                   </div>
@@ -718,7 +709,7 @@
             <div class="col-md-4 col-sm-6 col-xs-12">
               <div class="x_panel">
                 <div class="x_title">
-                  <h2>Daily active users <small>Sessions</small></h2>
+                  <h2>Today's Weather <small>Sessions</small></h2>
                   <ul class="nav navbar-right panel_toolbox">
                     <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                     </li>
@@ -844,11 +835,10 @@
             </div>
             <!-- end of weather widget -->
 
-
             <div class="col-md-4 col-sm-6 col-xs-12">
               <div class="x_panel fixed_height_320">
                 <div class="x_title">
-                  <h2>Daily active users <small>Sessions</small></h2>
+                  <h2>Incomes <small>Sessions</small></h2>
                   <ul class="nav navbar-right panel_toolbox">
                     <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                     </li>
@@ -869,27 +859,18 @@
                 <div class="x_content">
                   <div class="dashboard-widget-content">
                     <ul class="quick-list">
-                      <li><i class="fa fa-calendar-o"></i><a href="#">Settings</a>
-                      </li>
-                      <li><i class="fa fa-bars"></i><a href="#">Subscription</a>
-                      </li>
+                      <li><i class="fa fa-bars"></i><a href="#">Subscription</a></li>
                       <li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li>
-                      <li><i class="fa fa-line-chart"></i><a href="#">Achievements</a>
-                      </li>
-                      <li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li>
-                      <li><i class="fa fa-line-chart"></i><a href="#">Achievements</a>
-                      </li>
-                      <li><i class="fa fa-area-chart"></i><a href="#">Logout</a>
-                      </li>
+                      <li><i class="fa fa-support"></i><a href="#">Help Desk</a> </li>
+                      <li><i class="fa fa-heart"></i><a href="#">Donations</a> </li>
                     </ul>
 
                     <div class="sidebar-widget">
-                      <h4>Profile Completion</h4>
+                      <h4>Goal</h4>
                       <canvas width="150" height="80" id="foo2" class="" style="width: 160px; height: 100px;"></canvas>
                       <div class="goal-wrapper">
-                        <span class="gauge-value pull-left">$</span>
                         <span id="gauge-text2" class="gauge-value pull-left">3,200</span>
-                        <span id="goal-text2" class="goal-value pull-right">$5,000</span>
+                        <span id="goal-text2" class="goal-value pull-right">5,000</span>
                       </div>
                     </div>
                   </div>
@@ -930,7 +911,6 @@
   <script src="js/icheck/icheck.min.js"></script>
   <!-- gauge js -->
   <script type="text/javascript" src="js/gauge/gauge.min.js"></script>
-  <script type="text/javascript" src="js/gauge/gauge_demo.js"></script>
   <!-- daterangepicker -->
   <script type="text/javascript" src="js/moment/moment.min.js"></script>
   <script type="text/javascript" src="js/datepicker/daterangepicker.js"></script>
@@ -1015,7 +995,7 @@
     }], options);
   </script>
   <!-- /flot -->
-  <!--  -->
+
   <script>
     $('document').ready(function() {
       $(".sparkline_one").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 7, 5, 4, 3, 5, 6], {
@@ -1039,47 +1019,52 @@
         spotColor: '#26B99A',
         minSpotColor: '#26B99A'
       });
+    });
+  </script>
 
-      Chart.defaults.global.legend = {
-        enabled: false
+  <!-- Doughnut Chart -->
+  <script>
+    $('document').ready(function() {
+      var options = {
+        legend: false,
+        responsive: false
       };
 
-      var data = {
-        labels: [
-          "Symbian",
-          "Blackberry",
-          "Other",
-          "Android",
-          "IOS"
-        ],
-        datasets: [{
-          data: [15, 20, 30, 10, 30],
-          backgroundColor: [
-            "#BDC3C7",
-            "#9B59B6",
-            "#455C73",
-            "#26B99A",
-            "#3498DB"
-          ],
-          hoverBackgroundColor: [
-            "#CFD4D8",
-            "#B370CF",
-            "#34495E",
-            "#36CAAB",
-            "#49A9EA"
-          ]
-
-        }]
-      };
-
-      var canvasDoughnut = new Chart(document.getElementById("canvas1"), {
+      new Chart(document.getElementById("canvas1"), {
         type: 'doughnut',
         tooltipFillColor: "rgba(51, 51, 51, 0.55)",
-        data: data
+        data: {
+          labels: [
+            "Symbian",
+            "Blackberry",
+            "Other",
+            "Android",
+            "IOS"
+          ],
+          datasets: [{
+            data: [15, 20, 30, 10, 30],
+            backgroundColor: [
+              "#BDC3C7",
+              "#9B59B6",
+              "#E74C3C",
+              "#26B99A",
+              "#3498DB"
+            ],
+            hoverBackgroundColor: [
+              "#CFD4D8",
+              "#B370CF",
+              "#E95E4F",
+              "#36CAAB",
+              "#49A9EA"
+            ]
+          }]
+        },
+        options: options
       });
     });
   </script>
-  <!-- -->
+  <!-- /Doughnut Chart -->
+
   <!-- datepicker -->
   <script type="text/javascript">
     $(document).ready(function() {
@@ -1224,11 +1209,18 @@
       strokeColor: '#F0F3F3', // to see which ones work best for you
       generateGradient: true
     };
-    var target = document.getElementById('foo2'); // your canvas element
-    var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
+    var target = document.getElementById('foo'), // your canvas element
+        gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
+    gauge.maxValue = 100; // set max gauge value
+    gauge.animationSpeed = 32; // set animation speed (32 is default value)
+    gauge.set(80); // set actual value
+    gauge.setTextField(document.getElementById("gauge-text"));
+
+    var target = document.getElementById('foo2'), // your canvas element
+        gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
     gauge.maxValue = 5000; // set max gauge value
     gauge.animationSpeed = 32; // set animation speed (32 is default value)
-    gauge.set(3200); // set actual value
+    gauge.set(4200); // set actual value
     gauge.setTextField(document.getElementById("gauge-text2"));
   </script>
 </body>