• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    8. <style>
    9. #interactive {
    10. margin-bottom: 10px;
    11. }
    12.  
    13. .hidden-prompt {
    14. display: none;
    15. }
    16.  
    17. .fa-circle-o {
    18. color: #c30;
    19. }
    20.  
    21. .fa-check-circle-o {
    22. color: #7ca82b;
    23. }
    24.  
    25. [id^=list] {
    26. background-color: #F4F4F4;
    27. border-radius: 4px;
    28. padding: 10px;
    29. height: 110px;
    30. }
    31.  
    32. #list2 {
    33. display: none;
    34. }
    35.  
    36. #list3 {
    37. display: none;
    38. }
    39.  
    40. #list4 {
    41. display: none;
    42. }
    43.  
    44. #interactive-graph-id0-objects-top circle {
    45. animation: fadein 2s;
    46. -moz-animation: fadein 2s;
    47. /* Firefox */
    48. -webkit-animation: fadein 2s;
    49. /* Safari and Chrome */
    50. -o-animation: fadein 2s;
    51. /* Opera */
    52. }
    53.  
    54. @keyframes fadein {
    55. from {
    56. opacity: 0;
    57. }
    58.  
    59. to {
    60. opacity: 1;
    61. }
    62. }
    63.  
    64. @-moz-keyframes fadein {
    65.  
    66. /* Firefox */
    67. from {
    68. opacity: 0;
    69. }
    70.  
    71. to {
    72. opacity: 1;
    73. }
    74. }
    75.  
    76. @-webkit-keyframes fadein {
    77.  
    78. /* Safari and Chrome */
    79. from {
    80. opacity: 0;
    81. }
    82.  
    83. to {
    84. opacity: 1;
    85. }
    86. }
    87.  
    88. @-o-keyframes fadein {
    89.  
    90. /* Opera */
    91. from {
    92. opacity: 0;
    93. }
    94.  
    95. to {
    96. opacity: 1;
    97. }
    98. }
    99.  
    100. [id^=interactive-graph-id0-shape-noanim] {
    101. animation: none !important;
    102. -moz-animation: none !important;
    103. /* Firefox */
    104. -webkit-animation: none !important;
    105. /* Safari and Chrome */
    106. -o-animation: none !important;
    107. /* Opera */
    108. }
    109.  
    110. [id^=list] {
    111. transition: height 2s;
    112. -moz-transition: height 2s;
    113. /* Firefox 4 */
    114. -webkit-transition: height 2s;
    115. /* Safari and Chrome */
    116. -o-transition: height 2s;
    117. /* Opera */
    118. }
    119.  
    120. body {
    121. text-align: center;
    122. font-family: Helvetica, Arial, sans-serif;
    123. }
    124. </style>
    125.  
    126. <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    127. <style></style>
    128. </head>
    129.  
    130. <body>
    131. <div id='interactive'></div>
    132. <div style="min-height:430px;">
    133. <div id="interactive" class="chart-placeholder"></div>
    134. <div class="centered" id="list1">
    135. <div>
    136. <div><i class="fa fa-circle-o" id="action1-1"></i> <span>Hover over a bar to see the tooltip.</span></div>
    137. <div><i class="fa fa-circle-o" id="action1-2"></i> <span>Click on a legend item to toggle products.</span></div>
    138. <div class="hidden-prompt" id="prompt1-3"><i class="fa fa-circle-o" id="action1-3"></i> <span>Now, click on a bar segment.</span></div>
    139. </div>
    140. </div>
    141. <div id="list2">
    142. <div class="centered">
    143. <div id="info1"></div>
    144. <div><i class="fa fa-circle-o" id="action2-2"></i> <span>Click and drag to zoom, or use the zoom controls.</span></div>
    145. <div><i class="fa fa-circle-o" id="action2-1"></i> <span>Drag the scroll bar or preview handles.</span></div>
    146. <div class="hidden-prompt" id="prompt2-3"><i class="fa fa-circle-o" id="action2-3"></i> <span>Now, select a product's bar.</span></div>
    147. </div>
    148. </div>
    149. <div id="list3">
    150. <div class="centered">
    151. <div>This chart is showing a single product in two charts: one by revenue, one by number of transactions.
    152. <br /><i class="fa fa-circle-o" id="action3-1"></i> <span>Hover over a chart to see the shared crosshair of the other chart.</span>
    153. </div>
    154. <div class="hidden-prompt" id="prompt3-2"><i class="fa fa-circle-o" id="action3-2"></i> <span>Now, click on a transaction to see sales by location.</span></div>
    155. </div>
    156. </div>
    157. <div id="list4">Thanks for taking a look at some of the interactive features ZingChart has to offer! <a href="#" id="restartBtn">Start over?</a></div>
    158. </div>
    159. </div>
    160. <script>
    161. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    162. var oSavedChart2, oSavedChart3;
    163. var aLabels = [];
    164. var aBurgers = [396913, 389658.5, 372542.5, 416993.5, 415475.5, 491029, 380748.5, 432591.5, 408606, 496556.5, 439395, 421448.5, 472752.5, 390659.5, 481052, 368043.5, 388685, 421888.5, 335830, 404629.5, 430138.5, 380231.5, 476338.5, 445164.5, 400559.5, 381755, 361256.5, 336495.5, 417202.5, 417472, 421107.5, 345471.5, 420084.5, 403199.5, 349200.5, 430419];
    165. var aFries = [131305.5, 120313.5, 96967.5, 104880, 113172, 112639.5, 121602, 121084.5, 108736.5, 105789, 117139.5, 117682.5, 141787.5, 104947.5, 99141, 115342.5, 114259.5, 117624, 119613, 116079, 125955, 119406, 118629, 107458.5, 104362.5, 101518.5, 104380.5, 113367, 122548.5, 112105.5, 108640.5, 119797.5, 112216.5, 98821.5, 108972, 110578.5];
    166. var aShakes = [189745, 209532.5, 198027.5, 197210, 193497.5, 185797.5, 194602.5, 183852.5, 158705, 195552.5, 185767.5, 183040, 178495, 212522.5, 204565, 183115, 202615, 191275, 189595, 200705, 194557.5, 200637.5, 182547.5, 211557.5, 162640, 199110, 185422.5, 210700, 191800, 171335, 182220, 168185, 194437.5, 207652.5, 188045, 194057.5];
    167. var oDefaults = {
    168. "root": {
    169. "gui": {
    170. "context-menu": {
    171. "button": {
    172. "visible": false
    173. },
    174. "gear": {
    175. "visible": false
    176. }
    177. }
    178. }
    179. },
    180. "graph": {
    181. "tooltip": {
    182. "shadow": 0,
    183. "border-radius": 3
    184. },
    185. "crosshair-x": {
    186. "line-color": "white",
    187. "plot-label": {
    188. "border-radius": 3
    189. },
    190. "scale-label": {
    191. "visible": 0
    192. }
    193. },
    194. "background-color": "none",
    195. "border-color": "#eee",
    196. "border-radius": 3,
    197. "border-width": 1,
    198. "scale-x": {
    199. "guide": {
    200. "visible": 0
    201. },
    202. "alpha": 0.5,
    203. "line-color": "#5E5C5B",
    204. "item": {
    205. "color": "#5E5C5B"
    206. },
    207. "tick": {
    208. "line-color": "#5E5C5B",
    209. "alpha": 0.8
    210. },
    211. "items-overlap": true
    212. },
    213. "scale-y": {
    214. "guide": {
    215. "line-width": 1,
    216. "-line-style": "dashed"
    217. },
    218. "line-color": "none",
    219. "item": {
    220. "color": "#5E5C5B"
    221. },
    222. "tick": {
    223. "visible": false
    224. }
    225. },
    226. "legend": {
    227. "marker": {
    228. "type": "circle"
    229. },
    230. "layout": "h",
    231. "background-color": "none",
    232. "border-color": "none",
    233. "shadow": {
    234. "visible": 0
    235. },
    236. "marker": {
    237. "border-color": "white"
    238. },
    239. "item": {
    240. "color": "#5E5C5B"
    241. },
    242. "y": "8.5%"
    243. },
    244. "title": {
    245. "color": "#5E5C5B",
    246. "background-color": "none",
    247. "height": 24,
    248. "text-align": "left",
    249. "font-weight": "none"
    250. }
    251. }
    252. };
    253. var oChart = {
    254. "type": "bar",
    255. "utc": 1,
    256. "plot": {
    257. "stacked": 1,
    258. "tooltip": {
    259. "text": "%kt<br>%t: $%v",
    260. "decimals": 2,
    261. "thousands-separator": ","
    262. },
    263. "-animation": {
    264. "delay": 10,
    265. "effect": "1",
    266. "speed": "200",
    267. "method": "0",
    268. "sequence": "0",
    269. "attributes": {
    270.  
    271. }
    272. }
    273. },
    274. "plotarea": {
    275. "margin-left": 70
    276. },
    277. "title": {
    278. "text": "Revenue by Month"
    279. },
    280. "legend": {
    281. "toggle-action": "remove"
    282. },
    283. "scale-y": {
    284. "format": "$%v",
    285. "thousands-separator": ","
    286. },
    287. "scale-x": {
    288. "values": ["Jan 2013", "Feb 2013", "Mar 2013", "Apr 2013", "May 2013", "Jun 2013", "Jul 2013", "Aug 2013", "Sep 2013", "Oct 2013", "Nov 2013", "Dec 2013", "Jan 2014", "Feb 2014", "Mar 2014", "Apr 2014", "May 2014", "Jun 2014", "Jul 2014", "Aug 2014", "Sep 2014", "Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015", "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015"]
    289. },
    290. "series": [{
    291. "values": aBurgers,
    292. "text": "Burgers"
    293. }, {
    294. "values": aFries,
    295. "text": "Fries"
    296. }, {
    297. "values": aShakes,
    298. "text": "Shakes"
    299. }]
    300. };
    301.  
    302. function level2(p, nDays) {
    303. var aBurgers = [],
    304. aFries = [],
    305. aShakes = [];
    306. aLabels = [];
    307. for (var n = 0; n < nDays; n++) {
    308. aBurgers.push((Math.random() * (500000 - 300000) + 300000) / nDays);
    309. aFries.push((Math.random() * (150000 - 100000) + 100000) / nDays);
    310. aShakes.push((Math.random() * (220000 - 160000) + 160000) / nDays);
    311. aLabels.push(p.scaletext.slice(0, 3) + " " + (n + 1) + ",<br>" + p.scaletext.slice(4, 8));
    312. }
    313. var oLevel2 = {
    314. "type": "bar",
    315. "plot": {
    316. "tooltip": {
    317. "text": "%t: $%v",
    318. "decimals": 2,
    319. "thousands-separator": ","
    320. }
    321. },
    322. "plotarea": {
    323. "margin-left": 70,
    324. "margin-bottom": 128
    325. },
    326. "title": {
    327. "text": "Revenue by Product by Day"
    328. },
    329. "legend": {
    330. "layout": "h"
    331. },
    332. "shapes": [{
    333. "type": "rectangle",
    334. "id": "up1",
    335. "z-index": 99,
    336. "width": 70,
    337. "height": 20,
    338. "border-width": 1,
    339. "border-color": "#5E5C5B",
    340. "border-radius": 8,
    341. "background-color": "white",
    342. "x": "90%",
    343. "y": 15,
    344. "cursor": "hand",
    345. "shadow": 1,
    346. "label": {
    347. "text": "Up A Level",
    348. "color": "#5E5C5B"
    349. }
    350. }, {
    351. "type": "rectangle",
    352. "id": "zoomout",
    353. "width": 40,
    354. "height": 20,
    355. "border-width": 1,
    356. "border-color": "#999",
    357. "border-radius-top-left": 8,
    358. "border-radius-bottom-left": 8,
    359. "background-color": "white",
    360. "x": "2.5%",
    361. "y": "10%",
    362. "cursor": "hand",
    363. "shadow": 1,
    364. "label": {
    365. "text": "-"
    366. }
    367. },
    368. {
    369. "type": "rectangle",
    370. "id": "zoomin",
    371. "width": 40,
    372. "height": 20,
    373. "border-width": 1,
    374. "border-color": "#999",
    375. "border-radius-top-right": 8,
    376. "border-radius-bottom-right": 8,
    377. "background-color": "white",
    378. "x": "6%",
    379. "y": "10%",
    380. "cursor": "hand",
    381. "shadow": 1,
    382. "label": {
    383. "text": "+"
    384. }
    385. }
    386. ],
    387. "scale-y": {
    388. "format": "$%v",
    389. "thousands-separator": ",",
    390. "max-value": 20000
    391. },
    392. "scale-x": {
    393. "values": aLabels,
    394. "zooming": 1
    395. },
    396. "scroll-x": {},
    397. "preview": {
    398. "margin-left": 70
    399. },
    400. "series": [{
    401. "values": aBurgers,
    402. "text": "Burgers"
    403. }, {
    404. "values": aFries,
    405. "text": "Fries"
    406. }, {
    407. "values": aShakes,
    408. "text": "Shakes"
    409. }]
    410. }
    411. return oLevel2;
    412. };
    413.  
    414. function level3(p, aChartValues) {
    415. var aLabelsNew = [];
    416. for (var n = 0; n < aLabels.length; n++) {
    417. aLabelsNew.push(aLabels[n].replace(/(<br>)/, ' '));
    418. }
    419. var aSeries = [],
    420. aSeries2 = [],
    421. aChartValues2 = [],
    422. title = null;
    423. if (p.plotindex == 0) {
    424. title = "Burgers";
    425. aSeries = [{
    426. "values": aChartValues[0],
    427. "text": "Burgers"
    428. }];
    429. for (var n = 0; n < aChartValues[0].length; n++) {
    430. aChartValues2.push(Math.floor(aChartValues[0][n] / 5.5));
    431. }
    432. aSeries2 = [{
    433. "values": aChartValues2,
    434. "text": "Burgers"
    435. }];
    436. } else if (p.plotindex == 1) {
    437. title = "Fries";
    438. aSeries = [{
    439. "values": aChartValues[1],
    440. "text": "Fries",
    441. "palette": 1
    442. }];
    443. for (var n = 0; n < aChartValues[1].length; n++) {
    444. aChartValues2.push(Math.floor(aChartValues[1][n] / 1.5));
    445. }
    446. aSeries2 = [{
    447. "values": aChartValues2,
    448. "text": "Fries",
    449. "palette": 1
    450. }];
    451. } else {
    452. title = "Shakes";
    453. aSeries = [{
    454. "values": aChartValues[2],
    455. "text": "Shakes",
    456. "palette": 2
    457. }];
    458. for (var n = 0; n < aChartValues[2].length; n++) {
    459. aChartValues2.push(Math.floor(aChartValues[2][n] / 2.5));
    460. }
    461. aSeries2 = [{
    462. "values": aChartValues2,
    463. "text": "Shakes",
    464. "palette": 2
    465. }];
    466. }
    467.  
    468. var oLevel3 = {
    469. "graphset": [{
    470. "type": "bar",
    471. "plot": {
    472. "tooltip": {
    473. "text": "%t: $%v",
    474. "decimals": 2,
    475. "thousands-separator": ",",
    476. "visible": 0
    477. }
    478. },
    479. "shapes": [{
    480. "type": "rectangle",
    481. "id": "up2",
    482. "z-index": 99,
    483. "width": 70,
    484. "height": 20,
    485. "border-width": 1,
    486. "border-color": "#5E5C5B",
    487. "border-radius": 8,
    488. "background-color": "white",
    489. "x": "90%",
    490. "y": 15,
    491. "cursor": "hand",
    492. "shadow": 1,
    493. "label": {
    494. "text": "Up A Level",
    495. "color": "#5E5C5B"
    496. }
    497. }],
    498. "plotarea": {
    499. "margin-bottom": "20%",
    500. "margin-top": "28%"
    501. },
    502. "title": {
    503. "text": "Revenue From " + title,
    504. },
    505. "legend": {
    506. "shared": 1,
    507. "y": "11%"
    508. },
    509. "scale-x": {
    510. "labels": aLabelsNew
    511. },
    512. "scale-y": {
    513. "format": "$%v"
    514. },
    515. "crosshair-x": {
    516. "shared": 1,
    517. "plot-label": {
    518. "text": "$%v",
    519. "thousands-separator": ",",
    520. "decimals": 2
    521. }
    522. },
    523. "series": aSeries
    524. }, {
    525. "type": "bar",
    526. "plot": {
    527. "tooltip": {
    528. "visible": 0
    529. }
    530. },
    531. "title": {
    532. "text": "Number of Transactions by Date Nationwide"
    533. },
    534. "plotarea": {
    535. "margin-bottom": "20%",
    536. "margin-top": "22%"
    537. },
    538. "legend": {
    539. "shared": 1,
    540. "visible": 0
    541. },
    542. "scale-x": {
    543. "labels": aLabelsNew
    544. },
    545. "crosshair-x": {
    546. "shared": 1,
    547. "plot-label": {
    548. "text": "%v %t Sold",
    549. "thousands-separator": ","
    550. }
    551. },
    552. "series": aSeries2
    553. }]
    554. };
    555. return oLevel3;
    556. };
    557.  
    558. function level4() {
    559. var oLevel4 = {
    560. "title": {
    561. "text": "Big Kahuna Burger Sales by Location"
    562. },
    563. "plotarea": {
    564. "margin-top": "20%"
    565. },
    566. "background-color": "#E7EFF1",
    567. "shapes": [
    568. /*{
    569. "type":"rectangle",
    570. "id":"up3",
    571. "z-index":99,
    572. "width":70,
    573. "height":20,
    574. "border-width":1,
    575. "border-color":"#666",
    576. "border-radius":8,
    577. "background-color":"#397CF8 #5F97FB",
    578. "x":"90%",
    579. "y":2,
    580. "cursor":"hand",
    581. "shadow":1,
    582. "label":{
    583. "text":"Up A Level",
    584. "color":"white"
    585. }
    586. },*/
    587. {
    588. "type": "circle",
    589. "id": "noanim1",
    590. "size": 5,
    591. "label": {
    592. "text": "Low",
    593. "width": 30,
    594. "offset-x": 24,
    595. "text-align": "left",
    596. "color": "#5E5C5B"
    597. },
    598. "background-color": "#FFDBDB",
    599. "border-color": "black",
    600. "border-width": 1,
    601. "x": "2%",
    602. "y": 40
    603. },
    604. {
    605. "type": "circle",
    606. "id": "noanim2",
    607. "size": 5,
    608. "label": {
    609. "text": "Medium",
    610. "width": 30,
    611. "offset-x": 24,
    612. "text-align": "left",
    613. "color": "#5E5C5B"
    614. },
    615. "background-color": "#FFB8B8",
    616. "border-color": "black",
    617. "border-width": 1,
    618. "x": "2%",
    619. "y": 60
    620. },
    621. {
    622. "type": "circle",
    623. "id": "noanim3",
    624. "size": 5,
    625. "label": {
    626. "text": "High",
    627. "width": 30,
    628. "offset-x": 24,
    629. "text-align": "left",
    630. "color": "#5E5C5B"
    631. },
    632. "background-color": "#D95D5D",
    633. "border-color": "black",
    634. "border-width": 1,
    635. "x": "2%",
    636. "y": 80
    637. },
    638. {
    639. "type": "circle",
    640. "id": "noanim4",
    641. "size": 5,
    642. "label": {
    643. "text": "Very High",
    644. "width": 30,
    645. "color": "#5E5C5B",
    646. "offset-x": 24,
    647. "text-align": "left"
    648. },
    649. "background-color": "#B53333",
    650. "border-color": "black",
    651. "border-width": 1,
    652. "x": "2%",
    653. "y": 100
    654. },
    655. {
    656. "type": "zingchart.maps",
    657. "options": {
    658. "id": "map",
    659. "name": "usa",
    660. "scale": true,
    661. "y": 14,
    662. "style": {
    663. "background-color": "rgb(203,224,168)",
    664. "shadow": 0,
    665. "label": {
    666. "visible": 0
    667. },
    668. "hover-state": {
    669. "background-color": "#A3BE74"
    670. },
    671. "tooltip": {
    672. "visible": 0
    673. }
    674. }
    675. }
    676. }
    677. ]
    678. };
    679. return oLevel4;
    680. };
    681.  
    682. function daysInMonth(month, year) {
    683. return new Date(year, month, 0).getDate();
    684. }
    685. var bZoomBuff = 0,
    686. bAction1_1 = 0,
    687. bAction1_2 = 0,
    688. bAction2_1 = 0,
    689. bAction2_2 = 0,
    690. bAction3_1 = 0;
    691. zingchart.MODULESDIR = "http://cdn.zingchart.io/lib/zingchart/modules/";
    692. zingchart.loadModules('maps,maps-usa');
    693. zingchart.render({
    694. id: 'interactive',
    695. width: '100%',
    696. height: 320,
    697. data: oChart,
    698. defaults: oDefaults,
    699. theme: "light",
    700. events: {
    701. shape_click: function(p) {
    702. switch (p.shapeid) {
    703. case "zoomin":
    704. zingchart.exec('interactive', 'zoomin');
    705. break;
    706. case "zoomout":
    707. zingchart.exec('interactive', 'zoomout');
    708. break;
    709. case "up1":
    710. //Reset Flags
    711. resetAll();
    712. //Back to level 1
    713. zingchart.exec('interactive', 'setdata', {
    714. data: oChart
    715. });
    716. //Fade 2 to 1
    717. setTimeout(function() {
    718. $("#list2").fadeOut(400, function() {
    719. $("#list1").fadeIn(400, function() {});
    720. });
    721. }, 200);
    722. break;
    723. case "up2":
    724. //reset flags
    725. resetAll();
    726. //back to level 2
    727. zingchart.exec('interactive', 'setdata', {
    728. data: oSavedChart2
    729. });
    730. //fade 3 to 2
    731. setTimeout(function() {
    732. $("#list3").fadeOut(400, function() {
    733. $("#list2").fadeIn(400, function() {});
    734. });
    735. }, 200);
    736. break;
    737. case "up3":
    738. //flags
    739. resetAll();
    740. //back to level 3
    741. zingchart.exec('interactive', 'setdata', {
    742. data: oSavedChart3
    743. });
    744. //list 4 to 3
    745. setTimeout(function() {
    746. $("#list4").fadeOut(400, function() {
    747. $("#list3").fadeIn(400, function() {});
    748. });
    749. }, 200);
    750. setTimeout(function() {
    751. zingchart.exec('interactive', 'removeobject', {
    752. cls: 'marker'
    753. });
    754. }, 3000);
    755. break;
    756. }
    757. },
    758. node_mouseover: function(p) {
    759. $('#action1-1').removeClass('fa-circle-o');
    760. $('#action1-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Hover over a bar to see the tooltip.</strike>');
    761. bAction1_1 = 1;
    762. checkComplete();
    763. },
    764. legend_item_click: function(p) {
    765. $('#action1-2').removeClass('fa-circle-o');
    766. $('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
    767. bAction1_2 = 1;
    768. checkComplete();
    769. },
    770. legend_marker_click: function(p) {
    771. $('#action1-2').removeClass('fa-circle-o');
    772. $('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
    773. bAction1_2 = 1;
    774. checkComplete();
    775. },
    776. node_click: function(p) {
    777. if (bAction1_1 && bAction1_2) {
    778. $('#action1-3').removeClass('fa-circle-o');
    779. $('#action1-3').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a bar segment.</strike>');
    780. var aIndexValues = [];
    781. for (var n = 0; n < 3; n++) {
    782. var iVal;
    783. iVal = zingchart.exec('interactive', 'getnodevalue', {
    784. plotindex: n,
    785. nodeindex: p.nodeindex
    786. });
    787. aIndexValues.push(iVal);
    788. }
    789. if (p.nodeindex < 12) {
    790. var iMonth = p.nodeindex + 1,
    791. iYear = 2013;
    792. } else if (p.nodeindex >= 12 && p.nodeindex < 24) {
    793. var iMonth = p.nodeindex - 11,
    794. iYear = 2014;
    795. } else {
    796. var iMonth = p.nodeindex - 23,
    797. iYear = 2015;
    798. }
    799. var nDays = daysInMonth(iMonth, iYear);
    800. zingchart.exec('interactive', 'setdata', {
    801. data: level2(p, nDays)
    802. });
    803. $('#info1').html('You are now viewing data for ' + p.scaletext + '.');
    804. setTimeout(function() {
    805. $("#list1").fadeOut(400, function() {
    806. $("#list2").fadeIn(400, function() {
    807. // Animation complete.
    808. });
    809. oSavedChart2 = zingchart.exec('interactive', 'getdata');
    810. });
    811. }, 200);
    812. bAction1_1 = 0, bAction1_2 = 0;
    813. }
    814. if (bAction2_1 && bAction2_2) {
    815. var aChartValues = zingchart.exec('interactive', 'getseriesvalues');
    816. $('#action2-3').removeClass('fa-circle-o');
    817. $('#action2-3').addClass('fa-check-circle-o ').next().replaceWith("<strike>Now, select a product's bar.</strike>");
    818. zingchart.exec('interactive', 'setdata', {
    819. data: level3(p, aChartValues)
    820. });
    821. setTimeout(function() {
    822. $("#list2").fadeOut(400, function() {
    823. $("#list3").fadeIn(400, function() {
    824. // Animation complete.
    825. });
    826. oSavedChart3 = zingchart.exec('interactive', 'getdata');
    827. });
    828. }, 200);
    829. bAction2_1 = 0, bAction2_2 = 0;
    830. }
    831. if (bAction3_1) {
    832. $('#action3-2').removeClass('fa-circle-o');
    833. $('#action3-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a transaction to see sales by location.</strike>');
    834. zingchart.exec('interactive', 'setdata', {
    835. data: level4()
    836. });
    837. setTimeout(function() {
    838. $("#list3").fadeOut(400, function() {
    839. $("#list4").fadeIn(400, function() {});
    840. });
    841. }, 200);
    842. $('#list2').css('display', 'none');
    843. //LonLats for rando cities across the US
    844. var aLonLat = [
    845. [-118.385450, 34.053300],
    846. [-117.878705, 33.820872],
    847. [-117.164594, 32.748663],
    848. [-122.272206, 37.809039],
    849. [-121.503163, 38.586083],
    850. [-119.767324, 36.742530],
    851. [-115.131093, 36.177030],
    852. [-122.673207, 45.532628],
    853. [-122.321645, 47.587005],
    854. [-116.213246, 43.623464],
    855. [-112.071401, 33.453573],
    856. [-106.600209, 35.123630],
    857. [-95.350209, 29.768327],
    858. [-97.745229, 30.267741],
    859. [-90.823842, 29.792165],
    860. [-90.065786, 29.954117],
    861. [-81.364614, 28.516140],
    862. [-82.457753, 27.945053],
    863. [-80.189077, 25.769364],
    864. [-78.892690, 33.705278],
    865. [-80.848256, 35.226902],
    866. [-78.640004, 35.781405],
    867. [-76.288930, 36.834913],
    868. [-77.431508, 37.539474],
    869. [-77.036000, 38.911673],
    870. [-75.157338, 39.963768],
    871. [-73.876058, 40.748623],
    872. [-72.684041, 41.760365],
    873. [-71.167928, 42.367994],
    874. [-71.409627, 41.829986],
    875. [-77.605916, 43.142394],
    876. [-83.011190, 39.953241],
    877. [-86.526815, 39.157021],
    878. [-94.590779, 39.122936],
    879. [-97.337361, 37.685247],
    880. [-97.513143, 35.462139],
    881. [-95.991536, 36.157074],
    882. [-92.278157, 34.743094],
    883. [-90.190755, 32.297944],
    884. [-86.806966, 33.533740],
    885. [-84.488851, 33.771514],
    886. [-84.286977, 33.900414],
    887. [-86.791860, 36.149312],
    888. [-85.737172, 38.257931],
    889. [-81.639272, 38.350610],
    890. [-157.858382, 21.302330]
    891. ];
    892. var aXY = [];
    893. for (var n = 0; n < aLonLat.length; n++) {
    894. aXY.push(zingchart.maps.getXY("map", aLonLat[n]));
    895. }
    896. var aShapes = [];
    897. for (var n = 0; n < aXY.length; n++) {
    898. var sBg, iColorVal = Math.floor(Math.random() * (5 - 1)) + 1;
    899. switch (iColorVal) {
    900. case 1:
    901. sBg = "#FFDBDB";
    902. break;
    903. case 2:
    904. sBg = "#FFB8B8";
    905. break;
    906. case 3:
    907. sBg = "#D95D5D";
    908. break;
    909. case 4:
    910. sBg = "#B53333";
    911. break;
    912. }
    913. var oShape = {
    914. "type": "circle",
    915. "size": 3,
    916. "cls": "marker",
    917. "border-width": 1,
    918. "border-color": "black",
    919. "background-color": sBg,
    920. "x": aXY[n][0],
    921. "y": aXY[n][1]
    922. }
    923. aShapes.push(oShape);
    924. }
    925. //Draw shapes
    926. setTimeout(function() {
    927. zingchart.exec('interactive', 'addobject', {
    928. type: "shape",
    929. data: aShapes
    930. });
    931. }, 1000);
    932. }
    933. },
    934. zoom: function(p) {
    935. if (p.scroll || p.preview) {
    936. $('#action2-1').removeClass('fa-circle-o');
    937. $('#action2-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Drag the scroll bar or preview handles.</strike>');
    938. bAction2_1 = 1;
    939. checkComplete2();
    940. } else {
    941. $('#action2-2').removeClass('fa-circle-o');
    942. $('#action2-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click and drag to zoom, or use the zoom controls.</strike>');
    943. bAction2_2 = 1;
    944. checkComplete2();
    945. }
    946. },
    947. guide_mousemove: function(p) {
    948. $('#action3-1').removeClass('fa-circle-o');
    949. $('#action3-1').addClass('fa-check-circle-o').next().replaceWith('<strike>Hover over a chart to see the shared crosshair of the other chart.</strike>');
    950. $('#prompt3-2').css('display', 'initial');
    951. bAction3_1 = 1;
    952. }
    953. }
    954. });
    955.  
    956. function checkComplete() {
    957. if (bAction1_1 && bAction1_2) {
    958. $('#prompt1-3').css('display', 'initial');
    959. }
    960. };
    961.  
    962. function checkComplete2() {
    963. if (bAction2_1 && bAction2_2) {
    964. $('#prompt2-3').css('display', 'initial');
    965. }
    966. };
    967.  
    968. function checkComplete3() {
    969. if (bAction3_1) {
    970. $('#prompt3-2').css('display', 'initial');
    971. }
    972. };
    973.  
    974. function resetAll() {
    975. //Reset progress flag
    976. bAction1_1 = 0, bAction1_2 = 0, bAction2_1 = 0, bAction2_2 = 0, bAction3_1 = 0;
    977. //Reset ticks and prompts
    978. $('[id^=action]').attr('class', 'fa fa-circle-o');
    979. $('[id^=prompt]').css('display', 'none');
    980. $('#action1-1').next().replaceWith('<span>Hover over a bar to see the tooltip.</span>');
    981. $('#action1-2').next().replaceWith('<span>Click on a legend item to toggle products.</span>');
    982. $('#action1-3').next().replaceWith('<span>Now, click on a bar segment.</span>');
    983. $('#action2-1').next().replaceWith('<span>Drag the scroll bar or preview handles.</span>');
    984. $('#action2-2').next().replaceWith('<span>Click and drag to zoom, or use the zoom controls.</span>');
    985. $('#action2-3').next().replaceWith("<span>Now, select a product's bar.</span>");
    986. $('#action3-1').next().replaceWith('<span>Hover over a chart to see the shared crosshair of the other chart.</span>');
    987. $('#action3-2').next().replaceWith('<span>Now, click on a transaction to see sales by location.</span>');
    988. //Remove markers
    989. setTimeout(function() {
    990. zingchart.exec('interactive', 'removeobject', {
    991. cls: 'marker'
    992. });
    993. }, 2000);
    994. };
    995. $('#restartBtn').click(function() {
    996. resetAll();
    997. zingchart.exec('interactive', 'setdata', {
    998. data: oChart
    999. });
    1000. zingchart.exec('interactive', 'removeobject', {
    1001. cls: 'marker'
    1002. });
    1003. setTimeout(function() {
    1004. $("#list4").fadeOut(400, function() {
    1005. $("#list1").fadeIn(400, function() {});
    1006. });
    1007. }, 200);
    1008. });
    1009. </script>
    1010. </body>
    1011.  
    1012. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    8. <style>
    9. #interactive {
    10. margin-bottom: 10px;
    11. }
    12.  
    13. .hidden-prompt {
    14. display: none;
    15. }
    16.  
    17. .fa-circle-o {
    18. color: #c30;
    19. }
    20.  
    21. .fa-check-circle-o {
    22. color: #7ca82b;
    23. }
    24.  
    25. [id^=list] {
    26. background-color: #F4F4F4;
    27. border-radius: 4px;
    28. padding: 10px;
    29. height: 110px;
    30. }
    31.  
    32. #list2 {
    33. display: none;
    34. }
    35.  
    36. #list3 {
    37. display: none;
    38. }
    39.  
    40. #list4 {
    41. display: none;
    42. }
    43.  
    44. #interactive-graph-id0-objects-top circle {
    45. animation: fadein 2s;
    46. -moz-animation: fadein 2s;
    47. /* Firefox */
    48. -webkit-animation: fadein 2s;
    49. /* Safari and Chrome */
    50. -o-animation: fadein 2s;
    51. /* Opera */
    52. }
    53.  
    54. @keyframes fadein {
    55. from {
    56. opacity: 0;
    57. }
    58.  
    59. to {
    60. opacity: 1;
    61. }
    62. }
    63.  
    64. @-moz-keyframes fadein {
    65.  
    66. /* Firefox */
    67. from {
    68. opacity: 0;
    69. }
    70.  
    71. to {
    72. opacity: 1;
    73. }
    74. }
    75.  
    76. @-webkit-keyframes fadein {
    77.  
    78. /* Safari and Chrome */
    79. from {
    80. opacity: 0;
    81. }
    82.  
    83. to {
    84. opacity: 1;
    85. }
    86. }
    87.  
    88. @-o-keyframes fadein {
    89.  
    90. /* Opera */
    91. from {
    92. opacity: 0;
    93. }
    94.  
    95. to {
    96. opacity: 1;
    97. }
    98. }
    99.  
    100. [id^=interactive-graph-id0-shape-noanim] {
    101. animation: none !important;
    102. -moz-animation: none !important;
    103. /* Firefox */
    104. -webkit-animation: none !important;
    105. /* Safari and Chrome */
    106. -o-animation: none !important;
    107. /* Opera */
    108. }
    109.  
    110. [id^=list] {
    111. transition: height 2s;
    112. -moz-transition: height 2s;
    113. /* Firefox 4 */
    114. -webkit-transition: height 2s;
    115. /* Safari and Chrome */
    116. -o-transition: height 2s;
    117. /* Opera */
    118. }
    119.  
    120. body {
    121. text-align: center;
    122. font-family: Helvetica, Arial, sans-serif;
    123. }
    124. </style>
    125.  
    126. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    127. </head>
    128.  
    129. <body>
    130. <div id='interactive'></div>
    131. <div style="min-height:430px;">
    132. <div id="interactive" class="chart-placeholder"></div>
    133. <div class="centered" id="list1">
    134. <div>
    135. <div><i class="fa fa-circle-o" id="action1-1"></i> <span>Hover over a bar to see the tooltip.</span></div>
    136. <div><i class="fa fa-circle-o" id="action1-2"></i> <span>Click on a legend item to toggle products.</span></div>
    137. <div class="hidden-prompt" id="prompt1-3"><i class="fa fa-circle-o" id="action1-3"></i> <span>Now, click on a bar segment.</span></div>
    138. </div>
    139. </div>
    140. <div id="list2">
    141. <div class="centered">
    142. <div id="info1"></div>
    143. <div><i class="fa fa-circle-o" id="action2-2"></i> <span>Click and drag to zoom, or use the zoom controls.</span></div>
    144. <div><i class="fa fa-circle-o" id="action2-1"></i> <span>Drag the scroll bar or preview handles.</span></div>
    145. <div class="hidden-prompt" id="prompt2-3"><i class="fa fa-circle-o" id="action2-3"></i> <span>Now, select a product's bar.</span></div>
    146. </div>
    147. </div>
    148. <div id="list3">
    149. <div class="centered">
    150. <div>This chart is showing a single product in two charts: one by revenue, one by number of transactions.
    151. <br /><i class="fa fa-circle-o" id="action3-1"></i> <span>Hover over a chart to see the shared crosshair of the other chart.</span>
    152. </div>
    153. <div class="hidden-prompt" id="prompt3-2"><i class="fa fa-circle-o" id="action3-2"></i> <span>Now, click on a transaction to see sales by location.</span></div>
    154. </div>
    155. </div>
    156. <div id="list4">Thanks for taking a look at some of the interactive features ZingChart has to offer! <a href="#" id="restartBtn">Start over?</a></div>
    157. </div>
    158. </div>
    159. </body>
    160.  
    161. </html>
    1.  
    1. var oSavedChart2, oSavedChart3;
    2. var aLabels = [];
    3. var aBurgers = [396913, 389658.5, 372542.5, 416993.5, 415475.5, 491029, 380748.5, 432591.5, 408606, 496556.5, 439395, 421448.5, 472752.5, 390659.5, 481052, 368043.5, 388685, 421888.5, 335830, 404629.5, 430138.5, 380231.5, 476338.5, 445164.5, 400559.5, 381755, 361256.5, 336495.5, 417202.5, 417472, 421107.5, 345471.5, 420084.5, 403199.5, 349200.5, 430419];
    4. var aFries = [131305.5, 120313.5, 96967.5, 104880, 113172, 112639.5, 121602, 121084.5, 108736.5, 105789, 117139.5, 117682.5, 141787.5, 104947.5, 99141, 115342.5, 114259.5, 117624, 119613, 116079, 125955, 119406, 118629, 107458.5, 104362.5, 101518.5, 104380.5, 113367, 122548.5, 112105.5, 108640.5, 119797.5, 112216.5, 98821.5, 108972, 110578.5];
    5. var aShakes = [189745, 209532.5, 198027.5, 197210, 193497.5, 185797.5, 194602.5, 183852.5, 158705, 195552.5, 185767.5, 183040, 178495, 212522.5, 204565, 183115, 202615, 191275, 189595, 200705, 194557.5, 200637.5, 182547.5, 211557.5, 162640, 199110, 185422.5, 210700, 191800, 171335, 182220, 168185, 194437.5, 207652.5, 188045, 194057.5];
    6. var oDefaults = {
    7. "root": {
    8. "gui": {
    9. "context-menu": {
    10. "button": {
    11. "visible": false
    12. },
    13. "gear": {
    14. "visible": false
    15. }
    16. }
    17. }
    18. },
    19. "graph": {
    20. "tooltip": {
    21. "shadow": 0,
    22. "border-radius": 3
    23. },
    24. "crosshair-x": {
    25. "line-color": "white",
    26. "plot-label": {
    27. "border-radius": 3
    28. },
    29. "scale-label": {
    30. "visible": 0
    31. }
    32. },
    33. "background-color": "none",
    34. "border-color": "#eee",
    35. "border-radius": 3,
    36. "border-width": 1,
    37. "scale-x": {
    38. "guide": {
    39. "visible": 0
    40. },
    41. "alpha": 0.5,
    42. "line-color": "#5E5C5B",
    43. "item": {
    44. "color": "#5E5C5B"
    45. },
    46. "tick": {
    47. "line-color": "#5E5C5B",
    48. "alpha": 0.8
    49. },
    50. "items-overlap": true
    51. },
    52. "scale-y": {
    53. "guide": {
    54. "line-width": 1,
    55. "-line-style": "dashed"
    56. },
    57. "line-color": "none",
    58. "item": {
    59. "color": "#5E5C5B"
    60. },
    61. "tick": {
    62. "visible": false
    63. }
    64. },
    65. "legend": {
    66. "marker": {
    67. "type": "circle"
    68. },
    69. "layout": "h",
    70. "background-color": "none",
    71. "border-color": "none",
    72. "shadow": {
    73. "visible": 0
    74. },
    75. "marker": {
    76. "border-color": "white"
    77. },
    78. "item": {
    79. "color": "#5E5C5B"
    80. },
    81. "y": "8.5%"
    82. },
    83. "title": {
    84. "color": "#5E5C5B",
    85. "background-color": "none",
    86. "height": 24,
    87. "text-align": "left",
    88. "font-weight": "none"
    89. }
    90. }
    91. };
    92. var oChart = {
    93. "type": "bar",
    94. "utc": 1,
    95. "plot": {
    96. "stacked": 1,
    97. "tooltip": {
    98. "text": "%kt<br>%t: $%v",
    99. "decimals": 2,
    100. "thousands-separator": ","
    101. },
    102. "-animation": {
    103. "delay": 10,
    104. "effect": "1",
    105. "speed": "200",
    106. "method": "0",
    107. "sequence": "0",
    108. "attributes": {
    109.  
    110. }
    111. }
    112. },
    113. "plotarea": {
    114. "margin-left": 70
    115. },
    116. "title": {
    117. "text": "Revenue by Month"
    118. },
    119. "legend": {
    120. "toggle-action": "remove"
    121. },
    122. "scale-y": {
    123. "format": "$%v",
    124. "thousands-separator": ","
    125. },
    126. "scale-x": {
    127. "values": ["Jan 2013", "Feb 2013", "Mar 2013", "Apr 2013", "May 2013", "Jun 2013", "Jul 2013", "Aug 2013", "Sep 2013", "Oct 2013", "Nov 2013", "Dec 2013", "Jan 2014", "Feb 2014", "Mar 2014", "Apr 2014", "May 2014", "Jun 2014", "Jul 2014", "Aug 2014", "Sep 2014", "Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015", "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015"]
    128. },
    129. "series": [{
    130. "values": aBurgers,
    131. "text": "Burgers"
    132. }, {
    133. "values": aFries,
    134. "text": "Fries"
    135. }, {
    136. "values": aShakes,
    137. "text": "Shakes"
    138. }]
    139. };
    140.  
    141. function level2(p, nDays) {
    142. var aBurgers = [],
    143. aFries = [],
    144. aShakes = [];
    145. aLabels = [];
    146. for (var n = 0; n < nDays; n++) {
    147. aBurgers.push((Math.random() * (500000 - 300000) + 300000) / nDays);
    148. aFries.push((Math.random() * (150000 - 100000) + 100000) / nDays);
    149. aShakes.push((Math.random() * (220000 - 160000) + 160000) / nDays);
    150. aLabels.push(p.scaletext.slice(0, 3) + " " + (n + 1) + ",<br>" + p.scaletext.slice(4, 8));
    151. }
    152. var oLevel2 = {
    153. "type": "bar",
    154. "plot": {
    155. "tooltip": {
    156. "text": "%t: $%v",
    157. "decimals": 2,
    158. "thousands-separator": ","
    159. }
    160. },
    161. "plotarea": {
    162. "margin-left": 70,
    163. "margin-bottom": 128
    164. },
    165. "title": {
    166. "text": "Revenue by Product by Day"
    167. },
    168. "legend": {
    169. "layout": "h"
    170. },
    171. "shapes": [{
    172. "type": "rectangle",
    173. "id": "up1",
    174. "z-index": 99,
    175. "width": 70,
    176. "height": 20,
    177. "border-width": 1,
    178. "border-color": "#5E5C5B",
    179. "border-radius": 8,
    180. "background-color": "white",
    181. "x": "90%",
    182. "y": 15,
    183. "cursor": "hand",
    184. "shadow": 1,
    185. "label": {
    186. "text": "Up A Level",
    187. "color": "#5E5C5B"
    188. }
    189. }, {
    190. "type": "rectangle",
    191. "id": "zoomout",
    192. "width": 40,
    193. "height": 20,
    194. "border-width": 1,
    195. "border-color": "#999",
    196. "border-radius-top-left": 8,
    197. "border-radius-bottom-left": 8,
    198. "background-color": "white",
    199. "x": "2.5%",
    200. "y": "10%",
    201. "cursor": "hand",
    202. "shadow": 1,
    203. "label": {
    204. "text": "-"
    205. }
    206. },
    207. {
    208. "type": "rectangle",
    209. "id": "zoomin",
    210. "width": 40,
    211. "height": 20,
    212. "border-width": 1,
    213. "border-color": "#999",
    214. "border-radius-top-right": 8,
    215. "border-radius-bottom-right": 8,
    216. "background-color": "white",
    217. "x": "6%",
    218. "y": "10%",
    219. "cursor": "hand",
    220. "shadow": 1,
    221. "label": {
    222. "text": "+"
    223. }
    224. }
    225. ],
    226. "scale-y": {
    227. "format": "$%v",
    228. "thousands-separator": ",",
    229. "max-value": 20000
    230. },
    231. "scale-x": {
    232. "values": aLabels,
    233. "zooming": 1
    234. },
    235. "scroll-x": {},
    236. "preview": {
    237. "margin-left": 70
    238. },
    239. "series": [{
    240. "values": aBurgers,
    241. "text": "Burgers"
    242. }, {
    243. "values": aFries,
    244. "text": "Fries"
    245. }, {
    246. "values": aShakes,
    247. "text": "Shakes"
    248. }]
    249. }
    250. return oLevel2;
    251. };
    252.  
    253. function level3(p, aChartValues) {
    254. var aLabelsNew = [];
    255. for (var n = 0; n < aLabels.length; n++) {
    256. aLabelsNew.push(aLabels[n].replace(/(<br>)/, ' '));
    257. }
    258. var aSeries = [],
    259. aSeries2 = [],
    260. aChartValues2 = [],
    261. title = null;
    262. if (p.plotindex == 0) {
    263. title = "Burgers";
    264. aSeries = [{
    265. "values": aChartValues[0],
    266. "text": "Burgers"
    267. }];
    268. for (var n = 0; n < aChartValues[0].length; n++) {
    269. aChartValues2.push(Math.floor(aChartValues[0][n] / 5.5));
    270. }
    271. aSeries2 = [{
    272. "values": aChartValues2,
    273. "text": "Burgers"
    274. }];
    275. } else if (p.plotindex == 1) {
    276. title = "Fries";
    277. aSeries = [{
    278. "values": aChartValues[1],
    279. "text": "Fries",
    280. "palette": 1
    281. }];
    282. for (var n = 0; n < aChartValues[1].length; n++) {
    283. aChartValues2.push(Math.floor(aChartValues[1][n] / 1.5));
    284. }
    285. aSeries2 = [{
    286. "values": aChartValues2,
    287. "text": "Fries",
    288. "palette": 1
    289. }];
    290. } else {
    291. title = "Shakes";
    292. aSeries = [{
    293. "values": aChartValues[2],
    294. "text": "Shakes",
    295. "palette": 2
    296. }];
    297. for (var n = 0; n < aChartValues[2].length; n++) {
    298. aChartValues2.push(Math.floor(aChartValues[2][n] / 2.5));
    299. }
    300. aSeries2 = [{
    301. "values": aChartValues2,
    302. "text": "Shakes",
    303. "palette": 2
    304. }];
    305. }
    306.  
    307. var oLevel3 = {
    308. "graphset": [{
    309. "type": "bar",
    310. "plot": {
    311. "tooltip": {
    312. "text": "%t: $%v",
    313. "decimals": 2,
    314. "thousands-separator": ",",
    315. "visible": 0
    316. }
    317. },
    318. "shapes": [{
    319. "type": "rectangle",
    320. "id": "up2",
    321. "z-index": 99,
    322. "width": 70,
    323. "height": 20,
    324. "border-width": 1,
    325. "border-color": "#5E5C5B",
    326. "border-radius": 8,
    327. "background-color": "white",
    328. "x": "90%",
    329. "y": 15,
    330. "cursor": "hand",
    331. "shadow": 1,
    332. "label": {
    333. "text": "Up A Level",
    334. "color": "#5E5C5B"
    335. }
    336. }],
    337. "plotarea": {
    338. "margin-bottom": "20%",
    339. "margin-top": "28%"
    340. },
    341. "title": {
    342. "text": "Revenue From " + title,
    343. },
    344. "legend": {
    345. "shared": 1,
    346. "y": "11%"
    347. },
    348. "scale-x": {
    349. "labels": aLabelsNew
    350. },
    351. "scale-y": {
    352. "format": "$%v"
    353. },
    354. "crosshair-x": {
    355. "shared": 1,
    356. "plot-label": {
    357. "text": "$%v",
    358. "thousands-separator": ",",
    359. "decimals": 2
    360. }
    361. },
    362. "series": aSeries
    363. }, {
    364. "type": "bar",
    365. "plot": {
    366. "tooltip": {
    367. "visible": 0
    368. }
    369. },
    370. "title": {
    371. "text": "Number of Transactions by Date Nationwide"
    372. },
    373. "plotarea": {
    374. "margin-bottom": "20%",
    375. "margin-top": "22%"
    376. },
    377. "legend": {
    378. "shared": 1,
    379. "visible": 0
    380. },
    381. "scale-x": {
    382. "labels": aLabelsNew
    383. },
    384. "crosshair-x": {
    385. "shared": 1,
    386. "plot-label": {
    387. "text": "%v %t Sold",
    388. "thousands-separator": ","
    389. }
    390. },
    391. "series": aSeries2
    392. }]
    393. };
    394. return oLevel3;
    395. };
    396.  
    397. function level4() {
    398. var oLevel4 = {
    399. "title": {
    400. "text": "Big Kahuna Burger Sales by Location"
    401. },
    402. "plotarea": {
    403. "margin-top": "20%"
    404. },
    405. "background-color": "#E7EFF1",
    406. "shapes": [
    407. /*{
    408. "type":"rectangle",
    409. "id":"up3",
    410. "z-index":99,
    411. "width":70,
    412. "height":20,
    413. "border-width":1,
    414. "border-color":"#666",
    415. "border-radius":8,
    416. "background-color":"#397CF8 #5F97FB",
    417. "x":"90%",
    418. "y":2,
    419. "cursor":"hand",
    420. "shadow":1,
    421. "label":{
    422. "text":"Up A Level",
    423. "color":"white"
    424. }
    425. },*/
    426. {
    427. "type": "circle",
    428. "id": "noanim1",
    429. "size": 5,
    430. "label": {
    431. "text": "Low",
    432. "width": 30,
    433. "offset-x": 24,
    434. "text-align": "left",
    435. "color": "#5E5C5B"
    436. },
    437. "background-color": "#FFDBDB",
    438. "border-color": "black",
    439. "border-width": 1,
    440. "x": "2%",
    441. "y": 40
    442. },
    443. {
    444. "type": "circle",
    445. "id": "noanim2",
    446. "size": 5,
    447. "label": {
    448. "text": "Medium",
    449. "width": 30,
    450. "offset-x": 24,
    451. "text-align": "left",
    452. "color": "#5E5C5B"
    453. },
    454. "background-color": "#FFB8B8",
    455. "border-color": "black",
    456. "border-width": 1,
    457. "x": "2%",
    458. "y": 60
    459. },
    460. {
    461. "type": "circle",
    462. "id": "noanim3",
    463. "size": 5,
    464. "label": {
    465. "text": "High",
    466. "width": 30,
    467. "offset-x": 24,
    468. "text-align": "left",
    469. "color": "#5E5C5B"
    470. },
    471. "background-color": "#D95D5D",
    472. "border-color": "black",
    473. "border-width": 1,
    474. "x": "2%",
    475. "y": 80
    476. },
    477. {
    478. "type": "circle",
    479. "id": "noanim4",
    480. "size": 5,
    481. "label": {
    482. "text": "Very High",
    483. "width": 30,
    484. "color": "#5E5C5B",
    485. "offset-x": 24,
    486. "text-align": "left"
    487. },
    488. "background-color": "#B53333",
    489. "border-color": "black",
    490. "border-width": 1,
    491. "x": "2%",
    492. "y": 100
    493. },
    494. {
    495. "type": "zingchart.maps",
    496. "options": {
    497. "id": "map",
    498. "name": "usa",
    499. "scale": true,
    500. "y": 14,
    501. "style": {
    502. "background-color": "rgb(203,224,168)",
    503. "shadow": 0,
    504. "label": {
    505. "visible": 0
    506. },
    507. "hover-state": {
    508. "background-color": "#A3BE74"
    509. },
    510. "tooltip": {
    511. "visible": 0
    512. }
    513. }
    514. }
    515. }
    516. ]
    517. };
    518. return oLevel4;
    519. };
    520.  
    521. function daysInMonth(month, year) {
    522. return new Date(year, month, 0).getDate();
    523. }
    524. var bZoomBuff = 0,
    525. bAction1_1 = 0,
    526. bAction1_2 = 0,
    527. bAction2_1 = 0,
    528. bAction2_2 = 0,
    529. bAction3_1 = 0;
    530. zingchart.MODULESDIR = "http://cdn.zingchart.io/lib/zingchart/modules/";
    531. zingchart.loadModules('maps,maps-usa');
    532. zingchart.render({
    533. id: 'interactive',
    534. width: '100%',
    535. height: 320,
    536. data: oChart,
    537. defaults: oDefaults,
    538. theme: "light",
    539. events: {
    540. shape_click: function(p) {
    541. switch (p.shapeid) {
    542. case "zoomin":
    543. zingchart.exec('interactive', 'zoomin');
    544. break;
    545. case "zoomout":
    546. zingchart.exec('interactive', 'zoomout');
    547. break;
    548. case "up1":
    549. //Reset Flags
    550. resetAll();
    551. //Back to level 1
    552. zingchart.exec('interactive', 'setdata', {
    553. data: oChart
    554. });
    555. //Fade 2 to 1
    556. setTimeout(function() {
    557. $("#list2").fadeOut(400, function() {
    558. $("#list1").fadeIn(400, function() {});
    559. });
    560. }, 200);
    561. break;
    562. case "up2":
    563. //reset flags
    564. resetAll();
    565. //back to level 2
    566. zingchart.exec('interactive', 'setdata', {
    567. data: oSavedChart2
    568. });
    569. //fade 3 to 2
    570. setTimeout(function() {
    571. $("#list3").fadeOut(400, function() {
    572. $("#list2").fadeIn(400, function() {});
    573. });
    574. }, 200);
    575. break;
    576. case "up3":
    577. //flags
    578. resetAll();
    579. //back to level 3
    580. zingchart.exec('interactive', 'setdata', {
    581. data: oSavedChart3
    582. });
    583. //list 4 to 3
    584. setTimeout(function() {
    585. $("#list4").fadeOut(400, function() {
    586. $("#list3").fadeIn(400, function() {});
    587. });
    588. }, 200);
    589. setTimeout(function() {
    590. zingchart.exec('interactive', 'removeobject', {
    591. cls: 'marker'
    592. });
    593. }, 3000);
    594. break;
    595. }
    596. },
    597. node_mouseover: function(p) {
    598. $('#action1-1').removeClass('fa-circle-o');
    599. $('#action1-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Hover over a bar to see the tooltip.</strike>');
    600. bAction1_1 = 1;
    601. checkComplete();
    602. },
    603. legend_item_click: function(p) {
    604. $('#action1-2').removeClass('fa-circle-o');
    605. $('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
    606. bAction1_2 = 1;
    607. checkComplete();
    608. },
    609. legend_marker_click: function(p) {
    610. $('#action1-2').removeClass('fa-circle-o');
    611. $('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
    612. bAction1_2 = 1;
    613. checkComplete();
    614. },
    615. node_click: function(p) {
    616. if (bAction1_1 && bAction1_2) {
    617. $('#action1-3').removeClass('fa-circle-o');
    618. $('#action1-3').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a bar segment.</strike>');
    619. var aIndexValues = [];
    620. for (var n = 0; n < 3; n++) {
    621. var iVal;
    622. iVal = zingchart.exec('interactive', 'getnodevalue', {
    623. plotindex: n,
    624. nodeindex: p.nodeindex
    625. });
    626. aIndexValues.push(iVal);
    627. }
    628. if (p.nodeindex < 12) {
    629. var iMonth = p.nodeindex + 1,
    630. iYear = 2013;
    631. } else if (p.nodeindex >= 12 && p.nodeindex < 24) {
    632. var iMonth = p.nodeindex - 11,
    633. iYear = 2014;
    634. } else {
    635. var iMonth = p.nodeindex - 23,
    636. iYear = 2015;
    637. }
    638. var nDays = daysInMonth(iMonth, iYear);
    639. zingchart.exec('interactive', 'setdata', {
    640. data: level2(p, nDays)
    641. });
    642. $('#info1').html('You are now viewing data for ' + p.scaletext + '.');
    643. setTimeout(function() {
    644. $("#list1").fadeOut(400, function() {
    645. $("#list2").fadeIn(400, function() {
    646. // Animation complete.
    647. });
    648. oSavedChart2 = zingchart.exec('interactive', 'getdata');
    649. });
    650. }, 200);
    651. bAction1_1 = 0, bAction1_2 = 0;
    652. }
    653. if (bAction2_1 && bAction2_2) {
    654. var aChartValues = zingchart.exec('interactive', 'getseriesvalues');
    655. $('#action2-3').removeClass('fa-circle-o');
    656. $('#action2-3').addClass('fa-check-circle-o ').next().replaceWith("<strike>Now, select a product's bar.</strike>");
    657. zingchart.exec('interactive', 'setdata', {
    658. data: level3(p, aChartValues)
    659. });
    660. setTimeout(function() {
    661. $("#list2").fadeOut(400, function() {
    662. $("#list3").fadeIn(400, function() {
    663. // Animation complete.
    664. });
    665. oSavedChart3 = zingchart.exec('interactive', 'getdata');
    666. });
    667. }, 200);
    668. bAction2_1 = 0, bAction2_2 = 0;
    669. }
    670. if (bAction3_1) {
    671. $('#action3-2').removeClass('fa-circle-o');
    672. $('#action3-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a transaction to see sales by location.</strike>');
    673. zingchart.exec('interactive', 'setdata', {
    674. data: level4()
    675. });
    676. setTimeout(function() {
    677. $("#list3").fadeOut(400, function() {
    678. $("#list4").fadeIn(400, function() {});
    679. });
    680. }, 200);
    681. $('#list2').css('display', 'none');
    682. //LonLats for rando cities across the US
    683. var aLonLat = [
    684. [-118.385450, 34.053300],
    685. [-117.878705, 33.820872],
    686. [-117.164594, 32.748663],
    687. [-122.272206, 37.809039],
    688. [-121.503163, 38.586083],
    689. [-119.767324, 36.742530],
    690. [-115.131093, 36.177030],
    691. [-122.673207, 45.532628],
    692. [-122.321645, 47.587005],
    693. [-116.213246, 43.623464],
    694. [-112.071401, 33.453573],
    695. [-106.600209, 35.123630],
    696. [-95.350209, 29.768327],
    697. [-97.745229, 30.267741],
    698. [-90.823842, 29.792165],
    699. [-90.065786, 29.954117],
    700. [-81.364614, 28.516140],
    701. [-82.457753, 27.945053],
    702. [-80.189077, 25.769364],
    703. [-78.892690, 33.705278],
    704. [-80.848256, 35.226902],
    705. [-78.640004, 35.781405],
    706. [-76.288930, 36.834913],
    707. [-77.431508, 37.539474],
    708. [-77.036000, 38.911673],
    709. [-75.157338, 39.963768],
    710. [-73.876058, 40.748623],
    711. [-72.684041, 41.760365],
    712. [-71.167928, 42.367994],
    713. [-71.409627, 41.829986],
    714. [-77.605916, 43.142394],
    715. [-83.011190, 39.953241],
    716. [-86.526815, 39.157021],
    717. [-94.590779, 39.122936],
    718. [-97.337361, 37.685247],
    719. [-97.513143, 35.462139],
    720. [-95.991536, 36.157074],
    721. [-92.278157, 34.743094],
    722. [-90.190755, 32.297944],
    723. [-86.806966, 33.533740],
    724. [-84.488851, 33.771514],
    725. [-84.286977, 33.900414],
    726. [-86.791860, 36.149312],
    727. [-85.737172, 38.257931],
    728. [-81.639272, 38.350610],
    729. [-157.858382, 21.302330]
    730. ];
    731. var aXY = [];
    732. for (var n = 0; n < aLonLat.length; n++) {
    733. aXY.push(zingchart.maps.getXY("map", aLonLat[n]));
    734. }
    735. var aShapes = [];
    736. for (var n = 0; n < aXY.length; n++) {
    737. var sBg, iColorVal = Math.floor(Math.random() * (5 - 1)) + 1;
    738. switch (iColorVal) {
    739. case 1:
    740. sBg = "#FFDBDB";
    741. break;
    742. case 2:
    743. sBg = "#FFB8B8";
    744. break;
    745. case 3:
    746. sBg = "#D95D5D";
    747. break;
    748. case 4:
    749. sBg = "#B53333";
    750. break;
    751. }
    752. var oShape = {
    753. "type": "circle",
    754. "size": 3,
    755. "cls": "marker",
    756. "border-width": 1,
    757. "border-color": "black",
    758. "background-color": sBg,
    759. "x": aXY[n][0],
    760. "y": aXY[n][1]
    761. }
    762. aShapes.push(oShape);
    763. }
    764. //Draw shapes
    765. setTimeout(function() {
    766. zingchart.exec('interactive', 'addobject', {
    767. type: "shape",
    768. data: aShapes
    769. });
    770. }, 1000);
    771. }
    772. },
    773. zoom: function(p) {
    774. if (p.scroll || p.preview) {
    775. $('#action2-1').removeClass('fa-circle-o');
    776. $('#action2-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Drag the scroll bar or preview handles.</strike>');
    777. bAction2_1 = 1;
    778. checkComplete2();
    779. } else {
    780. $('#action2-2').removeClass('fa-circle-o');
    781. $('#action2-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click and drag to zoom, or use the zoom controls.</strike>');
    782. bAction2_2 = 1;
    783. checkComplete2();
    784. }
    785. },
    786. guide_mousemove: function(p) {
    787. $('#action3-1').removeClass('fa-circle-o');
    788. $('#action3-1').addClass('fa-check-circle-o').next().replaceWith('<strike>Hover over a chart to see the shared crosshair of the other chart.</strike>');
    789. $('#prompt3-2').css('display', 'initial');
    790. bAction3_1 = 1;
    791. }
    792. }
    793. });
    794.  
    795. function checkComplete() {
    796. if (bAction1_1 && bAction1_2) {
    797. $('#prompt1-3').css('display', 'initial');
    798. }
    799. };
    800.  
    801. function checkComplete2() {
    802. if (bAction2_1 && bAction2_2) {
    803. $('#prompt2-3').css('display', 'initial');
    804. }
    805. };
    806.  
    807. function checkComplete3() {
    808. if (bAction3_1) {
    809. $('#prompt3-2').css('display', 'initial');
    810. }
    811. };
    812.  
    813. function resetAll() {
    814. //Reset progress flag
    815. bAction1_1 = 0, bAction1_2 = 0, bAction2_1 = 0, bAction2_2 = 0, bAction3_1 = 0;
    816. //Reset ticks and prompts
    817. $('[id^=action]').attr('class', 'fa fa-circle-o');
    818. $('[id^=prompt]').css('display', 'none');
    819. $('#action1-1').next().replaceWith('<span>Hover over a bar to see the tooltip.</span>');
    820. $('#action1-2').next().replaceWith('<span>Click on a legend item to toggle products.</span>');
    821. $('#action1-3').next().replaceWith('<span>Now, click on a bar segment.</span>');
    822. $('#action2-1').next().replaceWith('<span>Drag the scroll bar or preview handles.</span>');
    823. $('#action2-2').next().replaceWith('<span>Click and drag to zoom, or use the zoom controls.</span>');
    824. $('#action2-3').next().replaceWith("<span>Now, select a product's bar.</span>");
    825. $('#action3-1').next().replaceWith('<span>Hover over a chart to see the shared crosshair of the other chart.</span>');
    826. $('#action3-2').next().replaceWith('<span>Now, click on a transaction to see sales by location.</span>');
    827. //Remove markers
    828. setTimeout(function() {
    829. zingchart.exec('interactive', 'removeobject', {
    830. cls: 'marker'
    831. });
    832. }, 2000);
    833. };
    834. $('#restartBtn').click(function() {
    835. resetAll();
    836. zingchart.exec('interactive', 'setdata', {
    837. data: oChart
    838. });
    839. zingchart.exec('interactive', 'removeobject', {
    840. cls: 'marker'
    841. });
    842. setTimeout(function() {
    843. $("#list4").fadeOut(400, function() {
    844. $("#list1").fadeIn(400, function() {});
    845. });
    846. }, 200);
    847. });