From f744bf266c7ee66ae6382ce9245c8e576f1cc672 Mon Sep 17 00:00:00 2001
From: Manson Wang <manson@rulingcom.com>
Date: Fri, 1 Nov 2013 18:45:12 +0800
Subject: [PATCH] Working on dashboard

---
 .../admin/dashboards_controller.rb            |  10 -
 app/helpers/application_helper.rb             |  11 +
 .../admin/dashboards/_server_loading.erb      | 728 +++++++++---------
 .../admin/dashboards/_traffic_loading.erb     | 101 ++-
 app/views/admin/dashboards/index.html.erb     |  18 +-
 config/routes.rb                              |   2 +-
 6 files changed, 431 insertions(+), 439 deletions(-)

diff --git a/app/controllers/admin/dashboards_controller.rb b/app/controllers/admin/dashboards_controller.rb
index e7fd745e8..282d48e15 100644
--- a/app/controllers/admin/dashboards_controller.rb
+++ b/app/controllers/admin/dashboards_controller.rb
@@ -50,16 +50,6 @@ class Admin::DashboardsController < OrbitBackendController
     render :json => @usw.uw_diskused_perc.to_s
   end
 
-  def get_month_traffic
-    result = []
-    (0..31).each do |i|
-      the_day = i.day.ago
-      visits = Impression.where( created_at: {'$gte' => the_day.beginning_of_day, '$lte' => the_day.end_of_day}).count
-      result.push({the_day.strftime("%b-%d")=>visits})
-    end
-    render :js => result.to_json
-  end
-
   protected
 
   def get_module_app_count(*args)
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index f28f15a67..63fd06574 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -242,6 +242,17 @@ module ApplicationHelper
     display_visitors(created_at: {'$gte' => Date.today.beginning_of_year, '$lte' => Date.today.end_of_year})
   end
 
+  def get_month_traffic
+    result = [['Date','Visits']]
+    (0..30).each do |i|
+      the_day = i.day.ago
+      visits = Impression.where( created_at: {'$gte' => the_day.beginning_of_day, '$lte' => the_day.end_of_day}).count
+      result.push([ the_day.strftime("%b-%d"), visits])
+      # result.push({'x'=> i, 'y'=> visits})
+    end
+    result.to_json
+  end
+
   def display_date_time(object)
     object.strftime("%Y-%m-%d %H:%M")
   end
diff --git a/app/views/admin/dashboards/_server_loading.erb b/app/views/admin/dashboards/_server_loading.erb
index 6ff3fa003..18493cb68 100644
--- a/app/views/admin/dashboards/_server_loading.erb
+++ b/app/views/admin/dashboards/_server_loading.erb
@@ -2,399 +2,399 @@
     <h2>
         <i class="icons-book-2"></i>
         <span class="break"></span>
-        Server Loading
+        Server Status
     </h2>
 </div>
 <div class="box-content" style='overflow: hidden;'>
-    <div id="cpu_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
-    <div id="mem_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
-    <div id="disk_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></div>
+    <span id="cpu_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></span>
+    <span id="mem_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></span>
+    <span id="disk_usage" style="min-width: 230px; max-width: 220px; height: 220px; display: inline-block; margin-left: -5px;"></span>
 </div>
 <script type="text/javascript">
 $(function () {
-    get_cpu_usage();
-    get_mem_usage();
-    get_disk_usage();
+    // get_cpu_usage();
+    // get_mem_usage();
+    // get_disk_usage();
 });
 
