• 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. globals: {
    18. fontFamily: "Roboto"
    19. },
    20. type: "bar",
    21. backgroundColor: "#f4f2f2",
    22. title: {
    23. text: "Revenue Comparison",
    24. backgroundColor: "none",
    25. color: "#333"
    26. },
    27. subtitle: {
    28. text: "Q1-Q4 2014",
    29. color: "#333"
    30. },
    31. plotarea: {
    32. backgroundColor: "#fff"
    33. },
    34. scaleX: {
    35. lineColor: "#7d7d7d",
    36. tick: {
    37. lineColor: "#7d7d7d"
    38. },
    39. guide: {
    40. visible: false
    41. },
    42. values: ["Q1", "Q2", "Q3", "Q4"]
    43. },
    44. scaleY: {
    45. lineColor: "#7d7d7d",
    46. tick: {
    47. lineColor: "#7d7d7d"
    48. },
    49. format: "$%v",
    50. short: true
    51. },
    52. legend: {
    53. backgroundColor: "none",
    54. layout: "h",
    55. verticalAlign: "bottom",
    56. align: "center",
    57. borderRadius: "3px",
    58. shadow: false,
    59. borderWidth: 0,
    60. marker: {
    61. borderWidth: 0,
    62. borderRadius: "3px"
    63. }
    64. },
    65. tooltip: {
    66. callout: true,
    67. borderColor: "#F4F2F2",
    68. borderWidth: 2,
    69. borderRadius: "3px",
    70. shadow: false,
    71. short: true,
    72. text: "%kt: $%v in %t Sales",
    73. },
    74. plot: {
    75. alpha: 0.8,
    76. borderRadius: "3px"
    77. },
    78. series: [{
    79. "values": [3500000, 4200000, 6700000, 8900000],
    80. text: "Internet",
    81. backgroundColor: "#447884 #69a3af",
    82. },
    83. {
    84. "values": [2800000, 4000000, 3900000, 3600000],
    85. text: "Cable",
    86. backgroundColor: "#ff9800 #f2b157",
    87. }
    88. ]
    89. };
    90.  
    91. zingchart.render({
    92. id: 'myChart',
    93. data: myConfig,
    94. height: 400,
    95. width: 600
    96. });
    97. </script>
    98. </body>
    99.  
    100. </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. globals: {
    3. fontFamily: "Roboto"
    4. },
    5. type: "bar",
    6. backgroundColor: "#f4f2f2",
    7. title: {
    8. text: "Revenue Comparison",
    9. backgroundColor: "none",
    10. color: "#333"
    11. },
    12. subtitle: {
    13. text: "Q1-Q4 2014",
    14. color: "#333"
    15. },
    16. plotarea: {
    17. backgroundColor: "#fff"
    18. },
    19. scaleX: {
    20. lineColor: "#7d7d7d",
    21. tick: {
    22. lineColor: "#7d7d7d"
    23. },
    24. guide: {
    25. visible: false
    26. },
    27. values: ["Q1", "Q2", "Q3", "Q4"]
    28. },
    29. scaleY: {
    30. lineColor: "#7d7d7d",
    31. tick: {
    32. lineColor: "#7d7d7d"
    33. },
    34. format: "$%v",
    35. short: true
    36. },
    37. legend: {
    38. backgroundColor: "none",
    39. layout: "h",
    40. verticalAlign: "bottom",
    41. align: "center",
    42. borderRadius: "3px",
    43. shadow: false,
    44. borderWidth: 0,
    45. marker: {
    46. borderWidth: 0,
    47. borderRadius: "3px"
    48. }
    49. },
    50. tooltip: {
    51. callout: true,
    52. borderColor: "#F4F2F2",
    53. borderWidth: 2,
    54. borderRadius: "3px",
    55. shadow: false,
    56. short: true,
    57. text: "%kt: $%v in %t Sales",
    58. },
    59. plot: {
    60. alpha: 0.8,
    61. borderRadius: "3px"
    62. },
    63. series: [{
    64. "values": [3500000, 4200000, 6700000, 8900000],
    65. text: "Internet",
    66. backgroundColor: "#447884 #69a3af",
    67. },
    68. {
    69. "values": [2800000, 4000000, 3900000, 3600000],
    70. text: "Cable",
    71. backgroundColor: "#ff9800 #f2b157",
    72. }
    73. ]
    74. };
    75.  
    76. zingchart.render({
    77. id: 'myChart',
    78. data: myConfig,
    79. height: 400,
    80. width: 600
    81. });