• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7.  
    8. <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. <style>
    10. html,
    11. body {
    12. height: 100%;
    13. width: 100%;
    14. margin: 0;
    15. padding: 0;
    16. }
    17.  
    18. #myChart {
    19. height: 100%;
    20. width: 100%;
    21. min-height: 150px;
    22. }
    23.  
    24. .zc-ref {
    25. display: none;
    26. }
    27. </style>
    28. </head>
    29.  
    30. <body>
    31. <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32. <script>
    33. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34. var myConfig = {
    35. type: 'bar',
    36.  
    37. title: {
    38. text: 'Cursors! Plot is value hand'
    39. },
    40.  
    41. legend: {
    42. item: {
    43. cursor: 'help'
    44. },
    45. marker: {
    46. cursor: 'help'
    47. }
    48. },
    49.  
    50. shapes: [{
    51. type: 'circle',
    52. cursor: 'wait',
    53. backgroundColor: "#FF5722",
    54. x: 150,
    55. y: 100,
    56. size: 40,
    57. hoverState: {
    58. backgroundColor: "#ff3d00"
    59. },
    60. label: {
    61. text: "Circle with wait cursor"
    62. }
    63. }
    64.  
    65. ],
    66.  
    67. labels: [{
    68. text: 'Two labels with <br>different cursors',
    69. x: 310,
    70. y: 60
    71. },
    72. {
    73. text: 'Zoom In',
    74. x: 300,
    75. y: 100,
    76. backgroundColor: 'yellow',
    77. cursor: 'zoom-in'
    78. },
    79. {
    80. text: 'Zoom Out',
    81. x: 350,
    82. y: 100,
    83. backgroundColor: 'yellow',
    84. cursor: 'zoom-out'
    85. }
    86. ],
    87.  
    88.  
    89. plot: {
    90. cursor: 'hand'
    91. },
    92.  
    93. series: [{
    94. values: [35, 42, 67, 89, 25, 34, 67, 85],
    95. text: 'Legend marker with help cursor<br>item with none'
    96. }]
    97. };
    98.  
    99. zingchart.render({
    100. id: 'myChart',
    101. data: myConfig,
    102. height: '100%',
    103. width: '100%'
    104. });
    105. </script>
    106. </body>
    107.  
    108. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7.  
    8. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12. <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </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: 'bar',
    3.  
    4. title: {
    5. text: 'Cursors! Plot is value hand'
    6. },
    7.  
    8. legend: {
    9. item: {
    10. cursor: 'help'
    11. },
    12. marker: {
    13. cursor: 'help'
    14. }
    15. },
    16.  
    17. shapes: [{
    18. type: 'circle',
    19. cursor: 'wait',
    20. backgroundColor: "#FF5722",
    21. x: 150,
    22. y: 100,
    23. size: 40,
    24. hoverState: {
    25. backgroundColor: "#ff3d00"
    26. },
    27. label: {
    28. text: "Circle with wait cursor"
    29. }
    30. }
    31.  
    32. ],
    33.  
    34. labels: [{
    35. text: 'Two labels with <br>different cursors',
    36. x: 310,
    37. y: 60
    38. },
    39. {
    40. text: 'Zoom In',
    41. x: 300,
    42. y: 100,
    43. backgroundColor: 'yellow',
    44. cursor: 'zoom-in'
    45. },
    46. {
    47. text: 'Zoom Out',
    48. x: 350,
    49. y: 100,
    50. backgroundColor: 'yellow',
    51. cursor: 'zoom-out'
    52. }
    53. ],
    54.  
    55.  
    56. plot: {
    57. cursor: 'hand'
    58. },
    59.  
    60. series: [{
    61. values: [35, 42, 67, 89, 25, 34, 67, 85],
    62. text: 'Legend marker with help cursor<br>item with none'
    63. }]
    64. };
    65.  
    66. zingchart.render({
    67. id: 'myChart',
    68. data: myConfig,
    69. height: '100%',
    70. width: '100%'
    71. });