-function get_cpu_usage(){
-    $('#cpu_usage').highcharts({
-      chart: {
-            type: 'gauge',
-            plotBackgroundColor: null,
-            plotBackgroundImage: null,
-            plotBorderWidth: 0,
-            plotShadow: false
-        },
+// function get_cpu_usage(){
+//     $('#cpu_usage').highcharts({
+//       chart: {
+//             type: 'gauge',
+//             plotBackgroundColor: null,
+//             plotBackgroundImage: null,
+//             plotBorderWidth: 0,
+//             plotShadow: false
+//         },
         
-        title: {
-            text: 'CPU Usage'
-        },
+//         title: {
+//             text: 'CPU Usage'
+//         },
         
-        pane: {
-            startAngle: -150,
-            endAngle: 150,
-            background: [{
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#FFF'],
-                        [1, '#333']
-                    ]
-                },
-                borderWidth: 0,
-                outerRadius: '109%'
-            }, {
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#333'],
-                        [1, '#FFF']
-                    ]
-                },
-                borderWidth: 1,
-                outerRadius: '107%'
-            }, {
-                // default background
-            }, {
-                backgroundColor: '#DDD',
-                borderWidth: 0,
-                outerRadius: '105%',
-                innerRadius: '103%'
-            }]
-        },
+//         pane: {
+//             startAngle: -150,
+//             endAngle: 150,
+//             background: [{
+//                 backgroundColor: {
+//                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+//                     stops: [
+//                         [0, '#FFF'],
+//                         [1, '#333']
+//                     ]
+//                 },
+//                 borderWidth: 0,
+//                 outerRadius: '109%'
+//             }, {
+//                 backgroundColor: {
+//                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+//                     stops: [
+//                         [0, '#333'],
+//                         [1, '#FFF']
+//                     ]
+//                 },
+//                 borderWidth: 1,
+//                 outerRadius: '107%'
+//             }, {
+//                 // default background
+//             }, {
+//                 backgroundColor: '#DDD',
+//                 borderWidth: 0,
+//                 outerRadius: '105%',
+//                 innerRadius: '103%'
+//             }]
+//         },
            
-        // the value axis
-        yAxis: {
-            min: 0,
-            max: 100,
+//         // the value axis
+//         yAxis: {
+//             min: 0,
+//             max: 100,
             
-            minorTickInterval: 'auto',
-            minorTickWidth: 1,
-            minorTickLength: 10,
-            minorTickPosition: 'inside',
-            minorTickColor: '#666',
+//             minorTickInterval: 'auto',
+//             minorTickWidth: 1,
+//             minorTickLength: 10,
+//             minorTickPosition: 'inside',
+//             minorTickColor: '#666',
     
-            tickPixelInterval: 30,
-            tickWidth: 2,
-            tickPosition: 'inside',
-            tickLength: 10,
-            tickColor: '#666',
-            labels: {
-                step: 2,
-                rotation: 'auto'
-            },
-            title: {
-                text: ''
-            },
-            plotBands: [{
-                from: 0,
-                to: 60,
-                color: '#55BF3B' // green
-            }, {
-                from: 60,
-                to: 80,
-                color: '#DDDF0D' // yellow
-            }, {
-                from: 80,
-                to: 100,
-                color: '#DF5353' // red
-            }]        
-        },
+//             tickPixelInterval: 30,
+//             tickWidth: 2,
+//             tickPosition: 'inside',
+//             tickLength: 10,
+//             tickColor: '#666',
+//             labels: {
+//                 step: 2,
+//                 rotation: 'auto'
+//             },
+//             title: {
+//                 text: ''
+//             },
+//             plotBands: [{
+//                 from: 0,
+//                 to: 60,
+//                 color: '#55BF3B' // green
+//             }, {
+//                 from: 60,
+//                 to: 80,
+//                 color: '#DDDF0D' // yellow
+//             }, {
+//                 from: 80,
+//                 to: 100,
+//                 color: '#DF5353' // red
+//             }]        
+//         },
     
-        series: [{
-            name: 'CPU Usage',
-            data: [0],
-            dataLabels: {
-                formatter: function () {
-                    var usage = this.y;
-                    return '<span style="color:#339">'+ usage + ' %</span><br/>';
-                },
-                backgroundColor: {
-                    linearGradient: {
-                        x1: 0,
-                        y1: 0,
-                        x2: 0,
-                        y2: 1
-                    },
-                    stops: [
-                        [0, '#DDD'],
-                        [1, '#FFF']
-                    ]
-                }
-            },
-            tooltip: {
-                valueSuffix: ' %'
-            }
-        }]
-    },
-    function(chart) {
-        update_cpu_usage(chart);
-        setInterval(function() {
-          update_cpu_usage(chart);
-        }, 2000);
-    });
-}
+//         series: [{
+//             name: 'CPU Usage',
+//             data: [0],
+//             dataLabels: {
+//                 formatter: function () {
+//                     var usage = this.y;
+//                     return '<span style="color:#339">'+ usage + ' %</span><br/>';
+//                 },
+//                 backgroundColor: {
+//                     linearGradient: {
+//                         x1: 0,
+//                         y1: 0,
+//                         x2: 0,
+//                         y2: 1
+//                     },
+//                     stops: [
+//                         [0, '#DDD'],
+//                         [1, '#FFF']
+//                     ]
+//                 }
+//             },
+//             tooltip: {
+//                 valueSuffix: ' %'
+//             }
+//         }]
+//     },
+//     function(chart) {
+//         update_cpu_usage(chart);
+//         setInterval(function() {
+//           update_cpu_usage(chart);
+//         }, 2000);
+//     });
+// }
 
