Theme Inspinia
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

flot-demo2.js 7.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. //Flot Pie Chart Devices
  2. $(function() {
  3. var data = [{
  4. label: "iPhone",
  5. data: 21,
  6. color: "#d3d3d3",
  7. }, {
  8. label: "Samsung",
  9. data: 3,
  10. color: "#bababa",
  11. }, {
  12. label: "Windows",
  13. data: 15,
  14. color: "#79d2c0",
  15. }, {
  16. label: "Blackberry",
  17. data: 52,
  18. color: "#1ab394",
  19. }];
  20. var plotObj = $.plot($("#flot-pie-chart-devices"), data, {
  21. series: {
  22. pie: {
  23. show: true
  24. }
  25. },
  26. grid: {
  27. hoverable: true
  28. },
  29. tooltip: true,
  30. tooltipOpts: {
  31. content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
  32. shifts: {
  33. x: 20,
  34. y: 0
  35. },
  36. defaultTheme: false
  37. }
  38. });
  39. });
  40. //Flot Pie Chart Browsers
  41. $(function() {
  42. var data = [{
  43. label: "Chrome",
  44. data: 21,
  45. color: "#d3d3d3",
  46. }, {
  47. label: "Firefox",
  48. data: 3,
  49. color: "#bababa",
  50. }, {
  51. label: "IE",
  52. data: 15,
  53. color: "#79d2c0",
  54. }, {
  55. label: "Safari",
  56. data: 52,
  57. color: "#1ab394",
  58. }];
  59. var plotObj = $.plot($("#flot-pie-chart-browsers"), data, {
  60. series: {
  61. pie: {
  62. show: true
  63. }
  64. },
  65. grid: {
  66. hoverable: true
  67. },
  68. tooltip: true,
  69. tooltipOpts: {
  70. content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
  71. shifts: {
  72. x: 20,
  73. y: 0
  74. },
  75. defaultTheme: false
  76. }
  77. });
  78. });
  79. //Flot Pie Chart Sources
  80. $(function() {
  81. var data = [{
  82. label: "Client 1",
  83. data: 21,
  84. color: "#d3d3d3",
  85. }, {
  86. label: "Client 2",
  87. data: 3,
  88. color: "#bababa",
  89. }, {
  90. label: "Client 3",
  91. data: 15,
  92. color: "#79d2c0",
  93. }, {
  94. label: "Client 4",
  95. data: 52,
  96. color: "#1ab394",
  97. }];
  98. var plotObj = $.plot($("#flot-pie-chart-sources"), data, {
  99. series: {
  100. pie: {
  101. show: true
  102. }
  103. },
  104. grid: {
  105. hoverable: true
  106. },
  107. tooltip: true,
  108. tooltipOpts: {
  109. content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
  110. shifts: {
  111. x: 20,
  112. y: 0
  113. },
  114. defaultTheme: false
  115. }
  116. });
  117. });
  118. //Flot Pie Chart Carriers
  119. $(function() {
  120. var data = [{
  121. label: "Carriers 1",
  122. data: 21,
  123. color: "#d3d3d3",
  124. }, {
  125. label: "Carriers 2",
  126. data: 3,
  127. color: "#bababa",
  128. }, {
  129. label: "Carriers 3",
  130. data: 15,
  131. color: "#79d2c0",
  132. }, {
  133. label: "Carriers 4",
  134. data: 52,
  135. color: "#1ab394",
  136. }];
  137. var plotObj = $.plot($("#flot-pie-chart-carriers"), data, {
  138. series: {
  139. pie: {
  140. show: true
  141. }
  142. },
  143. grid: {
  144. hoverable: true
  145. },
  146. tooltip: true,
  147. tooltipOpts: {
  148. content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
  149. shifts: {
  150. x: 20,
  151. y: 0
  152. },
  153. defaultTheme: false
  154. }
  155. });
  156. });
  157. //Flot Pie Chart Gender
  158. $(function() {
  159. var data = [{
  160. label: "Male",
  161. data: 50,
  162. color: "#d3d3d3",
  163. },{
  164. label: "Female",
  165. data: 50,
  166. color: "#1ab394",
  167. }];
  168. var plotObj = $.plot($("#flot-pie-chart-gender"), data, {
  169. series: {
  170. pie: {
  171. show: true
  172. }
  173. },
  174. grid: {
  175. hoverable: true
  176. },
  177. tooltip: true,
  178. tooltipOpts: {
  179. content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
  180. shifts: {
  181. x: 20,
  182. y: 0
  183. },
  184. defaultTheme: false
  185. }
  186. });
  187. });
  188. //Flot Pie Chart Age groups
  189. $(function() {
  190. var data = [{
  191. label: "18/24",
  192. data: 21,
  193. color: "#d3d3d3",
  194. }, {
  195. label: "24/34",
  196. data: 3,
  197. color: "#bababa",
  198. }, {
  199. label: "35/44",
  200. data: 15,
  201. color: "#79d2c0",
  202. }, {
  203. label: "45/54",
  204. data: 37,
  205. color: "#1ab394",
  206. }, {
  207. label: ">55",
  208. data: 15,
  209. color: "#79d2c0",
  210. }];
  211. var plotObj = $.plot($("#flot-pie-chart-age-groups"), data, {
  212. series: {
  213. pie: {
  214. show: true
  215. }
  216. },
  217. grid: {
  218. hoverable: true
  219. },
  220. tooltip: true,
  221. tooltipOpts: {
  222. content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
  223. shifts: {
  224. x: 20,
  225. y: 0
  226. },
  227. defaultTheme: false
  228. }
  229. });
  230. });
  231. //Flot Pie Chart Spending power
  232. $(function() {
  233. var data = [{
  234. label: "High",
  235. data: 20,
  236. color: "#d3d3d3",
  237. }, {
  238. label: "Medium",
  239. data: 40,
  240. color: "#1ab394",
  241. }, {
  242. label: "Low",
  243. data: 40,
  244. color: "#79d2c0",
  245. }];
  246. var plotObj = $.plot($("#flot-pie-chart-spending-power"), data, {
  247. series: {
  248. pie: {
  249. show: true
  250. }
  251. },
  252. grid: {
  253. hoverable: true
  254. },
  255. tooltip: true,
  256. tooltipOpts: {
  257. content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
  258. shifts: {
  259. x: 20,
  260. y: 0
  261. },
  262. defaultTheme: false
  263. }
  264. });
  265. });
  266. //Flot Pie Chart User type
  267. $(function() {
  268. var data = [{
  269. label: "Business",
  270. data: 60,
  271. color: "#1ab394",
  272. }, {
  273. label: "Private",
  274. data: 40,
  275. color: "#79d2c0",
  276. }];
  277. var plotObj = $.plot($("#flot-pie-chart-user-type"), data, {
  278. series: {
  279. pie: {
  280. show: true
  281. }
  282. },
  283. grid: {
  284. hoverable: true
  285. },
  286. tooltip: true,
  287. tooltipOpts: {
  288. content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
  289. shifts: {
  290. x: 20,
  291. y: 0
  292. },
  293. defaultTheme: false
  294. }
  295. });
  296. });
  297. //Flot Pie Chart Interest
  298. $(function() {
  299. var data = [{
  300. label: "Auto",
  301. data: 21,
  302. color: "#d3d3d3",
  303. }, {
  304. label: "Sports",
  305. data: 3,
  306. color: "#bababa",
  307. }, {
  308. label: "Health",
  309. data: 15,
  310. color: "#79d2c0",
  311. }, {
  312. label: "Education",
  313. data: 37,
  314. color: "#1ab394",
  315. }, {
  316. label: "Other",
  317. data: 15,
  318. color: "#79d2c0",
  319. }];
  320. var plotObj = $.plot($("#flot-pie-chart-interest"), data, {
  321. series: {
  322. pie: {
  323. show: true
  324. }
  325. },
  326. grid: {
  327. hoverable: true
  328. },
  329. tooltip: true,
  330. tooltipOpts: {
  331. content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
  332. shifts: {
  333. x: 20,
  334. y: 0
  335. },
  336. defaultTheme: false
  337. }
  338. });
  339. });