demo.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. Circles.create({
  2. id: 'task-complete',
  3. radius: 75,
  4. value: 80,
  5. maxValue: 100,
  6. width: 8,
  7. text: function(value){return value + '%';},
  8. colors: ['#eee', '#1D62F0'],
  9. duration: 400,
  10. wrpClass: 'circles-wrp',
  11. textClass: 'circles-text',
  12. styleWrapper: true,
  13. styleText: true
  14. })
  15. $.notify({
  16. icon: 'la la-bell',
  17. title: 'Bootstrap notify',
  18. message: 'Turning standard Bootstrap alerts into "notify" like notifications',
  19. },{
  20. type: 'success',
  21. placement: {
  22. from: "bottom",
  23. align: "right"
  24. },
  25. time: 1000,
  26. });
  27. // monthlyChart
  28. Chartist.Pie('#monthlyChart', {
  29. labels: ['50%', '20%', '30%'],
  30. series: [50, 20, 30]
  31. }, {
  32. plugins: [
  33. Chartist.plugins.tooltip()
  34. ]
  35. });
  36. // trafficChart
  37. var chart = new Chartist.Line('#trafficChart', {
  38. labels: [1, 2, 3, 4, 5, 6, 7],
  39. series: [
  40. [5, 9, 7, 8, 5, 3, 5],
  41. [6, 9, 5, 10, 2, 3, 7],
  42. [2, 7, 4, 10, 7, 6, 2]
  43. ]
  44. }, {
  45. plugins: [
  46. Chartist.plugins.tooltip()
  47. ],
  48. low: 0,
  49. height: "245px",
  50. });
  51. // salesChart
  52. var dataSales = {
  53. labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  54. series: [
  55. [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
  56. [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
  57. ]
  58. }
  59. var optionChartSales = {
  60. plugins: [
  61. Chartist.plugins.tooltip()
  62. ],
  63. seriesBarDistance: 10,
  64. axisX: {
  65. showGrid: false
  66. },
  67. height: "245px",
  68. }
  69. var responsiveChartSales = [
  70. ['screen and (max-width: 640px)', {
  71. seriesBarDistance: 5,
  72. axisX: {
  73. labelInterpolationFnc: function (value) {
  74. return value[0];
  75. }
  76. }
  77. }]
  78. ];
  79. Chartist.Bar('#salesChart', dataSales, optionChartSales, responsiveChartSales);
  80. $(".mapcontainer").mapael({
  81. map : {
  82. name : "world_countries",
  83. zoom: {
  84. enabled: true,
  85. maxLevel: 10
  86. },
  87. defaultPlot: {
  88. attrs: {
  89. fill: "#004a9b"
  90. , opacity: 0.6
  91. }
  92. },
  93. defaultArea: {
  94. attrs: {
  95. fill: "#e4e4e4"
  96. , stroke: "#fafafa"
  97. }
  98. , attrsHover: {
  99. fill: "#59d05d"
  100. }
  101. , text: {
  102. attrs: {
  103. fill: "#505444"
  104. }
  105. , attrsHover: {
  106. fill: "#000"
  107. }
  108. }
  109. }
  110. },
  111. areas: {
  112. // "department-56": {
  113. // text: {content: "Morbihan", attrs: {"font-size": 10}},
  114. // tooltip: {content: "<b>Morbihan</b> <br /> Bretagne"}
  115. // },
  116. "ID": {
  117. tooltip: {content: "<b>Indonesia</b> <br /> Tempat Lahir Beta"},
  118. attrs: {
  119. fill: "#59d05d"
  120. }
  121. , attrsHover: {
  122. fill: "#59d05d"
  123. }
  124. },
  125. "RU": {
  126. tooltip: {content: "<b>Russia</b>"},
  127. attrs: {
  128. fill: "#59d05d"
  129. }
  130. , attrsHover: {
  131. fill: "#59d05d"
  132. }
  133. },
  134. "US": {
  135. tooltip: {content: "<b>United State</b>"},
  136. attrs: {
  137. fill: "#59d05d"
  138. }
  139. , attrsHover: {
  140. fill: "#59d05d"
  141. }
  142. },
  143. "AU": {
  144. tooltip: {content: "<b>Australia</b>"},
  145. attrs: {
  146. fill: "#59d05d"
  147. }
  148. , attrsHover: {
  149. fill: "#59d05d"
  150. }
  151. }
  152. },
  153. });