-function update_cpu_usage(chart){
-    $.get('/admin/dashboards/get_cpu_usage',function(usage){
-            var point = chart.series[0].points[0],
-            newVal = Math.round(usage);
-            point.update(newVal);
-    });
-}
+// function update_cpu_usage(chart){
+//     $.get('/admin/dashboards/get_cpu_usage',function(usage){
+//             var point = chart.series[0].points[0],
+//             newVal = Math.round(usage);
+//             point.update(newVal);
+//     });
+// }
 
-function get_mem_usage(){
-    $('#mem_usage').highcharts({
-      chart: {
-            type: 'gauge',
-            plotBackgroundColor: null,
-            plotBackgroundImage: null,
-            plotBorderWidth: 0,
-            plotShadow: false
-        },
+// function get_mem_usage(){
+//     $('#mem_usage').highcharts({
+//       chart: {
+//             type: 'gauge',
+//             plotBackgroundColor: null,
+//             plotBackgroundImage: null,
+//             plotBorderWidth: 0,
+//             plotShadow: false
+//         },
         
-        title: {
-            text: 'Memory Usage'
-        },
+//         title: {
+//             text: 'Memory Usage'
+//         },
         
-        pane: {
-            startAngle: -150,
-            endAngle: 150,
-            background: [{
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#FFF'],
-                        [1, '#333']
-                    ]
-                },
-                borderWidth: 0,
-                outerRadius: '109%'
-            }, {
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#333'],
-                        [1, '#FFF']
-                    ]
-                },
-                borderWidth: 1,
-                outerRadius: '107%'
-            }, {
-                // default background
-            }, {
-                backgroundColor: '#DDD',
-                borderWidth: 0,
-                outerRadius: '105%',
-                innerRadius: '103%'
-            }]
-        },
+//         pane: {
+//             startAngle: -150,
+//             endAngle: 150,
+//             background: [{
+//                 backgroundColor: {
+//                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+//                     stops: [
+//                         [0, '#FFF'],
+//                         [1, '#333']
+//                     ]
+//                 },
+//                 borderWidth: 0,
+//                 outerRadius: '109%'
+//             }, {
+//                 backgroundColor: {
+//                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+//                     stops: [
+//                         [0, '#333'],
+//                         [1, '#FFF']
+//                     ]
+//                 },
+//                 borderWidth: 1,
+//                 outerRadius: '107%'
+//             }, {
+//                 // default background
+//             }, {
+//                 backgroundColor: '#DDD',
+//                 borderWidth: 0,
+//                 outerRadius: '105%',
+//                 innerRadius: '103%'
+//             }]
+//         },
            
-        // the value axis
-        yAxis: {
-            min: 0,
-            max: 100,
+//         // the value axis
+//         yAxis: {
+//             min: 0,
+//             max: 100,
             
-            minorTickInterval: 'auto',
-            minorTickWidth: 1,
-            minorTickLength: 10,
-            minorTickPosition: 'inside',
-            minorTickColor: '#666',
+//             minorTickInterval: 'auto',
+//             minorTickWidth: 1,
+//             minorTickLength: 10,
+//             minorTickPosition: 'inside',
+//             minorTickColor: '#666',
     
-            tickPixelInterval: 30,
-            tickWidth: 2,
-            tickPosition: 'inside',
-            tickLength: 10,
-            tickColor: '#666',
-            labels: {
-                step: 2,
-                rotation: 'auto'
-            },
-            title: {
-                text: ''
-            },
-            plotBands: [{
-                from: 0,
-                to: 60,
-                color: '#55BF3B' // green
-            }, {
-                from: 60,
-                to: 80,
-                color: '#DDDF0D' // yellow
-            }, {
-                from: 80,
-                to: 100,
-                color: '#DF5353' // red
-            }]        
-        },
+//             tickPixelInterval: 30,
+//             tickWidth: 2,
+//             tickPosition: 'inside',
+//             tickLength: 10,
+//             tickColor: '#666',
+//             labels: {
+//                 step: 2,
+//                 rotation: 'auto'
+//             },
+//             title: {
+//                 text: ''
+//             },
+//             plotBands: [{
+//                 from: 0,
+//                 to: 60,
+//                 color: '#55BF3B' // green
+//             }, {
+//                 from: 60,
+//                 to: 80,
+//                 color: '#DDDF0D' // yellow
+//             }, {
+//                 from: 80,
+//                 to: 100,
+//                 color: '#DF5353' // red
+//             }]        
+//         },
     
