• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
    8.  
    9. <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. <style></style>
    11. </head>
    12.  
    13. <body>
    14. <div id='myChart'></div>
    15. <script>
    16. ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    17. var myConfig = {
    18. globals: {
    19. "font-family": "Roboto"
    20. },
    21. type: "bar",
    22. backgroundColor: "#f4f2f2",
    23. title: {
    24. text: "Revenue Comparison",
    25. "background-color": "none",
    26. color: "#333"
    27. },
    28. subtitle: {
    29. text: "Q1-Q4 2015",
    30. color: "#333",
    31. width: "10%",
    32. offsetX: "270px"
    33. },
    34. plotarea: {
    35. "margin-top": 100,
    36. "margin-bottom": 30,
    37. "background-color": "#fff"
    38. },
    39. scaleX: {
    40. values: ["Q1", "Q2", "Q3", "Q4"],
    41. lineColor: "#7d7d7d",
    42. tick: {
    43. lineColor: "#7d7d7d"
    44. },
    45. guide: {
    46. visible: false
    47. },
    48. markers: [{
    49. type: "area",
    50. range: [1.5, 2.5],
    51. backgroundColor: "red",
    52. alpha: 0.2,
    53. label: {
    54. text: "Netflix reduces fee",
    55. angle: 0,
    56. "offset-x": 13,
    57. "offset-y": -210,
    58. color: "#7d7d7d"
    59. }
    60. }]
    61. },
    62. scaleY: {
    63. lineColor: "#7d7d7d",
    64. tick: {
    65. lineColor: "#7d7d7d"
    66. },
    67. format: "$%v",
    68. short: true
    69. },
    70. legend: {
    71. borderRadius: "3px",
    72. borderColor: "none",
    73. backgroundColor: "none",
    74. layout: "h",
    75. verticalAlign: "bottom",
    76. align: "center",
    77. shadow: false,
    78. marker: {
    79. borderRadius: "2px",
    80. borderColor: "none"
    81. }
    82. },
    83. tooltip: {
    84. borderRadius: "3px",
    85. borderColor: "#F4F2F2",
    86. borderWidth: 2,
    87. width: 90,
    88. callout: true,
    89. height: 50,
    90. fontSize: 12,
    91. shadow: false,
    92. text: "%kt: $%v in %t Sales",
    93. short: true,
    94. decimals: 1,
    95. rules: [{
    96. rule: "%p === 0 && %i === 3 || %p === 1 && %i === 3",
    97. text: "%kt Projected: $%v in %t Sales",
    98. backgroundColor: "#7d7d7d"
    99. }]
    100. },
    101. plot: {
    102. alpha: 0.8,
    103. borderRadius: "3px",
    104. rules: [{
    105. rule: "%p === 0 && %i === 3",
    106. backgroundColor: "none",
    107. "line-style": "dashed",
    108. "border-color": "#447884",
    109. "border-width": 1
    110. },
    111. {
    112. rule: "%p === 1 && %i === 3",
    113. backgroundColor: "none",
    114. "line-style": "dashed",
    115. "border-color": "#ff9800",
    116. "border-width": 1
    117. },
    118. ]
    119. },
    120. labels: [{
    121. "text": "Adjust Projections",
    122. fontSize: 12,
    123. y: 4,
    124. x: 38
    125. },
    126. {
    127. text: "Internet:",
    128. y: 30,
    129. x: 20
    130. },
    131. {
    132. text: "Cable:",
    133. y: 60,
    134. x: 28
    135. },
    136. {
    137. text: "+10%",
    138. y: 30,
    139. x: 70,
    140. backgroundColor: "white",
    141. borderColor: "#7d7d7d",
    142. borderWidth: 1,
    143. borderRadius: 3,
    144. width: 35,
    145. hoverState: {
    146. backgroundColor: "#333",
    147. borderColor: "#fff",
    148. color: "#fff"
    149. }
    150. },
    151. {
    152. text: "-10%",
    153. y: 30,
    154. x: 110,
    155. backgroundColor: "white",
    156. borderColor: "#7d7d7d",
    157. borderWidth: 1,
    158. borderRadius: 3,
    159. width: 35,
    160. hoverState: {
    161. backgroundColor: "#333",
    162. borderColor: "#fff",
    163. color: "#fff"
    164. }
    165. },
    166. {
    167. text: "+10%",
    168. y: 60,
    169. x: 70,
    170. backgroundColor: "white",
    171. borderColor: "#7d7d7d",
    172. borderWidth: 1,
    173. borderRadius: 3,
    174. width: 35,
    175. hoverState: {
    176. backgroundColor: "#333",
    177. borderColor: "#fff",
    178. color: "#fff"
    179. }
    180. },
    181. {
    182. text: "-10%",
    183. y: 60,
    184. x: 110,
    185. backgroundColor: "white",
    186. borderColor: "#7d7d7d",
    187. borderWidth: 1,
    188. borderRadius: 3,
    189. width: 35,
    190. hoverState: {
    191. backgroundColor: "#333",
    192. borderColor: "#fff",
    193. color: "#fff"
    194. }
    195. }
    196. ],
    197. series: [{
    198. values: [3500000, 4200000, 6700000, 8900000],
    199. backgroundColor: "#447884 #69a3af",
    200. text: "Internet"
    201. },
    202. {
    203. values: [2800000, 4000000, 3900000, 3600000],
    204. backgroundColor: "#ff9800 #f2b157",
    205. text: "Cable"
    206. }
    207. ]
    208. }
    209.  
    210. zingchart.render({
    211. id: 'myChart',
    212. data: myConfig,
    213. height: 400,
    214. width: 600
    215. });
    216. </script>
    217. </body>
    218.  
    219. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingSoft Demo</title>
    7. <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
    8.  
    9. <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13. <div id='myChart'></div>
    14. </body>
    15.  
    16. </html>
    1.  
    1. var myConfig = {
    2. globals: {
    3. "font-family": "Roboto"
    4. },
    5. type: "bar",
    6. backgroundColor: "#f4f2f2",
    7. title: {
    8. text: "Revenue Comparison",
    9. "background-color": "none",
    10. color: "#333"
    11. },
    12. subtitle: {
    13. text: "Q1-Q4 2015",
    14. color: "#333",
    15. width: "10%",
    16. offsetX: "270px"
    17. },
    18. plotarea: {
    19. "margin-top": 100,
    20. "margin-bottom": 30,
    21. "background-color": "#fff"
    22. },
    23. scaleX: {
    24. values: ["Q1", "Q2", "Q3", "Q4"],
    25. lineColor: "#7d7d7d",
    26. tick: {
    27. lineColor: "#7d7d7d"
    28. },
    29. guide: {
    30. visible: false
    31. },
    32. markers: [{
    33. type: "area",
    34. range: [1.5, 2.5],
    35. backgroundColor: "red",
    36. alpha: 0.2,
    37. label: {
    38. text: "Netflix reduces fee",
    39. angle: 0,
    40. "offset-x": 13,
    41. "offset-y": -210,
    42. color: "#7d7d7d"
    43. }
    44. }]
    45. },
    46. scaleY: {
    47. lineColor: "#7d7d7d",
    48. tick: {
    49. lineColor: "#7d7d7d"
    50. },
    51. format: "$%v",
    52. short: true
    53. },
    54. legend: {
    55. borderRadius: "3px",
    56. borderColor: "none",
    57. backgroundColor: "none",
    58. layout: "h",
    59. verticalAlign: "bottom",
    60. align: "center",
    61. shadow: false,
    62. marker: {
    63. borderRadius: "2px",
    64. borderColor: "none"
    65. }
    66. },
    67. tooltip: {
    68. borderRadius: "3px",
    69. borderColor: "#F4F2F2",
    70. borderWidth: 2,
    71. width: 90,
    72. callout: true,
    73. height: 50,
    74. fontSize: 12,
    75. shadow: false,
    76. text: "%kt: $%v in %t Sales",
    77. short: true,
    78. decimals: 1,
    79. rules: [{
    80. rule: "%p === 0 && %i === 3 || %p === 1 && %i === 3",
    81. text: "%kt Projected: $%v in %t Sales",
    82. backgroundColor: "#7d7d7d"
    83. }]
    84. },
    85. plot: {
    86. alpha: 0.8,
    87. borderRadius: "3px",
    88. rules: [{
    89. rule: "%p === 0 && %i === 3",
    90. backgroundColor: "none",
    91. "line-style": "dashed",
    92. "border-color": "#447884",
    93. "border-width": 1
    94. },
    95. {
    96. rule: "%p === 1 && %i === 3",
    97. backgroundColor: "none",
    98. "line-style": "dashed",
    99. "border-color": "#ff9800",
    100. "border-width": 1
    101. },
    102. ]
    103. },
    104. labels: [{
    105. "text": "Adjust Projections",
    106. fontSize: 12,
    107. y: 4,
    108. x: 38
    109. },
    110. {
    111. text: "Internet:",
    112. y: 30,
    113. x: 20
    114. },
    115. {
    116. text: "Cable:",
    117. y: 60,
    118. x: 28
    119. },
    120. {
    121. text: "+10%",
    122. y: 30,
    123. x: 70,
    124. backgroundColor: "white",
    125. borderColor: "#7d7d7d",
    126. borderWidth: 1,
    127. borderRadius: 3,
    128. width: 35,
    129. hoverState: {
    130. backgroundColor: "#333",
    131. borderColor: "#fff",
    132. color: "#fff"
    133. }
    134. },
    135. {
    136. text: "-10%",
    137. y: 30,
    138. x: 110,
    139. backgroundColor: "white",
    140. borderColor: "#7d7d7d",
    141. borderWidth: 1,
    142. borderRadius: 3,
    143. width: 35,
    144. hoverState: {
    145. backgroundColor: "#333",
    146. borderColor: "#fff",
    147. color: "#fff"
    148. }
    149. },
    150. {
    151. text: "+10%",
    152. y: 60,
    153. x: 70,
    154. backgroundColor: "white",
    155. borderColor: "#7d7d7d",
    156. borderWidth: 1,
    157. borderRadius: 3,
    158. width: 35,
    159. hoverState: {
    160. backgroundColor: "#333",
    161. borderColor: "#fff",
    162. color: "#fff"
    163. }
    164. },
    165. {
    166. text: "-10%",
    167. y: 60,
    168. x: 110,
    169. backgroundColor: "white",
    170. borderColor: "#7d7d7d",
    171. borderWidth: 1,
    172. borderRadius: 3,
    173. width: 35,
    174. hoverState: {
    175. backgroundColor: "#333",
    176. borderColor: "#fff",
    177. color: "#fff"
    178. }
    179. }
    180. ],
    181. series: [{
    182. values: [3500000, 4200000, 6700000, 8900000],
    183. backgroundColor: "#447884 #69a3af",
    184. text: "Internet"
    185. },
    186. {
    187. values: [2800000, 4000000, 3900000, 3600000],
    188. backgroundColor: "#ff9800 #f2b157",
    189. text: "Cable"
    190. }
    191. ]
    192. }
    193.  
    194. zingchart.render({
    195. id: 'myChart',
    196. data: myConfig,
    197. height: 400,
    198. width: 600
    199. });