dashboard.js 7.7 KB

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