• 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></style>
    10. </head>
    11.  
    12. <body>
    13. <div id='myChart'></div>
    14. <script>
    15. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16. var myConfig = {
    17. "type": "bar",
    18. "plot": {
    19. "value-box": {
    20. "text": "$%vK",
    21. "font-family": "Georgia",
    22. "rules": [{
    23. "rule": "%v >= 75",
    24. "placement": "top-out",
    25. "font-color": "black",
    26. "font-size": 16,
    27. "background-color": "white",
    28. "border-color": "gray",
    29. "border-width": 1,
    30. "padding": "5%",
    31. "callout": true
    32. },
    33. {
    34. "rule": "%v < 75",
    35. "placement": "top-in",
    36. "font-color": "white",
    37. "font-weight": "normal"
    38. }
    39. ]
    40. },
    41. "rules": [{
    42. "rule": "%v >= 75",
    43. "background-color": "yellow orange"
    44. },
    45. {
    46. "rule": "%v < 75",
    47. "background-color": "gray black"
    48. }
    49. ]
    50. },
    51. "scale-x": {
    52. "labels": ["Q1", "Q2", "Q3", "Q4"]
    53. },
    54. "scale-y": {
    55. "values": "0:100:25"
    56. },
    57. "series": [{
    58. "values": [30, 59, 33, 81]
    59. },
    60. {
    61. "values": [34, 64, 40, 85]
    62. }
    63. ]
    64. };
    65.  
    66. zingchart.render({
    67. id: 'myChart',
    68. data: myConfig,
    69. height: 400,
    70. width: "100%"
    71. });
    72. </script>
    73. </body>
    74.  
    75. </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'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. var myConfig = {
    2. "type": "bar",
    3. "plot": {
    4. "value-box": {
    5. "text": "$%vK",
    6. "font-family": "Georgia",
    7. "rules": [{
    8. "rule": "%v >= 75",
    9. "placement": "top-out",
    10. "font-color": "black",
    11. "font-size": 16,
    12. "background-color": "white",
    13. "border-color": "gray",
    14. "border-width": 1,
    15. "padding": "5%",
    16. "callout": true
    17. },
    18. {
    19. "rule": "%v < 75",
    20. "placement": "top-in",
    21. "font-color": "white",
    22. "font-weight": "normal"
    23. }
    24. ]
    25. },
    26. "rules": [{
    27. "rule": "%v >= 75",
    28. "background-color": "yellow orange"
    29. },
    30. {
    31. "rule": "%v < 75",
    32. "background-color": "gray black"
    33. }
    34. ]
    35. },
    36. "scale-x": {
    37. "labels": ["Q1", "Q2", "Q3", "Q4"]
    38. },
    39. "scale-y": {
    40. "values": "0:100:25"
    41. },
    42. "series": [{
    43. "values": [30, 59, 33, 81]
    44. },
    45. {
    46. "values": [34, 64, 40, 85]
    47. }
    48. ]
    49. };
    50.  
    51. zingchart.render({
    52. id: 'myChart',
    53. data: myConfig,
    54. height: 400,
    55. width: "100%"
    56. });