• 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 myConfig1 = {
    35. "type": "gauge",
    36. legend: {
    37. width: 120
    38. },
    39. "scale-r": {
    40. "aperture": 200, //Specify your scale range.
    41. "values": "0:100:20" //Provide min/max/step scale values.
    42. },
    43. tooltip: {
    44. text: '%t'
    45. },
    46. plot: {
    47. legendText: '%t (%v%)',
    48. },
    49. "series": [{
    50. "values": [35],
    51. text: 'Pipe 1'
    52. },
    53. {
    54. "values": [40],
    55. text: 'Pipe 2'
    56. },
    57. {
    58. "values": [25],
    59. text: 'Pipe 3'
    60. },
    61. ]
    62. };
    63.  
    64.  
    65. zingchart.render({
    66. id: 'myChart',
    67. data: myConfig1,
    68. height: "100%",
    69. width: "100%"
    70. });
    71. </script>
    72. </body>
    73.  
    74. </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 myConfig1 = {
    2. "type": "gauge",
    3. legend: {
    4. width: 120
    5. },
    6. "scale-r": {
    7. "aperture": 200, //Specify your scale range.
    8. "values": "0:100:20" //Provide min/max/step scale values.
    9. },
    10. tooltip: {
    11. text: '%t'
    12. },
    13. plot: {
    14. legendText: '%t (%v%)',
    15. },
    16. "series": [{
    17. "values": [35],
    18. text: 'Pipe 1'
    19. },
    20. {
    21. "values": [40],
    22. text: 'Pipe 2'
    23. },
    24. {
    25. "values": [25],
    26. text: 'Pipe 3'
    27. },
    28. ]
    29. };
    30.  
    31.  
    32. zingchart.render({
    33. id: 'myChart',
    34. data: myConfig1,
    35. height: "100%",
    36. width: "100%"
    37. });