• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <script nonce="undefined" src="//www.zingchart.com/scripts/zcDocs.js"></script>
    8. <link href='//www.zingchart.com/css/zcDocs.css' rel='stylesheet' type='text/css'>
    9. <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. <style>
    11. html,
    12. body {
    13. height: 100%;
    14. width: 100%;
    15. }
    16. </style>
    17. </head>
    18.  
    19. <body>
    20. <div id='myChart'></div>
    21. <button class='btn btn-info' id='back'>Go Back in History</button>
    22. <button class='btn btn-info' id='fwd'>Go Forward in History</button>
    23. <script>
    24. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    25. var myConfig = {
    26. history: {},
    27. "graphset": [{
    28. "id": "zc",
    29. "subtitle": {
    30. "text": "Click a bar to load a new chart!"
    31. },
    32. "type": "bar",
    33. "series": [{
    34. "values": [11],
    35. "url": "https://storage.googleapis.com/zingchart-com.appspot.com/child1.txt",
    36. "target": "graph=zc"
    37. },
    38. {
    39. "values": [44],
    40. "url": "https://storage.googleapis.com/zingchart-com.appspot.com/child2.txt",
    41. "target": "graph=zc"
    42. },
    43. {
    44. "values": [26],
    45. "url": "https://storage.googleapis.com/zingchart-com.appspot.com/child3.txt",
    46. "target": "graph=zc"
    47. }
    48. ]
    49. }]
    50. };
    51.  
    52. zingchart.render({
    53. id: 'myChart',
    54. data: myConfig,
    55. height: '600',
    56. width: '800',
    57. // turn off ZingChart default headers for cors
    58. cacheControl: '',
    59. });
    60.  
    61. document.getElementById('back').addEventListener('click', function() {
    62. zingchart.exec('myChart', 'goback');
    63. });
    64. document.getElementById('fwd').addEventListener('click', function() {
    65. zingchart.exec('myChart', 'goforward');
    66. });
    67. </script>
    68. </body>
    69.  
    70. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <script src="//www.zingchart.com/scripts/zcDocs.js"></script>
    8. <link href='//www.zingchart.com/css/zcDocs.css' rel='stylesheet' type='text/css'>
    9. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13. <div id='myChart'></div>
    14. <button class='btn btn-info' id='back'>Go Back in History</button>
    15. <button class='btn btn-info' id='fwd'>Go Forward in History</button>
    16. </body>
    17.  
    18. </html>
    1. html,
    2. body {
    3. height: 100%;
    4. width: 100%;
    5. }
    1. var myConfig = {
    2. history: {},
    3. "graphset": [{
    4. "id": "zc",
    5. "subtitle": {
    6. "text": "Click a bar to load a new chart!"
    7. },
    8. "type": "bar",
    9. "series": [{
    10. "values": [11],
    11. "url": "https://storage.googleapis.com/zingchart-com.appspot.com/child1.txt",
    12. "target": "graph=zc"
    13. },
    14. {
    15. "values": [44],
    16. "url": "https://storage.googleapis.com/zingchart-com.appspot.com/child2.txt",
    17. "target": "graph=zc"
    18. },
    19. {
    20. "values": [26],
    21. "url": "https://storage.googleapis.com/zingchart-com.appspot.com/child3.txt",
    22. "target": "graph=zc"
    23. }
    24. ]
    25. }]
    26. };
    27.  
    28. zingchart.render({
    29. id: 'myChart',
    30. data: myConfig,
    31. height: '600',
    32. width: '800',
    33. // turn off ZingChart default headers for cors
    34. cacheControl: '',
    35. });
    36.  
    37. document.getElementById('back').addEventListener('click', function() {
    38. zingchart.exec('myChart', 'goback');
    39. });
    40. document.getElementById('fwd').addEventListener('click', function() {
    41. zingchart.exec('myChart', 'goforward');
    42. });