-        series: [{
-            name: 'Memory Usage',
-            data: [0],
-            dataLabels: {
-                formatter: function () {
-                    var usage = this.y;
-                    return '<span style="color:#339">'+ usage + ' %</span><br/>';
-                },
-                backgroundColor: {
-                    linearGradient: {
-                        x1: 0,
-                        y1: 0,
-                        x2: 0,
-                        y2: 1
-                    },
-                    stops: [
-                        [0, '#DDD'],
-                        [1, '#FFF']
-                    ]
-                }
-            },
-            tooltip: {
-                valueSuffix: ' %'
-            }
-        }]
-    },
-    function(chart) {
-        update_mem_usage(chart)
-        setInterval(function() {
-            update_mem_usage(chart);  
-        }, 5000);
-    });
-}
+//         series: [{
+//             name: 'Memory Usage',
+//             data: [0],
+//             dataLabels: {
+//                 formatter: function () {
+//                     var usage = this.y;
+//                     return '<span style="color:#339">'+ usage + ' %</span><br/>';
+//                 },
+//                 backgroundColor: {
+//                     linearGradient: {
+//                         x1: 0,
+//                         y1: 0,
+//                         x2: 0,
+//                         y2: 1
+//                     },
+//                     stops: [
+//                         [0, '#DDD'],
+//                         [1, '#FFF']
+//                     ]
+//                 }
+//             },
+//             tooltip: {
+//                 valueSuffix: ' %'
+//             }
+//         }]
+//     },
+//     function(chart) {
+//         update_mem_usage(chart)
+//         setInterval(function() {
+//             update_mem_usage(chart);  
+//         }, 5000);
+//     });
+// }
 
-function update_mem_usage(chart){
-    $.get('/admin/dashboards/get_mem_usage',function(usage){
-            var point = chart.series[0].points[0],
-            newVal = Math.round(usage);
-            point.update(newVal);
-    });
-}
+// function update_mem_usage(chart){
+//     $.get('/admin/dashboards/get_mem_usage',function(usage){
+//             var point = chart.series[0].points[0],
+//             newVal = Math.round(usage);
+//             point.update(newVal);
+//     });
+// }
 
