• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid Demo</title>
    7. <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. <script nonce="undefined">
    9. zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    10. ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
    11. </script>
    12. <style>
    13. html,
    14. body {
    15. height: 100%;
    16. width: 100%;
    17. margin: 0;
    18. padding: 0;
    19. }
    20.  
    21. #myChart {
    22. height: 100%;
    23. width: 100%;
    24. min-height: 150px;
    25. }
    26.  
    27. .zc-ref {
    28. display: none;
    29. }
    30. </style>
    31. </head>
    32.  
    33. <body>
    34. <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    35. <script>
    36. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    37. var myConfig = {
    38. type: 'line',
    39. scaleY: {
    40. zooming: true
    41. },
    42. scaleX: {
    43. zooming: true
    44. },
    45. series: [{
    46. values: [35, 42, 67, 89, 25, 34, 67, 85]
    47. }]
    48. };
    49.  
    50. zingchart.bind('myChart', 'mousewheel', function(p) {
    51. if (p.ev.wheelDelta > 0) {
    52. zingchart.exec(p.id, 'zoomin');
    53. } else if (p.ev.wheelDelta < 0) {
    54. zingchart.exec(p.id, 'zoomout');
    55. }
    56. });
    57.  
    58. zingchart.render({
    59. id: 'myChart',
    60. data: myConfig,
    61. height: '100%',
    62. width: '100%'
    63. });
    64. </script>
    65. </body>
    66.  
    67. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid Demo</title>
    7. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. <script>
    9. zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    10. ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
    11. </script>
    12. </head>
    13.  
    14. <body>
    15. <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    16. </body>
    17.  
    18. </html>
    1. html,
    2. body {
    3. height: 100%;
    4. width: 100%;
    5. margin: 0;
    6. padding: 0;
    7. }
    8.  
    9. #myChart {
    10. height: 100%;
    11. width: 100%;
    12. min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16. display: none;
    17. }
    1. var myConfig = {
    2. type: 'line',
    3. scaleY: {
    4. zooming: true
    5. },
    6. scaleX: {
    7. zooming: true
    8. },
    9. series: [{
    10. values: [35, 42, 67, 89, 25, 34, 67, 85]
    11. }]
    12. };
    13.  
    14. zingchart.bind('myChart', 'mousewheel', function(p) {
    15. if (p.ev.wheelDelta > 0) {
    16. zingchart.exec(p.id, 'zoomin');
    17. } else if (p.ev.wheelDelta < 0) {
    18. zingchart.exec(p.id, 'zoomout');
    19. }
    20. });
    21.  
    22. zingchart.render({
    23. id: 'myChart',
    24. data: myConfig,
    25. height: '100%',
    26. width: '100%'
    27. });