• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    8.  
    9. <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. <style>
    11. #inputs {
    12. background: #F7F7F7;
    13. border: 1px solid #DDD;
    14. border-top: none;
    15. border-bottom-left-radius: 4px;
    16. border-bottom-right-radius: 4px;
    17. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    18. font-family: Open Sans;
    19. padding: 1rem 1rem;
    20. margin: 0 0 1.5rem 0;
    21. max-width: 600px;
    22. width: 100%;
    23. }
    24.  
    25. label {
    26. cursor: pointer;
    27. }
    28.  
    29. .row {
    30. display: -webkit-flex;
    31. display: -ms-flexbox;
    32. display: flex;
    33. }
    34.  
    35. .row+.row {
    36. margin-top: 1rem;
    37. }
    38.  
    39. .col {
    40. -webkit-flex: 1;
    41. -ms-flex: 1;
    42. flex: 1;
    43. }
    44. </style>
    45. </head>
    46.  
    47. <body>
    48.  
    49. <div id='firefox47-overall'></div>
    50.  
    51. <div id="inputs">
    52. <div class="row">
    53. <div class="col">
    54. <input type="checkbox" id='errors-checkbox-46' checked>
    55. <label for='errors-checkbox-46'>46 Errors</label>
    56. </div>
    57. <div class="col">
    58. <input type="checkbox" id='ips-checkbox-46' checked>
    59. <label for='ips-checkbox-46'>46 IP's</label>
    60. </div>
    61. <div class="col">
    62. <input type="checkbox" id='errors-checkbox-47'>
    63. <label for='errors-checkbox-47'>47 Errors</label>
    64. </div>
    65. <div class="col">
    66. <input type="checkbox" id='ips-checkbox-47'>
    67. <label for='ips-checkbox-47'>47 IP's</label>
    68. </div>
    69. </div>
    70. </div>
    71.  
    72. <div id='firefox47-detail'></div>
    73.  
    74.  
    75. <script>
    76. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    77. var lastIndex = null;
    78.  
    79. var totalUsage = [74844938, 67916452, 51397750, 54840784, 71261006, 71914665, 69877920, 69797876, 64015606, 47538624, 53405488, 71237670, 69854483, 67229795, 65940984, 59888233, 46967265, 51144680, 63681846, 70527432, 97712043, 90345661, 67326277, 54836594, 59923602, 78117849, 73954211, 71816590, 72253684, 64360719, 50948147, 54739648, 69613566, 70720606, 72607842, 69519811, 64228413, 50706194, 55072683, 68672444, 77385133, 82989307, 80641084, 79055948, 62823593, 71047012];
    80.  
    81. var dates = [1465257600000, 1465344000000, 1465430400000, 1465516800000, 1465603200000, 1465689600000, 1465776000000, 1465862400000, 1465948800000, 1466035200000, 1466121600000, 1466208000000, 1466294400000, 1466380800000, 1466467200000, 1466553600000, 1466640000000, 1466726400000, 1466812800000, 1466899200000, 1466985600000];
    82.  
    83. var firefox46 = {
    84. ips: [105033, 68639, 70514, 52033, 54284, 55281, 65646, 129225, 57026, 80650, 68431, 67611, 58808, 98828, 52697, 66024, 81819, 36537, 18449, 14476, 16947, 13129, 18601, 9601, 10010, 6721, 9076, 7183, 4481, 4163, 6329, 4627, 2273, 2446],
    85. errors: [581709, 599207, 560855, 577347, 450640, 502702, 673812, 648815, 681907, 678205, 680293, 584835, 609466, 716579, 731340, 656795, 438526, 342905, 228377, 147886, 159924, 132810, 142360, 108443, 58452, 61142, 54958, 75664, 56928, 41196, 32403, 29316, 22534, 18591]
    86. };
    87.  
    88. var firefox47 = {
    89. errors: [8210, 11169, 66456, 127063, 212732, 276359, 394463, 497394, 598650, 649893, 613827, 552797, 465394, 407681, 571281, 619941, 672898, 818924, 644163, 623913, 539337],
    90.  
    91. ips: [1760, 1521, 9536, 17108, 21630, 24546, 34635, 56174, 66223, 96505, 49468, 67611, 54284, 75652, 54546, 48764, 70349, 115215, 60370, 58427, 45899]
    92. };
    93.  
    94. firefox46.errorsOverall = firefox46.errors.reduce(function(a, b) {
    95. return a + b;
    96. });
    97.  
    98. firefox46.ipsOverall = firefox46.ips.reduce(function(a, b) {
    99. return a + b;
    100. });
    101.  
    102. var firefox47_overall = {
    103. globals: {
    104. fontFamily: 'Open Sans'
    105. },
    106. border: '1px solid #ddd',
    107. plot: {
    108. alphaArea: 1,
    109. marker: {
    110. visible: false
    111. },
    112. tooltip: {
    113. visible: false
    114. }
    115. },
    116. plotarea: {
    117. margin: '62px 52px 52px'
    118. },
    119. title: {
    120. backgroundColor: 'rgb(247, 247, 247)',
    121. border: '1px solid #ddd',
    122. color: 'rgb(44, 50, 55)',
    123. fontSize: 18,
    124. height: 40,
    125. padding: 10,
    126. text: 'Firefox 46 & 47: Errors vs IPs',
    127. textAlign: 'left'
    128. },
    129. type: "area",
    130. scaleY: {
    131. short: true
    132. },
    133. scaleX: {
    134. values: dates,
    135. transform: {
    136. type: 'date',
    137. all: '%dd-%M-%y (%D)'
    138. },
    139. markers: [{
    140. alpha: 0.1,
    141. backgroundColor: '#000',
    142. type: 'area',
    143. range: [5, 6]
    144. },
    145. {
    146. alpha: 0.1,
    147. backgroundColor: '#000',
    148. type: 'area',
    149. range: [12, 13]
    150. },
    151. {
    152. alpha: 0.1,
    153. backgroundColor: '#000',
    154. type: 'area',
    155. range: [19, 20]
    156. },
    157. {
    158. alpha: 1,
    159. lineColor: '#EF6C00',
    160. lineWidth: 3,
    161. type: 'line',
    162. range: [2],
    163. label: {
    164. angle: 0,
    165. backgroundColor: '#EF6C00',
    166. color: '#FFF',
    167. offsetY: -288,
    168. offsetX: -45,
    169. text: 'Firefox 47 Released'
    170. }
    171. }
    172. ]
    173. },
    174. legend: {
    175. toggleAction: 'none',
    176. marginTop: 61
    177. },
    178. mediaRules: [{
    179. maxWidth: 700,
    180. legend: {
    181. visible: false
    182. }
    183. }],
    184. crosshairX: {
    185. plotLabel: {
    186. backgroundColor: '#FFF',
    187. border: '1px solid #ddd',
    188. fontSize: 16,
    189. thousandsSeparator: ','
    190. }
    191. },
    192. series: [{
    193. backgroundColor: '#00539F',
    194. lineColor: '#00539F',
    195. lineWidth: 0,
    196. text: 'Errors',
    197. values: firefox46.errors,
    198. legendItem: {
    199. text: 'Firefox 46 Errors'
    200. }
    201. },
    202. {
    203. backgroundColor: '#0095DD',
    204. lineColor: '#0095DD',
    205. lineWidth: 0,
    206. text: 'IPs',
    207. values: firefox46.ips,
    208. legendItem: {
    209. text: 'Firefox 46 IPs'
    210. }
    211. },
    212. {
    213. backgroundColor: '#E66000',
    214. lineColor: '#E66000',
    215. lineWidth: 0,
    216. border: '1px solid #ddd',
    217. thousandsSeparator: ',',
    218. text: 'Errors',
    219. values: firefox47.errors,
    220. visible: false,
    221. legendItem: {
    222. text: 'Firefox 47 Errors'
    223. }
    224. },
    225. {
    226. backgroundColor: '#FF9500',
    227. lineColor: '#FF9500',
    228. lineWidth: 0,
    229. text: 'IPs',
    230. values: firefox47.ips,
    231. visible: false,
    232. legendItem: {
    233. text: 'Firefox 47 IPs'
    234. }
    235. },
    236. ]
    237. };
    238.  
    239. var firefox47_detail = {
    240. globals: {
    241. fontFamily: 'Open Sans'
    242. },
    243. border: '1px solid #ddd',
    244. plot: {
    245. slice: 70,
    246. valueBox: {
    247. visible: true,
    248. placement: 'out',
    249. fontSize: 11,
    250. thousandsSeparator: ',',
    251. offsetR: 15,
    252. text: '%t: %v',
    253. rules: [{
    254. rule: '%p == 0',
    255. placement: 'center',
    256. offsetY: -17
    257. },
    258. {
    259. rule: '%p == 1',
    260. placement: 'center',
    261. offsetY: -7
    262. },
    263. {
    264. rule: '%p == 2',
    265. placement: 'center',
    266. offsetY: 7
    267. },
    268. {
    269. rule: '%p == 3',
    270. placement: 'center',
    271. offsetY: 17
    272. }
    273. ]
    274. },
    275. tooltip: {
    276. visible: false
    277. }
    278. },
    279. plotarea: {
    280. margin: '62px 52px 52px'
    281. },
    282. title: {
    283. backgroundColor: 'rgb(247, 247, 247)',
    284. border: '1px solid #ddd',
    285. color: 'rgb(44, 50, 55)',
    286. fontSize: 18,
    287. height: 40,
    288. padding: 10,
    289. text: 'Firefox 46 & 47 Details - Errors vs IPs',
    290. textAlign: 'left'
    291. },
    292. subtitle: {
    293. text: 'Overall',
    294. textAlign: 'left',
    295. x: 6,
    296. y: 40
    297. },
    298. type: 'pie',
    299. series: [{
    300. backgroundColor: '#00539F',
    301. text: 'Errors',
    302. values: [firefox46.errorsOverall]
    303. },
    304. {
    305. backgroundColor: '#0095DD',
    306. text: 'IPs',
    307. values: [firefox46.ipsOverall]
    308. },
    309. {
    310. backgroundColor: '#E66000',
    311. text: 'Errors',
    312. values: [firefox47.errorsOverall]
    313. },
    314. {
    315. backgroundColor: '#FF9500',
    316. text: 'IPs',
    317. values: [firefox47.ipsOverall]
    318. },
    319. ]
    320. };
    321.  
    322. zingchart.render({
    323. id: 'firefox47-overall',
    324. data: firefox47_overall,
    325. height: 400,
    326. events: {
    327. 'guide_mousemove': function(p) {
    328.  
    329. // If it's a new index...
    330. if (lastIndex && lastIndex !== p.items[0].nodeindex || !lastIndex) {
    331.  
    332. // Update the last index
    333. lastIndex = p.items[0].nodeindex;
    334.  
    335. var detailJSON = zingchart.exec('firefox47-detail', 'getdata');
    336.  
    337. for (var i = 0; i < p.items.length; i++) {
    338. detailJSON.graphset[0].series[p.items[i].plotindex].values = [p.items[i].value];
    339. }
    340.  
    341. detailJSON.graphset[0].subtitle.text = new Date(p.items[0].keyvalue).toDateString();
    342.  
    343. zingchart.exec('firefox47-detail', 'setdata', {
    344. data: detailJSON
    345. });
    346. }
    347. }
    348. }
    349. });
    350.  
    351. zingchart.render({
    352. id: 'firefox47-detail',
    353. data: firefox47_detail,
    354. height: 400
    355. });
    356.  
    357. document.getElementById('errors-checkbox-46').addEventListener('click', toggleGraphs);
    358. document.getElementById('ips-checkbox-46').addEventListener('click', toggleGraphs);
    359. document.getElementById('errors-checkbox-47').addEventListener('click', toggleGraphs);
    360. document.getElementById('ips-checkbox-47').addEventListener('click', toggleGraphs);
    361.  
    362. var updateArray = [{
    363. visible: true
    364. },
    365. {
    366. visible: true
    367. },
    368. {
    369. visible: false
    370. },
    371. {
    372. visible: false
    373. }
    374. ];
    375.  
    376. function toggleGraphs() {
    377. var plotIndex = 0;
    378. //determine plot index
    379. switch (this.id) {
    380. case 'errors-checkbox-46':
    381. plotIndex = 0;
    382. break;
    383. case 'ips-checkbox-46':
    384. plotIndex = 1;
    385. break;
    386. case 'errors-checkbox-47':
    387. plotIndex = 2;
    388. break;
    389. case 'ips-checkbox-47':
    390. plotIndex = 3;
    391. break;
    392. }
    393.  
    394. if (this.checked) {
    395. updateArray[plotIndex].visible = true;
    396. zingchart.exec('firefox47-overall', 'appendseriesdata', {
    397. data: updateArray
    398. });
    399. zingchart.exec('firefox47-detail', 'appendseriesdata', {
    400. data: updateArray
    401. });
    402. } else {
    403. updateArray[plotIndex].visible = false;
    404. zingchart.exec('firefox47-overall', 'appendseriesdata', {
    405. data: updateArray
    406. });
    407. zingchart.exec('firefox47-detail', 'appendseriesdata', {
    408. data: updateArray
    409. });
    410. }
    411. }
    412. </script>
    413. </body>
    414.  
    415. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    8.  
    9. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.  
    14. <div id='firefox47-overall'></div>
    15.  
    16. <div id="inputs">
    17. <div class="row">
    18. <div class="col">
    19. <input type="checkbox" id='errors-checkbox-46' checked>
    20. <label for='errors-checkbox-46'>46 Errors</label>
    21. </div>
    22. <div class="col">
    23. <input type="checkbox" id='ips-checkbox-46' checked>
    24. <label for='ips-checkbox-46'>46 IP's</label>
    25. </div>
    26. <div class="col">
    27. <input type="checkbox" id='errors-checkbox-47'>
    28. <label for='errors-checkbox-47'>47 Errors</label>
    29. </div>
    30. <div class="col">
    31. <input type="checkbox" id='ips-checkbox-47'>
    32. <label for='ips-checkbox-47'>47 IP's</label>
    33. </div>
    34. </div>
    35. </div>
    36.  
    37. <div id='firefox47-detail'></div>
    38.  
    39.  
    40. </body>
    41.  
    42. </html>
    1. #inputs {
    2. background: #F7F7F7;
    3. border: 1px solid #DDD;
    4. border-top: none;
    5. border-bottom-left-radius: 4px;
    6. border-bottom-right-radius: 4px;
    7. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    8. font-family: Open Sans;
    9. padding: 1rem 1rem;
    10. margin: 0 0 1.5rem 0;
    11. max-width: 600px;
    12. width: 100%;
    13. }
    14.  
    15. label {
    16. cursor: pointer;
    17. }
    18.  
    19. .row {
    20. display: -webkit-flex;
    21. display: -ms-flexbox;
    22. display: flex;
    23. }
    24.  
    25. .row+.row {
    26. margin-top: 1rem;
    27. }
    28.  
    29. .col {
    30. -webkit-flex: 1;
    31. -ms-flex: 1;
    32. flex: 1;
    33. }
    1. var lastIndex = null;
    2.  
    3. var totalUsage = [74844938, 67916452, 51397750, 54840784, 71261006, 71914665, 69877920, 69797876, 64015606, 47538624, 53405488, 71237670, 69854483, 67229795, 65940984, 59888233, 46967265, 51144680, 63681846, 70527432, 97712043, 90345661, 67326277, 54836594, 59923602, 78117849, 73954211, 71816590, 72253684, 64360719, 50948147, 54739648, 69613566, 70720606, 72607842, 69519811, 64228413, 50706194, 55072683, 68672444, 77385133, 82989307, 80641084, 79055948, 62823593, 71047012];
    4.  
    5. var dates = [1465257600000, 1465344000000, 1465430400000, 1465516800000, 1465603200000, 1465689600000, 1465776000000, 1465862400000, 1465948800000, 1466035200000, 1466121600000, 1466208000000, 1466294400000, 1466380800000, 1466467200000, 1466553600000, 1466640000000, 1466726400000, 1466812800000, 1466899200000, 1466985600000];
    6.  
    7. var firefox46 = {
    8. ips: [105033, 68639, 70514, 52033, 54284, 55281, 65646, 129225, 57026, 80650, 68431, 67611, 58808, 98828, 52697, 66024, 81819, 36537, 18449, 14476, 16947, 13129, 18601, 9601, 10010, 6721, 9076, 7183, 4481, 4163, 6329, 4627, 2273, 2446],
    9. errors: [581709, 599207, 560855, 577347, 450640, 502702, 673812, 648815, 681907, 678205, 680293, 584835, 609466, 716579, 731340, 656795, 438526, 342905, 228377, 147886, 159924, 132810, 142360, 108443, 58452, 61142, 54958, 75664, 56928, 41196, 32403, 29316, 22534, 18591]
    10. };
    11.  
    12. var firefox47 = {
    13. errors: [8210, 11169, 66456, 127063, 212732, 276359, 394463, 497394, 598650, 649893, 613827, 552797, 465394, 407681, 571281, 619941, 672898, 818924, 644163, 623913, 539337],
    14.  
    15. ips: [1760, 1521, 9536, 17108, 21630, 24546, 34635, 56174, 66223, 96505, 49468, 67611, 54284, 75652, 54546, 48764, 70349, 115215, 60370, 58427, 45899]
    16. };
    17.  
    18. firefox46.errorsOverall = firefox46.errors.reduce(function(a, b) {
    19. return a + b;
    20. });
    21.  
    22. firefox46.ipsOverall = firefox46.ips.reduce(function(a, b) {
    23. return a + b;
    24. });
    25.  
    26. var firefox47_overall = {
    27. globals: {
    28. fontFamily: 'Open Sans'
    29. },
    30. border: '1px solid #ddd',
    31. plot: {
    32. alphaArea: 1,
    33. marker: {
    34. visible: false
    35. },
    36. tooltip: {
    37. visible: false
    38. }
    39. },
    40. plotarea: {
    41. margin: '62px 52px 52px'
    42. },
    43. title: {
    44. backgroundColor: 'rgb(247, 247, 247)',
    45. border: '1px solid #ddd',
    46. color: 'rgb(44, 50, 55)',
    47. fontSize: 18,
    48. height: 40,
    49. padding: 10,
    50. text: 'Firefox 46 & 47: Errors vs IPs',
    51. textAlign: 'left'
    52. },
    53. type: "area",
    54. scaleY: {
    55. short: true
    56. },
    57. scaleX: {
    58. values: dates,
    59. transform: {
    60. type: 'date',
    61. all: '%dd-%M-%y (%D)'
    62. },
    63. markers: [{
    64. alpha: 0.1,
    65. backgroundColor: '#000',
    66. type: 'area',
    67. range: [5, 6]
    68. },
    69. {
    70. alpha: 0.1,
    71. backgroundColor: '#000',
    72. type: 'area',
    73. range: [12, 13]
    74. },
    75. {
    76. alpha: 0.1,
    77. backgroundColor: '#000',
    78. type: 'area',
    79. range: [19, 20]
    80. },
    81. {
    82. alpha: 1,
    83. lineColor: '#EF6C00',
    84. lineWidth: 3,
    85. type: 'line',
    86. range: [2],
    87. label: {
    88. angle: 0,
    89. backgroundColor: '#EF6C00',
    90. color: '#FFF',
    91. offsetY: -288,
    92. offsetX: -45,
    93. text: 'Firefox 47 Released'
    94. }
    95. }
    96. ]
    97. },
    98. legend: {
    99. toggleAction: 'none',
    100. marginTop: 61
    101. },
    102. mediaRules: [{
    103. maxWidth: 700,
    104. legend: {
    105. visible: false
    106. }
    107. }],
    108. crosshairX: {
    109. plotLabel: {
    110. backgroundColor: '#FFF',
    111. border: '1px solid #ddd',
    112. fontSize: 16,
    113. thousandsSeparator: ','
    114. }
    115. },
    116. series: [{
    117. backgroundColor: '#00539F',
    118. lineColor: '#00539F',
    119. lineWidth: 0,
    120. text: 'Errors',
    121. values: firefox46.errors,
    122. legendItem: {
    123. text: 'Firefox 46 Errors'
    124. }
    125. },
    126. {
    127. backgroundColor: '#0095DD',
    128. lineColor: '#0095DD',
    129. lineWidth: 0,
    130. text: 'IPs',
    131. values: firefox46.ips,
    132. legendItem: {
    133. text: 'Firefox 46 IPs'
    134. }
    135. },
    136. {
    137. backgroundColor: '#E66000',
    138. lineColor: '#E66000',
    139. lineWidth: 0,
    140. border: '1px solid #ddd',
    141. thousandsSeparator: ',',
    142. text: 'Errors',
    143. values: firefox47.errors,
    144. visible: false,
    145. legendItem: {
    146. text: 'Firefox 47 Errors'
    147. }
    148. },
    149. {
    150. backgroundColor: '#FF9500',
    151. lineColor: '#FF9500',
    152. lineWidth: 0,
    153. text: 'IPs',
    154. values: firefox47.ips,
    155. visible: false,
    156. legendItem: {
    157. text: 'Firefox 47 IPs'
    158. }
    159. },
    160. ]
    161. };
    162.  
    163. var firefox47_detail = {
    164. globals: {
    165. fontFamily: 'Open Sans'
    166. },
    167. border: '1px solid #ddd',
    168. plot: {
    169. slice: 70,
    170. valueBox: {
    171. visible: true,
    172. placement: 'out',
    173. fontSize: 11,
    174. thousandsSeparator: ',',
    175. offsetR: 15,
    176. text: '%t: %v',
    177. rules: [{
    178. rule: '%p == 0',
    179. placement: 'center',
    180. offsetY: -17
    181. },
    182. {
    183. rule: '%p == 1',
    184. placement: 'center',
    185. offsetY: -7
    186. },
    187. {
    188. rule: '%p == 2',
    189. placement: 'center',
    190. offsetY: 7
    191. },
    192. {
    193. rule: '%p == 3',
    194. placement: 'center',
    195. offsetY: 17
    196. }
    197. ]
    198. },
    199. tooltip: {
    200. visible: false
    201. }
    202. },
    203. plotarea: {
    204. margin: '62px 52px 52px'
    205. },
    206. title: {
    207. backgroundColor: 'rgb(247, 247, 247)',
    208. border: '1px solid #ddd',
    209. color: 'rgb(44, 50, 55)',
    210. fontSize: 18,
    211. height: 40,
    212. padding: 10,
    213. text: 'Firefox 46 & 47 Details - Errors vs IPs',
    214. textAlign: 'left'
    215. },
    216. subtitle: {
    217. text: 'Overall',
    218. textAlign: 'left',
    219. x: 6,
    220. y: 40
    221. },
    222. type: 'pie',
    223. series: [{
    224. backgroundColor: '#00539F',
    225. text: 'Errors',
    226. values: [firefox46.errorsOverall]
    227. },
    228. {
    229. backgroundColor: '#0095DD',
    230. text: 'IPs',
    231. values: [firefox46.ipsOverall]
    232. },
    233. {
    234. backgroundColor: '#E66000',
    235. text: 'Errors',
    236. values: [firefox47.errorsOverall]
    237. },
    238. {
    239. backgroundColor: '#FF9500',
    240. text: 'IPs',
    241. values: [firefox47.ipsOverall]
    242. },
    243. ]
    244. };
    245.  
    246. zingchart.render({
    247. id: 'firefox47-overall',
    248. data: firefox47_overall,
    249. height: 400,
    250. events: {
    251. 'guide_mousemove': function(p) {
    252.  
    253. // If it's a new index...
    254. if (lastIndex && lastIndex !== p.items[0].nodeindex || !lastIndex) {
    255.  
    256. // Update the last index
    257. lastIndex = p.items[0].nodeindex;
    258.  
    259. var detailJSON = zingchart.exec('firefox47-detail', 'getdata');
    260.  
    261. for (var i = 0; i < p.items.length; i++) {
    262. detailJSON.graphset[0].series[p.items[i].plotindex].values = [p.items[i].value];
    263. }
    264.  
    265. detailJSON.graphset[0].subtitle.text = new Date(p.items[0].keyvalue).toDateString();
    266.  
    267. zingchart.exec('firefox47-detail', 'setdata', {
    268. data: detailJSON
    269. });
    270. }
    271. }
    272. }
    273. });
    274.  
    275. zingchart.render({
    276. id: 'firefox47-detail',
    277. data: firefox47_detail,
    278. height: 400
    279. });
    280.  
    281. document.getElementById('errors-checkbox-46').addEventListener('click', toggleGraphs);
    282. document.getElementById('ips-checkbox-46').addEventListener('click', toggleGraphs);
    283. document.getElementById('errors-checkbox-47').addEventListener('click', toggleGraphs);
    284. document.getElementById('ips-checkbox-47').addEventListener('click', toggleGraphs);
    285.  
    286. var updateArray = [{
    287. visible: true
    288. },
    289. {
    290. visible: true
    291. },
    292. {
    293. visible: false
    294. },
    295. {
    296. visible: false
    297. }
    298. ];
    299.  
    300. function toggleGraphs() {
    301. var plotIndex = 0;
    302. //determine plot index
    303. switch (this.id) {
    304. case 'errors-checkbox-46':
    305. plotIndex = 0;
    306. break;
    307. case 'ips-checkbox-46':
    308. plotIndex = 1;
    309. break;
    310. case 'errors-checkbox-47':
    311. plotIndex = 2;
    312. break;
    313. case 'ips-checkbox-47':
    314. plotIndex = 3;
    315. break;
    316. }
    317.  
    318. if (this.checked) {
    319. updateArray[plotIndex].visible = true;
    320. zingchart.exec('firefox47-overall', 'appendseriesdata', {
    321. data: updateArray
    322. });
    323. zingchart.exec('firefox47-detail', 'appendseriesdata', {
    324. data: updateArray
    325. });
    326. } else {
    327. updateArray[plotIndex].visible = false;
    328. zingchart.exec('firefox47-overall', 'appendseriesdata', {
    329. data: updateArray
    330. });
    331. zingchart.exec('firefox47-detail', 'appendseriesdata', {
    332. data: updateArray
    333. });
    334. }
    335. }