-function get_disk_usage(){
-    $('#disk_usage').highcharts({
-      chart: {
-            type: 'gauge',
-            plotBackgroundColor: null,
-            plotBackgroundImage: null,
-            plotBorderWidth: 0,
-            plotShadow: false
-        },
+// function get_disk_usage(){
+//     $('#disk_usage').highcharts({
+//       chart: {
+//             type: 'gauge',
+//             plotBackgroundColor: null,
+//             plotBackgroundImage: null,
+//             plotBorderWidth: 0,
+//             plotShadow: false
+//         },
         
-        title: {
-            text: 'Disk Usage'
-        },
+//         title: {
+//             text: 'Disk Usage'
+//         },
         
-        pane: {
-            startAngle: -150,
-            endAngle: 150,
-            background: [{
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#FFF'],
-                        [1, '#333']
-                    ]
-                },
-                borderWidth: 0,
-                outerRadius: '109%'
-            }, {
-                backgroundColor: {
-                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                    stops: [
-                        [0, '#333'],
-                        [1, '#FFF']
-                    ]
-                },
-                borderWidth: 1,
-                outerRadius: '107%'
-            }, {
-                // default background
-            }, {
-                backgroundColor: '#DDD',
-                borderWidth: 0,
-                outerRadius: '105%',
-                innerRadius: '103%'
-            }]
-        },
+//         pane: {
+//             startAngle: -150,
+//             endAngle: 150,
+//             background: [{
+//                 backgroundColor: {
+//                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+//                     stops: [
+//                         [0, '#FFF'],
+//                         [1, '#333']
+//                     ]
+//                 },
+//                 borderWidth: 0,
+//                 outerRadius: '109%'
+//             }, {
+//                 backgroundColor: {
+//                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+//                     stops: [
+//                         [0, '#333'],
+//                         [1, '#FFF']
+//                     ]
+//                 },
+//                 borderWidth: 1,
+//                 outerRadius: '107%'
+//             }, {
+//                 // default background
+//             }, {
+//                 backgroundColor: '#DDD',
+//                 borderWidth: 0,
+//                 outerRadius: '105%',
+//                 innerRadius: '103%'
+//             }]
+//         },
            
-        // the value axis
-        yAxis: {
-            min: 0,
-            max: 100,
+//         // the value axis
+//         yAxis: {
+//             min: 0,
+//             max: 100,
             
-            minorTickInterval: 'auto',
-            minorTickWidth: 1,
-            minorTickLength: 10,
-            minorTickPosition: 'inside',
-            minorTickColor: '#666',
+//             minorTickInterval: 'auto',
+//             minorTickWidth: 1,
+//             minorTickLength: 10,
+//             minorTickPosition: 'inside',
+//             minorTickColor: '#666',
     
-            tickPixelInterval: 30,
-            tickWidth: 2,
-            tickPosition: 'inside',
-            tickLength: 10,
-            tickColor: '#666',
-            labels: {
-                step: 2,
-                rotation: 'auto'
-            },
-            title: {
-                text: ''
-            },
-            plotBands: [{
-                from: 0,
-                to: 60,
-                color: '#55BF3B' // green
-            }, {
-                from: 60,
-                to: 80,
-                color: '#DDDF0D' // yellow
-            }, {
-                from: 80,
-                to: 100,
-                color: '#DF5353' // red
-            }]        
-        },
+//             tickPixelInterval: 30,
+//             tickWidth: 2,
+//             tickPosition: 'inside',
+//             tickLength: 10,
+//             tickColor: '#666',
+//             labels: {
+//                 step: 2,
+//                 rotation: 'auto'
+//             },
+//             title: {
+//                 text: ''
+//             },
+//             plotBands: [{
+//                 from: 0,
+//                 to: 60,
+//                 color: '#55BF3B' // green
+//             }, {
+//                 from: 60,
+//                 to: 80,
+//                 color: '#DDDF0D' // yellow
+//             }, {
+//                 from: 80,
+//                 to: 100,
+//                 color: '#DF5353' // red
+//             }]        
+//         },
     
-        series: [{
-            name: 'Disk Usage',
-            data: [0],
-            dataLabels: {
-                formatter: function () {
-                    var usage = this.y;
-                    return '<span style="color:#339">'+ usage + ' %</span><br/>';
-                },
-                backgroundColor: {
-                    linearGradient: {
-                        x1: 0,
-                        y1: 0,
-                        x2: 0,
-                        y2: 1
-                    },
-                    stops: [
-                        [0, '#DDD'],
-                        [1, '#FFF']
-                    ]
-                }
-            },
-            tooltip: {
-                valueSuffix: ' %'
-            }
-        }]
-    },
-    function(chart) {
-        update_disk_usage(chart);
-        setInterval(function() {
-            update_disk_usage(chart);  
-        }, 60000);
-    });
-}
+//         series: [{
+//             name: 'Disk Usage',
+//             data: [0],
+//             dataLabels: {
+//                 formatter: function () {
+//                     var usage = this.y;
+//                     return '<span style="color:#339">'+ usage + ' %</span><br/>';
+//                 },
+//                 backgroundColor: {
+//                     linearGradient: {
+//                         x1: 0,
+//                         y1: 0,
+//                         x2: 0,
+//                         y2: 1
+//                     },
+//                     stops: [
+//                         [0, '#DDD'],
+//                         [1, '#FFF']
+//                     ]
+//                 }
+//             },
+//             tooltip: {
+//                 valueSuffix: ' %'
+//             }
+//         }]
+//     },
+//     function(chart) {
+//         update_disk_usage(chart);
+//         setInterval(function() {
+//             update_disk_usage(chart);  
+//         }, 60000);
+//     });
+// }
 
-function update_disk_usage(chart){
-    $.get('/admin/dashboards/get_disk_usage',function(usage){
-            var point = chart.series[0].points[0],
-            newVal = Math.round(usage);
-            point.update(newVal);
-    });
-}
+// function update_disk_usage(chart){
+//     $.get('/admin/dashboards/get_disk_usage',function(usage){
+//             var point = chart.series[0].points[0],
+//             newVal = Math.round(usage);
+//             point.update(newVal);
+//     });
+// }
 </script>
\ No newline at end of file
diff --git a/app/views/admin/dashboards/_traffic_loading.erb b/app/views/admin/dashboards/_traffic_loading.erb
index 0dee91c68..204eec484 100644
--- a/app/views/admin/dashboards/_traffic_loading.erb
+++ b/app/views/admin/dashboards/_traffic_loading.erb
@@ -2,61 +2,58 @@
     <h2>
         <i class="icons-book-2"></i>
         <span class="break"></span>
