dashboard.js (5635B)
1 /* 2 * Author: Abdullah A Almsaeed 3 * Date: 4 Jan 2014 4 * Description: 5 * This is a demo file used only for the main dashboard (index.html) 6 **/ 7 8 $(function () { 9 10 "use strict"; 11 12 //Make the dashboard widgets sortable Using jquery UI 13 $(".connectedSortable").sortable({ 14 placeholder: "sort-highlight", 15 connectWith: ".connectedSortable", 16 handle: ".box-header, .nav-tabs", 17 forcePlaceholderSize: true, 18 zIndex: 999999 19 }); 20 $(".connectedSortable .box-header, .connectedSortable .nav-tabs-custom").css("cursor", "move"); 21 22 //jQuery UI sortable for the todo list 23 $(".todo-list").sortable({ 24 placeholder: "sort-highlight", 25 handle: ".handle", 26 forcePlaceholderSize: true, 27 zIndex: 999999 28 }); 29 30 //bootstrap WYSIHTML5 - text editor 31 $(".textarea").wysihtml5(); 32 33 $('.daterange').daterangepicker({ 34 ranges: { 35 'Today': [moment(), moment()], 36 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 37 'Last 7 Days': [moment().subtract(6, 'days'), moment()], 38 'Last 30 Days': [moment().subtract(29, 'days'), moment()], 39 'This Month': [moment().startOf('month'), moment().endOf('month')], 40 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 41 }, 42 startDate: moment().subtract(29, 'days'), 43 endDate: moment() 44 }, function (start, end) { 45 window.alert("You chose: " + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 46 }); 47 48 /* jQueryKnob */ 49 $(".knob").knob(); 50 51 //jvectormap data 52 var visitorsData = { 53 "US": 398, //USA 54 "SA": 400, //Saudi Arabia 55 "CA": 1000, //Canada 56 "DE": 500, //Germany 57 "FR": 760, //France 58 "CN": 300, //China 59 "AU": 700, //Australia 60 "BR": 600, //Brazil 61 "IN": 800, //India 62 "GB": 320, //Great Britain 63 "RU": 3000 //Russia 64 }; 65 //World map by jvectormap 66 $('#world-map').vectorMap({ 67 map: 'world_mill_en', 68 backgroundColor: "transparent", 69 regionStyle: { 70 initial: { 71 fill: '#e4e4e4', 72 "fill-opacity": 1, 73 stroke: 'none', 74 "stroke-width": 0, 75 "stroke-opacity": 1 76 } 77 }, 78 series: { 79 regions: [{ 80 values: visitorsData, 81 scale: ["#92c1dc", "#ebf4f9"], 82 normalizeFunction: 'polynomial' 83 }] 84 }, 85 onRegionLabelShow: function (e, el, code) { 86 if (typeof visitorsData[code] != "undefined") 87 el.html(el.html() + ': ' + visitorsData[code] + ' new visitors'); 88 } 89 }); 90 91 //Sparkline charts 92 var myvalues = [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]; 93 $('#sparkline-1').sparkline(myvalues, { 94 type: 'line', 95 lineColor: '#92c1dc', 96 fillColor: "#ebf4f9", 97 height: '50', 98 width: '80' 99 }); 100 myvalues = [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]; 101 $('#sparkline-2').sparkline(myvalues, { 102 type: 'line', 103 lineColor: '#92c1dc', 104 fillColor: "#ebf4f9", 105 height: '50', 106 width: '80' 107 }); 108 myvalues = [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]; 109 $('#sparkline-3').sparkline(myvalues, { 110 type: 'line', 111 lineColor: '#92c1dc', 112 fillColor: "#ebf4f9", 113 height: '50', 114 width: '80' 115 }); 116 117 //The Calender 118 $("#calendar").datepicker(); 119 120 //SLIMSCROLL FOR CHAT WIDGET 121 $('#chat-box').slimScroll({ 122 height: '250px' 123 }); 124 125 /* Morris.js Charts */ 126 // Sales chart 127 var area = new Morris.Area({ 128 element: 'revenue-chart', 129 resize: true, 130 data: [ 131 {y: '2011 Q1', item1: 2666, item2: 2666}, 132 {y: '2011 Q2', item1: 2778, item2: 2294}, 133 {y: '2011 Q3', item1: 4912, item2: 1969}, 134 {y: '2011 Q4', item1: 3767, item2: 3597}, 135 {y: '2012 Q1', item1: 6810, item2: 1914}, 136 {y: '2012 Q2', item1: 5670, item2: 4293}, 137 {y: '2012 Q3', item1: 4820, item2: 3795}, 138 {y: '2012 Q4', item1: 15073, item2: 5967}, 139 {y: '2013 Q1', item1: 10687, item2: 4460}, 140 {y: '2013 Q2', item1: 8432, item2: 5713} 141 ], 142 xkey: 'y', 143 ykeys: ['item1', 'item2'], 144 labels: ['Item 1', 'Item 2'], 145 lineColors: ['#a0d0e0', '#3c8dbc'], 146 hideHover: 'auto' 147 }); 148 var line = new Morris.Line({ 149 element: 'line-chart', 150 resize: true, 151 data: [ 152 {y: '2011 Q1', item1: 2666}, 153 {y: '2011 Q2', item1: 2778}, 154 {y: '2011 Q3', item1: 4912}, 155 {y: '2011 Q4', item1: 3767}, 156 {y: '2012 Q1', item1: 6810}, 157 {y: '2012 Q2', item1: 5670}, 158 {y: '2012 Q3', item1: 4820}, 159 {y: '2012 Q4', item1: 15073}, 160 {y: '2013 Q1', item1: 10687}, 161 {y: '2013 Q2', item1: 8432} 162 ], 163 xkey: 'y', 164 ykeys: ['item1'], 165 labels: ['Item 1'], 166 lineColors: ['#efefef'], 167 lineWidth: 2, 168 hideHover: 'auto', 169 gridTextColor: "#fff", 170 gridStrokeWidth: 0.4, 171 pointSize: 4, 172 pointStrokeColors: ["#efefef"], 173 gridLineColor: "#efefef", 174 gridTextFamily: "Open Sans", 175 gridTextSize: 10 176 }); 177 178 //Donut Chart 179 var donut = new Morris.Donut({ 180 element: 'sales-chart', 181 resize: true, 182 colors: ["#3c8dbc", "#f56954", "#00a65a"], 183 data: [ 184 {label: "Download Sales", value: 12}, 185 {label: "In-Store Sales", value: 30}, 186 {label: "Mail-Order Sales", value: 20} 187 ], 188 hideHover: 'auto' 189 }); 190 191 //Fix for charts under tabs 192 $('.box ul.nav a').on('shown.bs.tab', function () { 193 area.redraw(); 194 donut.redraw(); 195 line.redraw(); 196 }); 197 198 /* The todo list plugin */ 199 $(".todo-list").todolist({ 200 onCheck: function (ele) { 201 window.console.log("The element has been checked"); 202 return ele; 203 }, 204 onUncheck: function (ele) { 205 window.console.log("The element has been unchecked"); 206 return ele; 207 } 208 }); 209 210 });