-        Traffic Loading
+        Monthly Traffic
     </h2>
 </div>
 <div class="box-content">
-<div id="month_traffic" style="min-width: 310px; height: 230px; margin: 0 auto"></div>
+    <div id="month_traffic"></div>
 </div>
 <script type="text/javascript">
-$(function () {
-    $.getJSON('/admin/dashboards/get_month_traffic', function (data) {
-            // console.log(data);
-            dates = [];
-            visits = [];
-            $.each(data,function(key,value){
-                // console.log(value);
-                $.each(value,function(date,visit){
-                     dates.push(date);
-                     visits.push(visit);
-                });
-            });
-            
-            $('#month_traffic').highcharts({
-                chart: {
-                    type: 'spline'
-                },
-                title: {
-                    text: 'Monthly Traffic',
-                    x: 0 //center
-                },
-                xAxis: {
-                    categories: dates
-                },
-                yAxis: {
-                    title: {
-                        text: 'Number of visits'
-                    },
-                    plotLines: [{
-                        value: 0,
-                        width: 1,
-                        color: '#808080'
-                    }]
-                },
-                tooltip: {
-                    valueSuffix: ''
-                },
-                legend: {
-                    layout: 'vertical',
-                    align: 'right',
-                    verticalAlign: 'middle',
-                    borderWidth: 0
-                },
-                series: [{
-                    name: 'Visits',
-                    data: visits
-                }]
-            });
-    });
-});
+    google.load("visualization", "1", {packages:["corechart"]});
+ 
+    var chart;
+    var datas =<%= raw(get_month_traffic) %>;
+    var initData;
+
+    google.setOnLoadCallback(init);
+    window.onresize = drawChart;
+
+    function init() {
+        initData = new google.visualization.DataTable();
+
+        $.each(datas,function(idx,data){
+            initData.setValue(idx,1,[data[0],0]);
+        });
+
+        var options = {
+            title: 'Monthly Visits',
+            titlePosition: 'in',
+            fontSize: 10,
+            curveType: 'function',
+            hAxis:{
+                slantedText: true,
+                slantedTextAngle: 35
+            },
+            chartArea:{
+                width: '90%',
+                left: 50,
+                right: 0
+            },
+            animation:{
+                duration: 1000,
+                easing: 'out',
+            }
+        };
+
+        drawChart();
+    }
+
+    function drawChart() {
+        chart = new google.visualization.AreaChart(document.getElementById('month_traffic'));
+        chart.draw(google.visualization.arrayToDataTable(initData), options);
+
+        // $.each(datas,function(idx,data){
+        //     initData.push([data[0],0]);
+        // });
+    }
 </script>
\ No newline at end of file
diff --git a/app/views/admin/dashboards/index.html.erb b/app/views/admin/dashboards/index.html.erb
index 1d7007916..d05145d93 100644
--- a/app/views/admin/dashboards/index.html.erb
+++ b/app/views/admin/dashboards/index.html.erb
@@ -1,10 +1,4 @@
-<script src="http://code.highcharts.com/highcharts.js"></script>
-<script src="http://code.highcharts.com/highcharts-more.js"></script>
-<script src="http://code.highcharts.com/modules/exporting.js"></script>
-
-<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
-<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
-<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
+<script type="text/javascript" src="https://www.google.com/jsapi"></script>
 
 <section id="main-wrap">
   <div class="wrap-inner initial">
@@ -14,11 +8,6 @@
           <%= render 'server_loading' %>
         </div>
       </div>
-      <div class="box span4">
-        <div id='traffic'>
-          <%= render 'traffic' %>
-        </div>
-      </div>
     </div>
     <div class="row-fluid">
       <div class="box span">
@@ -47,6 +36,11 @@
           <%= render 'most_visited' %>
         </div>
       </div>
+      <div class="box span4">
+        <div id='traffic'>
+          <%= render 'traffic' %>
+        </div>
+      </div>
     </div>
   </div>
 </section>
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index f15898c7a..139bdce66 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -70,7 +70,7 @@ Orbit::Application.routes.draw do
         get 'get_cpu_usage'
         get 'get_mem_usage'
         get 'get_disk_usage'
-        get 'get_month_traffic'
+        # get 'get_month_traffic'
       end
     end
     resources :designs do