• 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. "layout": "3x1",
    18. "graphset": [{
    19. "type": "stock",
    20. "crosshair-x": {
    21. "plot-label": {
    22. "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
    23. "decimals": 2,
    24. "font-color": "#29A2CC",
    25. "text-alpha": 1,
    26. "background-color": "white",
    27. "alpha": 0.7,
    28. "border-color": "#29A2CC",
    29. "border-radius": "3px",
    30. "multiple": true
    31. },
    32. "scale-label": {
    33. "visible": false
    34. },
    35. "line-color": "#29A2CC",
    36. "shared": true
    37. },
    38. "scale-x": {
    39. "min-value": 1420232400000,
    40. "step": "day",
    41. "transform": {
    42. "type": "date",
    43. "all": "%m/%d/%y"
    44. },
    45. "max-items": 6,
    46. "item": {
    47. "font-size": 10
    48. }
    49. },
    50. "scale-y": {
    51. "values": "30:34:4",
    52. "format": "$%v",
    53. "guide": {
    54. "line-style": "solid"
    55. },
    56. "item": {
    57. "font-size": 10
    58. }
    59. },
    60. "plot": {
    61. "aspect": "candlestick",
    62. "tooltip": {
    63. "visible": false
    64. },
    65. "trend-up": {
    66. "background-color": "#29A2CC",
    67. "line-color": "#29A2CC",
    68. "border-color": "#29A2CC"
    69. },
    70. "trend-down": {
    71. "background-color": "none",
    72. "line-color": "#29A2CC",
    73. "border-color": "#29A2CC"
    74. }
    75. },
    76. "plotarea": {
    77. "margin-left": "17%",
    78. "margin-right": "dynamic",
    79. "margin-top": "dynamic",
    80. "margin-bottom": "dynamic"
    81. },
    82. "labels": [{
    83. "text": "Blue<br>Stock",
    84. "font-family": "Georgia",
    85. "font-color": "white",
    86. "x": "2%",
    87. "y": "35%",
    88. "height": "30%",
    89. "width": "7%",
    90. "background-color": "#29A2CC",
    91. "border-radius": "3px"
    92. }],
    93. "series": [{
    94. "values": [
    95. [1420232400000, [32.34, 32.46, 31.87, 32.06]], //01/02/15
    96.  
    97. [1420491600000, [32.80, 33.25, 32.52, 33.05]], //01/05/15
    98. [1420578000000, [33.05, 33.57, 32.93, 33.30]], //01/06/15
    99. [1420664400000, [33.21, 33.39, 32.98, 33.08]], //01/07/15
    100. [1420750800000, [33.32, 33.38, 33.13, 33.37]], //01/08/15
    101. [1420837200000, [33.52, 33.53, 32.95, 33.03]], //01/09/15
    102.  
    103. [1421096400000, [33.07, 33.14, 32.77, 32.98]], //01/12/15
    104. [1421182800000, [33.26, 33.33, 32.61, 32.86]], //01/13/15
    105. [1421269200000, [32.65, 32.85, 32.41, 32.78]], //01/14/15
    106. [1421355600000, [32.86, 32.97, 32.56, 32.58]], //01/15/15
    107. [1421442000000, [32.51, 32.65, 32.45, 32.59]], //01/16/15
    108.  
    109. [1421787600000, [32.84, 32.87, 32.55, 32.85]], //01/20/15
    110. [1421874000000, [32.83, 33.08, 32.71, 33.04]], //01/21/15
    111. [1421960400000, [33.30, 33.36, 32.96, 33.28]], //01/22/15
    112. [1422046800000, [33.43, 33.88, 33.29, 33.48]], //01/23/15
    113.  
    114. [1422306000000, [33.72, 33.74, 33.40, 33.60]], //01/26/15
    115. [1422392400000, [33.39, 33.46, 33.20, 33.38]], //01/27/15
    116. [1422478800000, [33.47, 33.49, 32.81, 32.84]], //01/28/15
    117. [1422565200000, [32.84, 33.20, 32.78, 33.08]], //01/29/15
    118. [1422651600000, [32.88, 33.11, 32.82, 32.89]], //01/30/15
    119.  
    120. [1422910800000, [33.00, 33.22, 32.90, 33.21]], //02/02/15
    121. [1422997200000, [33.29, 33.52, 33.26, 33.47]], //02/03/15
    122. [1423083600000, [33.41, 33.43, 33.08, 33.16]], //02/04/15
    123. [1423170000000, [33.25, 33.50, 33.23, 33.50]], //02/05/15
    124. [1423256400000, [33.54, 33.75, 33.47, 33.52]], //02/06/15
    125.  
    126. [1423515600000, [33.47, 33.75, 32.50, 32.64]], //02/09/15
    127. [1423602000000, [32.77, 33.05, 32.55, 32.96]], //02/10/15
    128. [1423688400000, [32.49, 32.82, 32.35, 32.77]], //02/11/15
    129. [1423774800000, [32.70, 32.99, 31.71, 31.89]], //02/12/15
    130. [1423861200000, [31.99, 32.57, 31.50, 32.55]], //02/13/15
    131.  
    132. [1424206800000, [31.02, 31.30, 30.98, 31.27]], //02/17/15
    133. [1424293200000, [31.34, 31.90, 31.15, 31.80]], //02/18/15
    134. [1424379600000, [31.85, 31.91, 31.05, 31.15]], //02/19/15
    135. [1424466000000, [30.88, 31.21, 30.80, 31.21]], //02/20/15
    136.  
    137. [1424725200000, [31.22, 31.30, 31.10, 31.17]], //02/23/15
    138. [1424811600000, [31.15, 31.45, 31.01, 31.39]], //02/24/15
    139. [1424898000000, [31.45, 32.06, 31.40, 31.91]], //02/25/15
    140. [1424984400000, [31.94, 32.01, 31.81, 31.89]], //02/26/15
    141. [1425070800000, [31.83, 32.27, 31.75, 31.99]], //02/27/15
    142.  
    143. [1425330000000, [31.90, 32.12, 31.85, 32.11]], //03/02/15
    144. [1425416400000, [32.05, 32.08, 31.78, 31.86]], //03/03/15
    145. [1425502800000, [31.76, 31.77, 31.47, 31.66]], //03/04/15
    146. [1425589200000, [31.62, 31.82, 31.57, 31.82]], //03/05/15
    147. [1425675600000, [31.71, 31.78, 31.33, 31.42]], //03/06/15
    148.  
    149. [1425934800000, [31.52, 31.70, 31.49, 31.64]], //03/09/15
    150. [1426021200000, [31.50, 31.64, 31.17, 31.17]], //03/10/15
    151. [1426107600000, [31.28, 31.49, 31.15, 31.19]], //03/11/15
    152. [1426194000000, [31.27, 31.41, 31.17, 31.40]], //03/12/15
    153. [1426280400000, [31.28, 31.36, 30.81, 31.04]], //03/13/15
    154.  
    155. [1426539600000, [31.06, 31.48, 30.96, 31.45]], //03/16/15
    156. [1426626000000, [31.30, 31.39, 31.09, 31.31]], //03/17/15
    157. [1426712400000, [31.18, 31.85, 31.11, 31.64]], //03/18/15
    158. [1426798800000, [31.44, 31.61, 31.26, 31.33]], //03/19/15
    159. [1426885200000, [31.34, 31.53, 31.30, 31.40]], //03/20/15
    160.  
    161. [1427144400000, [31.48, 31.74, 31.45, 31.47]], //03/23/15
    162. [1427230800000, [31.38, 31.48, 31.27, 31.28]], //03/24/15
    163. [1427317200000, [31.23, 31.33, 30.91, 30.91]], //03/25/15
    164. [1427403600000, [31.80, 31.92, 31.17, 31.30]], //03/26/15
    165. [1427490000000, [31.34, 31.90, 30.60, 30.64]], //03/27/15
    166.  
    167. [1427749200000, [30.98, 31.20, 30.97, 31.12]], //03/30/15
    168. [1427835600000, [31.15, 31.90, 30.81, 31.81]] //03/31/15
    169. ]
    170. }]
    171. },
    172. {
    173. "type": "stock",
    174. "crosshair-x": {
    175. "plot-label": {
    176. "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
    177. "decimals": 2,
    178. "font-color": "#D31E1E",
    179. "text-alpha": 1,
    180. "background-color": "white",
    181. "alpha": 0.7,
    182. "border-color": "#D31E1E",
    183. "border-radius": "3px",
    184. "multiple": true
    185. },
    186. "scale-label": {
    187. "visible": false
    188. },
    189. "line-color": "#D31E1E",
    190. "shared": true
    191. },
    192. "scale-x": {
    193. "min-value": 1420232400000,
    194. "step": "day",
    195. "transform": {
    196. "type": "date",
    197. "all": "%m/%d/%y"
    198. },
    199. "max-items": 6,
    200. "item": {
    201. "font-size": 10
    202. }
    203. },
    204. "scale-y": {
    205. "values": "30:34:4",
    206. "format": "$%v",
    207. "guide": {
    208. "line-style": "solid"
    209. },
    210. "item": {
    211. "font-size": 10
    212. }
    213. },
    214. "plot": {
    215. "aspect": "candlestick",
    216. "tooltip": {
    217. "visible": false
    218. },
    219. "trend-up": {
    220. "background-color": "#D31E1E",
    221. "line-color": "#D31E1E",
    222. "border-color": "#D31E1E"
    223. },
    224. "trend-down": {
    225. "background-color": "none",
    226. "line-color": "#D31E1E",
    227. "border-color": "#D31E1E"
    228. }
    229. },
    230. "plotarea": {
    231. "margin-left": "17%",
    232. "margin-right": "dynamic",
    233. "margin-top": "dynamic",
    234. "margin-bottom": "dynamic"
    235. },
    236. "labels": [{
    237. "text": "Red<br>Stock",
    238. "font-family": "Georgia",
    239. "font-color": "white",
    240. "x": "2%",
    241. "y": "35%",
    242. "height": "30%",
    243. "width": "7%",
    244. "background-color": "#D31E1E",
    245. "border-radius": "3px"
    246. }],
    247. "series": [{
    248. "values": [
    249. [1420232400000, [33.03, 33.49, 32.85, 33.07]], //01/02/15
    250.  
    251. [1420491600000, [31.80, 32.45, 31.52, 32.05]], //01/05/15
    252. [1420578000000, [32.30, 32.57, 31.93, 32.03]], //01/06/15
    253. [1420664400000, [33.21, 33.39, 32.98, 33.08]], //01/07/15
    254. [1420750800000, [33.32, 33.38, 33.13, 33.37]], //01/08/15
    255. [1420837200000, [33.52, 33.53, 32.95, 33.03]], //01/09/15
    256.  
    257. [1421096400000, [33.07, 33.14, 32.77, 32.98]], //01/12/15
    258. [1421182800000, [33.26, 33.33, 32.61, 32.86]], //01/13/15
    259. [1421269200000, [32.65, 32.85, 32.41, 32.78]], //01/14/15
    260. [1421355600000, [32.86, 32.97, 32.56, 32.58]], //01/15/15
    261. [1421442000000, [32.51, 32.65, 32.45, 32.59]], //01/16/15
    262.  
    263. [1421787600000, [32.43, 32.88, 32.29, 32.48]], //01/20/15
    264. [1421874000000, [32.30, 32.36, 31.96, 32.28]], //01/21/15
    265. [1421960400000, [31.83, 32.08, 31.71, 32.04]], //01/22/15
    266. [1422046800000, [31.84, 31.87, 31.55, 31.85]], //01/23/15
    267.  
    268. [1422306000000, [32.88, 33.11, 32.82, 32.89]], //01/26/15
    269. [1422392400000, [32.84, 33.20, 32.78, 33.08]], //01/27/15
    270. [1422478800000, [33.47, 33.49, 32.81, 32.84]], //01/28/15
    271. [1422565200000, [33.39, 33.46, 33.20, 33.38]], //01/29/15
    272. [1422651600000, [32.72, 32.74, 32.40, 32.60]], //01/30/15
    273.  
    274. [1422910800000, [33.00, 33.22, 32.90, 33.21]], //02/02/15
    275. [1422997200000, [33.29, 33.52, 33.26, 33.47]], //02/03/15
    276. [1423083600000, [33.41, 33.43, 33.08, 33.16]], //02/04/15
    277. [1423170000000, [33.25, 33.50, 33.23, 33.50]], //02/05/15
    278. [1423256400000, [33.54, 33.75, 33.47, 33.52]], //02/06/15
    279.  
    280. [1423515600000, [33.47, 33.75, 32.50, 32.64]], //02/09/15
    281. [1423602000000, [32.77, 33.05, 32.55, 32.96]], //02/10/15
    282. [1423688400000, [32.49, 32.82, 32.35, 32.77]], //02/11/15
    283. [1423774800000, [32.70, 32.99, 31.71, 31.89]], //02/12/15
    284. [1423861200000, [31.99, 32.57, 31.50, 32.55]], //02/13/15
    285.  
    286. [1424206800000, [32.02, 32.30, 31.98, 32.27]], //02/17/15
    287. [1424293200000, [32.34, 32.90, 32.15, 32.80]], //02/18/15
    288. [1424379600000, [32.85, 32.91, 32.05, 32.15]], //02/19/15
    289. [1424466000000, [31.88, 32.21, 31.80, 32.21]], //02/20/15
    290.  
    291. [1424725200000, [31.25, 32.30, 31.01, 32.17]], //02/23/15
    292. [1424811600000, [31.15, 32.45, 31.01, 32.39]], //02/24/15
    293. [1424898000000, [31.45, 32.06, 31.40, 31.91]], //02/25/15
    294. [1424984400000, [31.94, 32.01, 31.81, 31.89]], //02/26/15
    295. [1425070800000, [31.83, 32.27, 31.75, 31.99]], //02/27/15
    296.  
    297. [1425330000000, [32.50, 33.42, 32.35, 33.11]], //03/02/15
    298. [1425416400000, [32.05, 32.08, 30.56, 30.65]], //03/03/15
    299. [1425502800000, [31.76, 31.77, 31.47, 31.66]], //03/04/15
    300. [1425589200000, [31.62, 31.82, 31.57, 31.82]], //03/05/15
    301. [1425675600000, [31.71, 31.78, 31.33, 31.42]], //03/06/15
    302.  
    303. [1425934800000, [31.52, 31.70, 31.49, 31.64]], //03/09/15
    304. [1426021200000, [31.50, 31.64, 31.17, 31.17]], //03/10/15
    305. [1426107600000, [31.28, 31.49, 31.15, 31.19]], //03/11/15
    306. [1426194000000, [31.27, 31.41, 31.17, 31.40]], //03/12/15
    307. [1426280400000, [31.28, 31.36, 30.81, 31.04]], //03/13/15
    308.  
    309. [1426539600000, [31.06, 31.48, 30.96, 31.45]], //03/16/15
    310. [1426626000000, [31.30, 31.39, 31.09, 31.31]], //03/17/15
    311. [1426712400000, [31.18, 31.85, 31.11, 31.64]], //03/18/15
    312. [1426798800000, [31.44, 31.61, 31.26, 31.33]], //03/19/15
    313. [1426885200000, [31.34, 31.53, 31.30, 31.40]], //03/20/15
    314.  
    315. [1427144400000, [31.48, 31.74, 31.45, 31.47]], //03/23/15
    316. [1427230800000, [31.38, 31.48, 31.27, 31.28]], //03/24/15
    317. [1427317200000, [31.23, 31.33, 30.91, 30.91]], //03/25/15
    318. [1427403600000, [31.80, 31.92, 31.17, 31.30]], //03/26/15
    319. [1427490000000, [31.34, 31.90, 30.60, 30.64]], //03/27/15
    320.  
    321. [1427749200000, [31.70, 32.20, 31.50, 32.12]], //03/30/15
    322. [1427835600000, [32.91, 33.60, 31.81, 32.18]] //03/31/15
    323. ]
    324. }]
    325. },
    326. {
    327. "type": "stock",
    328. "crosshair-x": {
    329. "plot-label": {
    330. "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
    331. "decimals": 2,
    332. "font-color": "#7CA82B",
    333. "text-alpha": 1,
    334. "background-color": "white",
    335. "alpha": 0.7,
    336. "border-color": "#7CA82B",
    337. "border-radius": "3px",
    338. "multiple": true
    339. },
    340. "scale-label": {
    341. "font-color": "gray",
    342. "background-color": "white",
    343. "border-width": 1,
    344. "border-color": "gray",
    345. "border-radius": "3px"
    346. },
    347. "line-color": "#7CA82B",
    348. "shared": true
    349. },
    350. "scale-x": {
    351. "min-value": 1420232400000,
    352. "step": "day",
    353. "transform": {
    354. "type": "date",
    355. "all": "%m/%d/%y"
    356. },
    357. "max-items": 6,
    358. "item": {
    359. "font-size": 10
    360. }
    361. },
    362. "scale-y": {
    363. "values": "30:34:4",
    364. "format": "$%v",
    365. "guide": {
    366. "line-style": "solid"
    367. },
    368. "item": {
    369. "font-size": 10
    370. }
    371. },
    372. "plot": {
    373. "aspect": "candlestick",
    374. "tooltip": {
    375. "visible": false
    376. },
    377. "trend-up": {
    378. "background-color": "#7CA82B",
    379. "line-color": "#7CA82B",
    380. "border-color": "#7CA82B"
    381. },
    382. "trend-down": {
    383. "background-color": "none",
    384. "line-color": "#7CA82B",
    385. "border-color": "#7CA82B"
    386. }
    387. },
    388. "plotarea": {
    389. "margin-left": "17%",
    390. "margin-right": "dynamic",
    391. "margin-top": "dynamic",
    392. "margin-bottom": "dynamic"
    393. },
    394. "labels": [{
    395. "text": "Green<br>Stock",
    396. "font-family": "Georgia",
    397. "font-color": "white",
    398. "x": "2%",
    399. "y": "35%",
    400. "height": "30%",
    401. "width": "7%",
    402. "background-color": "#7CA82B",
    403. "border-radius": "3px"
    404. }],
    405. "series": [{
    406. "values": [
    407. [1420232400000, [32.34, 33.46, 31.00, 32.46]], //01/02/15
    408.  
    409. [1420491600000, [32.80, 33.25, 32.52, 33.05]], //01/05/15
    410. [1420578000000, [33.05, 33.57, 32.93, 33.30]], //01/06/15
    411. [1420664400000, [33.21, 33.39, 32.98, 33.08]], //01/07/15
    412. [1420750800000, [33.32, 33.38, 33.13, 33.37]], //01/08/15
    413. [1420837200000, [33.52, 33.53, 32.95, 33.03]], //01/09/15
    414.  
    415. [1421096400000, [32.07, 32.14, 31.77, 31.98]], //01/12/15
    416. [1421182800000, [32.26, 32.33, 31.61, 31.86]], //01/13/15
    417. [1421269200000, [31.65, 31.85, 31.41, 31.78]], //01/14/15
    418. [1421355600000, [31.86, 31.97, 31.56, 31.58]], //01/15/15
    419. [1421442000000, [31.51, 32.34, 31.45, 32.30]], //01/16/15
    420.  
    421. [1421787600000, [32.84, 32.87, 32.55, 32.85]], //01/20/15
    422. [1421874000000, [32.83, 33.08, 32.71, 33.04]], //01/21/15
    423. [1421960400000, [33.30, 33.36, 32.96, 33.28]], //01/22/15
    424. [1422046800000, [33.43, 33.88, 33.29, 33.48]], //01/23/15
    425.  
    426. [1422306000000, [32.72, 32.74, 32.40, 32.60]], //01/26/15
    427. [1422392400000, [32.39, 32.46, 32.20, 32.38]], //01/27/15
    428. [1422478800000, [32.47, 32.49, 31.81, 31.84]], //01/28/15
    429. [1422565200000, [31.84, 32.20, 31.78, 32.08]], //01/29/15
    430. [1422651600000, [31.88, 32.11, 31.82, 31.89]], //01/30/15
    431.  
    432. [1422910800000, [33.00, 33.22, 32.90, 33.21]], //02/02/15
    433. [1422997200000, [33.29, 33.52, 33.26, 33.47]], //02/03/15
    434. [1423083600000, [33.41, 33.43, 33.08, 33.16]], //02/04/15
    435. [1423170000000, [33.25, 33.50, 33.23, 33.50]], //02/05/15
    436. [1423256400000, [33.54, 33.75, 33.47, 33.52]], //02/06/15
    437.  
    438. [1423515600000, [33.47, 33.75, 32.50, 32.64]], //02/09/15
    439. [1423602000000, [32.77, 33.05, 32.55, 32.96]], //02/10/15
    440. [1423688400000, [32.49, 32.82, 32.35, 32.77]], //02/11/15
    441. [1423774800000, [32.70, 32.99, 31.71, 31.89]], //02/12/15
    442. [1423861200000, [31.99, 32.57, 31.50, 32.55]], //02/13/15
    443.  
    444. [1424206800000, [31.02, 31.30, 30.98, 31.27]], //02/17/15
    445. [1424293200000, [31.34, 31.90, 31.15, 31.80]], //02/18/15
    446. [1424379600000, [31.85, 31.91, 31.05, 31.15]], //02/19/15
    447. [1424466000000, [30.88, 31.21, 30.80, 31.21]], //02/20/15
    448.  
    449. [1424725200000, [31.22, 31.30, 31.10, 31.17]], //02/23/15
    450. [1424811600000, [31.15, 31.45, 31.01, 31.39]], //02/24/15
    451. [1424898000000, [31.45, 32.06, 31.40, 31.91]], //02/25/15
    452. [1424984400000, [31.94, 32.01, 31.81, 31.89]], //02/26/15
    453. [1425070800000, [31.83, 32.27, 31.75, 31.99]], //02/27/15
    454.  
    455. [1425330000000, [31.90, 32.12, 31.85, 32.11]], //03/02/15
    456. [1425416400000, [32.05, 32.08, 31.78, 31.86]], //03/03/15
    457. [1425502800000, [31.76, 31.77, 31.47, 31.66]], //03/04/15
    458. [1425589200000, [31.62, 31.82, 31.57, 31.82]], //03/05/15
    459. [1425675600000, [31.71, 31.78, 31.33, 31.42]], //03/06/15
    460.  
    461. [1425934800000, [31.52, 32.71, 31.49, 32.51]], //03/09/15
    462. [1426021200000, [31.50, 32.34, 31.17, 32.15]], //03/10/15
    463. [1426107600000, [32.30, 32.49, 31.15, 31.19]], //03/11/15
    464. [1426194000000, [31.27, 31.41, 31.17, 31.40]], //03/12/15
    465. [1426280400000, [31.28, 31.36, 30.81, 31.04]], //03/13/15
    466.  
    467. [1426539600000, [31.06, 31.48, 30.96, 31.45]], //03/16/15
    468. [1426626000000, [31.30, 31.39, 31.09, 31.31]], //03/17/15
    469. [1426712400000, [31.18, 31.85, 31.11, 31.64]], //03/18/15
    470. [1426798800000, [31.44, 31.61, 31.26, 31.33]], //03/19/15
    471. [1426885200000, [31.34, 31.53, 31.30, 31.40]], //03/20/15
    472.  
    473. [1427144400000, [31.48, 31.74, 31.45, 31.47]], //03/23/15
    474. [1427230800000, [31.38, 31.48, 31.27, 31.28]], //03/24/15
    475. [1427317200000, [32.23, 32.33, 31.91, 31.91]], //03/25/15
    476. [1427403600000, [32.80, 32.92, 32.17, 32.30]], //03/26/15
    477. [1427490000000, [32.34, 32.90, 31.60, 31.64]], //03/27/15
    478.  
    479. [1427749200000, [30.98, 31.20, 30.97, 31.12]], //03/30/15
    480. [1427835600000, [30.15, 31.90, 30.01, 31.05]] //03/31/15
    481. ]
    482. }]
    483. }
    484. ]
    485. };
    486.  
    487. zingchart.render({
    488. id: 'myChart',
    489. data: myConfig,
    490. height: 400,
    491. width: "100%"
    492. });
    493. </script>
    494. </body>
    495.  
    496. </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. "layout": "3x1",
    3. "graphset": [{
    4. "type": "stock",
    5. "crosshair-x": {
    6. "plot-label": {
    7. "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
    8. "decimals": 2,
    9. "font-color": "#29A2CC",
    10. "text-alpha": 1,
    11. "background-color": "white",
    12. "alpha": 0.7,
    13. "border-color": "#29A2CC",
    14. "border-radius": "3px",
    15. "multiple": true
    16. },
    17. "scale-label": {
    18. "visible": false
    19. },
    20. "line-color": "#29A2CC",
    21. "shared": true
    22. },
    23. "scale-x": {
    24. "min-value": 1420232400000,
    25. "step": "day",
    26. "transform": {
    27. "type": "date",
    28. "all": "%m/%d/%y"
    29. },
    30. "max-items": 6,
    31. "item": {
    32. "font-size": 10
    33. }
    34. },
    35. "scale-y": {
    36. "values": "30:34:4",
    37. "format": "$%v",
    38. "guide": {
    39. "line-style": "solid"
    40. },
    41. "item": {
    42. "font-size": 10
    43. }
    44. },
    45. "plot": {
    46. "aspect": "candlestick",
    47. "tooltip": {
    48. "visible": false
    49. },
    50. "trend-up": {
    51. "background-color": "#29A2CC",
    52. "line-color": "#29A2CC",
    53. "border-color": "#29A2CC"
    54. },
    55. "trend-down": {
    56. "background-color": "none",
    57. "line-color": "#29A2CC",
    58. "border-color": "#29A2CC"
    59. }
    60. },
    61. "plotarea": {
    62. "margin-left": "17%",
    63. "margin-right": "dynamic",
    64. "margin-top": "dynamic",
    65. "margin-bottom": "dynamic"
    66. },
    67. "labels": [{
    68. "text": "Blue<br>Stock",
    69. "font-family": "Georgia",
    70. "font-color": "white",
    71. "x": "2%",
    72. "y": "35%",
    73. "height": "30%",
    74. "width": "7%",
    75. "background-color": "#29A2CC",
    76. "border-radius": "3px"
    77. }],
    78. "series": [{
    79. "values": [
    80. [1420232400000, [32.34, 32.46, 31.87, 32.06]], //01/02/15
    81.  
    82. [1420491600000, [32.80, 33.25, 32.52, 33.05]], //01/05/15
    83. [1420578000000, [33.05, 33.57, 32.93, 33.30]], //01/06/15
    84. [1420664400000, [33.21, 33.39, 32.98, 33.08]], //01/07/15
    85. [1420750800000, [33.32, 33.38, 33.13, 33.37]], //01/08/15
    86. [1420837200000, [33.52, 33.53, 32.95, 33.03]], //01/09/15
    87.  
    88. [1421096400000, [33.07, 33.14, 32.77, 32.98]], //01/12/15
    89. [1421182800000, [33.26, 33.33, 32.61, 32.86]], //01/13/15
    90. [1421269200000, [32.65, 32.85, 32.41, 32.78]], //01/14/15
    91. [1421355600000, [32.86, 32.97, 32.56, 32.58]], //01/15/15
    92. [1421442000000, [32.51, 32.65, 32.45, 32.59]], //01/16/15
    93.  
    94. [1421787600000, [32.84, 32.87, 32.55, 32.85]], //01/20/15
    95. [1421874000000, [32.83, 33.08, 32.71, 33.04]], //01/21/15
    96. [1421960400000, [33.30, 33.36, 32.96, 33.28]], //01/22/15
    97. [1422046800000, [33.43, 33.88, 33.29, 33.48]], //01/23/15
    98.  
    99. [1422306000000, [33.72, 33.74, 33.40, 33.60]], //01/26/15
    100. [1422392400000, [33.39, 33.46, 33.20, 33.38]], //01/27/15
    101. [1422478800000, [33.47, 33.49, 32.81, 32.84]], //01/28/15
    102. [1422565200000, [32.84, 33.20, 32.78, 33.08]], //01/29/15
    103. [1422651600000, [32.88, 33.11, 32.82, 32.89]], //01/30/15
    104.  
    105. [1422910800000, [33.00, 33.22, 32.90, 33.21]], //02/02/15
    106. [1422997200000, [33.29, 33.52, 33.26, 33.47]], //02/03/15
    107. [1423083600000, [33.41, 33.43, 33.08, 33.16]], //02/04/15
    108. [1423170000000, [33.25, 33.50, 33.23, 33.50]], //02/05/15
    109. [1423256400000, [33.54, 33.75, 33.47, 33.52]], //02/06/15
    110.  
    111. [1423515600000, [33.47, 33.75, 32.50, 32.64]], //02/09/15
    112. [1423602000000, [32.77, 33.05, 32.55, 32.96]], //02/10/15
    113. [1423688400000, [32.49, 32.82, 32.35, 32.77]], //02/11/15
    114. [1423774800000, [32.70, 32.99, 31.71, 31.89]], //02/12/15
    115. [1423861200000, [31.99, 32.57, 31.50, 32.55]], //02/13/15
    116.  
    117. [1424206800000, [31.02, 31.30, 30.98, 31.27]], //02/17/15
    118. [1424293200000, [31.34, 31.90, 31.15, 31.80]], //02/18/15
    119. [1424379600000, [31.85, 31.91, 31.05, 31.15]], //02/19/15
    120. [1424466000000, [30.88, 31.21, 30.80, 31.21]], //02/20/15
    121.  
    122. [1424725200000, [31.22, 31.30, 31.10, 31.17]], //02/23/15
    123. [1424811600000, [31.15, 31.45, 31.01, 31.39]], //02/24/15
    124. [1424898000000, [31.45, 32.06, 31.40, 31.91]], //02/25/15
    125. [1424984400000, [31.94, 32.01, 31.81, 31.89]], //02/26/15
    126. [1425070800000, [31.83, 32.27, 31.75, 31.99]], //02/27/15
    127.  
    128. [1425330000000, [31.90, 32.12, 31.85, 32.11]], //03/02/15
    129. [1425416400000, [32.05, 32.08, 31.78, 31.86]], //03/03/15
    130. [1425502800000, [31.76, 31.77, 31.47, 31.66]], //03/04/15
    131. [1425589200000, [31.62, 31.82, 31.57, 31.82]], //03/05/15
    132. [1425675600000, [31.71, 31.78, 31.33, 31.42]], //03/06/15
    133.  
    134. [1425934800000, [31.52, 31.70, 31.49, 31.64]], //03/09/15
    135. [1426021200000, [31.50, 31.64, 31.17, 31.17]], //03/10/15
    136. [1426107600000, [31.28, 31.49, 31.15, 31.19]], //03/11/15
    137. [1426194000000, [31.27, 31.41, 31.17, 31.40]], //03/12/15
    138. [1426280400000, [31.28, 31.36, 30.81, 31.04]], //03/13/15
    139.  
    140. [1426539600000, [31.06, 31.48, 30.96, 31.45]], //03/16/15
    141. [1426626000000, [31.30, 31.39, 31.09, 31.31]], //03/17/15
    142. [1426712400000, [31.18, 31.85, 31.11, 31.64]], //03/18/15
    143. [1426798800000, [31.44, 31.61, 31.26, 31.33]], //03/19/15
    144. [1426885200000, [31.34, 31.53, 31.30, 31.40]], //03/20/15
    145.  
    146. [1427144400000, [31.48, 31.74, 31.45, 31.47]], //03/23/15
    147. [1427230800000, [31.38, 31.48, 31.27, 31.28]], //03/24/15
    148. [1427317200000, [31.23, 31.33, 30.91, 30.91]], //03/25/15
    149. [1427403600000, [31.80, 31.92, 31.17, 31.30]], //03/26/15
    150. [1427490000000, [31.34, 31.90, 30.60, 30.64]], //03/27/15
    151.  
    152. [1427749200000, [30.98, 31.20, 30.97, 31.12]], //03/30/15
    153. [1427835600000, [31.15, 31.90, 30.81, 31.81]] //03/31/15
    154. ]
    155. }]
    156. },
    157. {
    158. "type": "stock",
    159. "crosshair-x": {
    160. "plot-label": {
    161. "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
    162. "decimals": 2,
    163. "font-color": "#D31E1E",
    164. "text-alpha": 1,
    165. "background-color": "white",
    166. "alpha": 0.7,
    167. "border-color": "#D31E1E",
    168. "border-radius": "3px",
    169. "multiple": true
    170. },
    171. "scale-label": {
    172. "visible": false
    173. },
    174. "line-color": "#D31E1E",
    175. "shared": true
    176. },
    177. "scale-x": {
    178. "min-value": 1420232400000,
    179. "step": "day",
    180. "transform": {
    181. "type": "date",
    182. "all": "%m/%d/%y"
    183. },
    184. "max-items": 6,
    185. "item": {
    186. "font-size": 10
    187. }
    188. },
    189. "scale-y": {
    190. "values": "30:34:4",
    191. "format": "$%v",
    192. "guide": {
    193. "line-style": "solid"
    194. },
    195. "item": {
    196. "font-size": 10
    197. }
    198. },
    199. "plot": {
    200. "aspect": "candlestick",
    201. "tooltip": {
    202. "visible": false
    203. },
    204. "trend-up": {
    205. "background-color": "#D31E1E",
    206. "line-color": "#D31E1E",
    207. "border-color": "#D31E1E"
    208. },
    209. "trend-down": {
    210. "background-color": "none",
    211. "line-color": "#D31E1E",
    212. "border-color": "#D31E1E"
    213. }
    214. },
    215. "plotarea": {
    216. "margin-left": "17%",
    217. "margin-right": "dynamic",
    218. "margin-top": "dynamic",
    219. "margin-bottom": "dynamic"
    220. },
    221. "labels": [{
    222. "text": "Red<br>Stock",
    223. "font-family": "Georgia",
    224. "font-color": "white",
    225. "x": "2%",
    226. "y": "35%",
    227. "height": "30%",
    228. "width": "7%",
    229. "background-color": "#D31E1E",
    230. "border-radius": "3px"
    231. }],
    232. "series": [{
    233. "values": [
    234. [1420232400000, [33.03, 33.49, 32.85, 33.07]], //01/02/15
    235.  
    236. [1420491600000, [31.80, 32.45, 31.52, 32.05]], //01/05/15
    237. [1420578000000, [32.30, 32.57, 31.93, 32.03]], //01/06/15
    238. [1420664400000, [33.21, 33.39, 32.98, 33.08]], //01/07/15
    239. [1420750800000, [33.32, 33.38, 33.13, 33.37]], //01/08/15
    240. [1420837200000, [33.52, 33.53, 32.95, 33.03]], //01/09/15
    241.  
    242. [1421096400000, [33.07, 33.14, 32.77, 32.98]], //01/12/15
    243. [1421182800000, [33.26, 33.33, 32.61, 32.86]], //01/13/15
    244. [1421269200000, [32.65, 32.85, 32.41, 32.78]], //01/14/15
    245. [1421355600000, [32.86, 32.97, 32.56, 32.58]], //01/15/15
    246. [1421442000000, [32.51, 32.65, 32.45, 32.59]], //01/16/15
    247.  
    248. [1421787600000, [32.43, 32.88, 32.29, 32.48]], //01/20/15
    249. [1421874000000, [32.30, 32.36, 31.96, 32.28]], //01/21/15
    250. [1421960400000, [31.83, 32.08, 31.71, 32.04]], //01/22/15
    251. [1422046800000, [31.84, 31.87, 31.55, 31.85]], //01/23/15
    252.  
    253. [1422306000000, [32.88, 33.11, 32.82, 32.89]], //01/26/15
    254. [1422392400000, [32.84, 33.20, 32.78, 33.08]], //01/27/15
    255. [1422478800000, [33.47, 33.49, 32.81, 32.84]], //01/28/15
    256. [1422565200000, [33.39, 33.46, 33.20, 33.38]], //01/29/15
    257. [1422651600000, [32.72, 32.74, 32.40, 32.60]], //01/30/15
    258.  
    259. [1422910800000, [33.00, 33.22, 32.90, 33.21]], //02/02/15
    260. [1422997200000, [33.29, 33.52, 33.26, 33.47]], //02/03/15
    261. [1423083600000, [33.41, 33.43, 33.08, 33.16]], //02/04/15
    262. [1423170000000, [33.25, 33.50, 33.23, 33.50]], //02/05/15
    263. [1423256400000, [33.54, 33.75, 33.47, 33.52]], //02/06/15
    264.  
    265. [1423515600000, [33.47, 33.75, 32.50, 32.64]], //02/09/15
    266. [1423602000000, [32.77, 33.05, 32.55, 32.96]], //02/10/15
    267. [1423688400000, [32.49, 32.82, 32.35, 32.77]], //02/11/15
    268. [1423774800000, [32.70, 32.99, 31.71, 31.89]], //02/12/15
    269. [1423861200000, [31.99, 32.57, 31.50, 32.55]], //02/13/15
    270.  
    271. [1424206800000, [32.02, 32.30, 31.98, 32.27]], //02/17/15
    272. [1424293200000, [32.34, 32.90, 32.15, 32.80]], //02/18/15
    273. [1424379600000, [32.85, 32.91, 32.05, 32.15]], //02/19/15
    274. [1424466000000, [31.88, 32.21, 31.80, 32.21]], //02/20/15
    275.  
    276. [1424725200000, [31.25, 32.30, 31.01, 32.17]], //02/23/15
    277. [1424811600000, [31.15, 32.45, 31.01, 32.39]], //02/24/15
    278. [1424898000000, [31.45, 32.06, 31.40, 31.91]], //02/25/15
    279. [1424984400000, [31.94, 32.01, 31.81, 31.89]], //02/26/15
    280. [1425070800000, [31.83, 32.27, 31.75, 31.99]], //02/27/15
    281.  
    282. [1425330000000, [32.50, 33.42, 32.35, 33.11]], //03/02/15
    283. [1425416400000, [32.05, 32.08, 30.56, 30.65]], //03/03/15
    284. [1425502800000, [31.76, 31.77, 31.47, 31.66]], //03/04/15
    285. [1425589200000, [31.62, 31.82, 31.57, 31.82]], //03/05/15
    286. [1425675600000, [31.71, 31.78, 31.33, 31.42]], //03/06/15
    287.  
    288. [1425934800000, [31.52, 31.70, 31.49, 31.64]], //03/09/15
    289. [1426021200000, [31.50, 31.64, 31.17, 31.17]], //03/10/15
    290. [1426107600000, [31.28, 31.49, 31.15, 31.19]], //03/11/15
    291. [1426194000000, [31.27, 31.41, 31.17, 31.40]], //03/12/15
    292. [1426280400000, [31.28, 31.36, 30.81, 31.04]], //03/13/15
    293.  
    294. [1426539600000, [31.06, 31.48, 30.96, 31.45]], //03/16/15
    295. [1426626000000, [31.30, 31.39, 31.09, 31.31]], //03/17/15
    296. [1426712400000, [31.18, 31.85, 31.11, 31.64]], //03/18/15
    297. [1426798800000, [31.44, 31.61, 31.26, 31.33]], //03/19/15
    298. [1426885200000, [31.34, 31.53, 31.30, 31.40]], //03/20/15
    299.  
    300. [1427144400000, [31.48, 31.74, 31.45, 31.47]], //03/23/15
    301. [1427230800000, [31.38, 31.48, 31.27, 31.28]], //03/24/15
    302. [1427317200000, [31.23, 31.33, 30.91, 30.91]], //03/25/15
    303. [1427403600000, [31.80, 31.92, 31.17, 31.30]], //03/26/15
    304. [1427490000000, [31.34, 31.90, 30.60, 30.64]], //03/27/15
    305.  
    306. [1427749200000, [31.70, 32.20, 31.50, 32.12]], //03/30/15
    307. [1427835600000, [32.91, 33.60, 31.81, 32.18]] //03/31/15
    308. ]
    309. }]
    310. },
    311. {
    312. "type": "stock",
    313. "crosshair-x": {
    314. "plot-label": {
    315. "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
    316. "decimals": 2,
    317. "font-color": "#7CA82B",
    318. "text-alpha": 1,
    319. "background-color": "white",
    320. "alpha": 0.7,
    321. "border-color": "#7CA82B",
    322. "border-radius": "3px",
    323. "multiple": true
    324. },
    325. "scale-label": {
    326. "font-color": "gray",
    327. "background-color": "white",
    328. "border-width": 1,
    329. "border-color": "gray",
    330. "border-radius": "3px"
    331. },
    332. "line-color": "#7CA82B",
    333. "shared": true
    334. },
    335. "scale-x": {
    336. "min-value": 1420232400000,
    337. "step": "day",
    338. "transform": {
    339. "type": "date",
    340. "all": "%m/%d/%y"
    341. },
    342. "max-items": 6,
    343. "item": {
    344. "font-size": 10
    345. }
    346. },
    347. "scale-y": {
    348. "values": "30:34:4",
    349. "format": "$%v",
    350. "guide": {
    351. "line-style": "solid"
    352. },
    353. "item": {
    354. "font-size": 10
    355. }
    356. },
    357. "plot": {
    358. "aspect": "candlestick",
    359. "tooltip": {
    360. "visible": false
    361. },
    362. "trend-up": {
    363. "background-color": "#7CA82B",
    364. "line-color": "#7CA82B",
    365. "border-color": "#7CA82B"
    366. },
    367. "trend-down": {
    368. "background-color": "none",
    369. "line-color": "#7CA82B",
    370. "border-color": "#7CA82B"
    371. }
    372. },
    373. "plotarea": {
    374. "margin-left": "17%",
    375. "margin-right": "dynamic",
    376. "margin-top": "dynamic",
    377. "margin-bottom": "dynamic"
    378. },
    379. "labels": [{
    380. "text": "Green<br>Stock",
    381. "font-family": "Georgia",
    382. "font-color": "white",
    383. "x": "2%",
    384. "y": "35%",
    385. "height": "30%",
    386. "width": "7%",
    387. "background-color": "#7CA82B",
    388. "border-radius": "3px"
    389. }],
    390. "series": [{
    391. "values": [
    392. [1420232400000, [32.34, 33.46, 31.00, 32.46]], //01/02/15
    393.  
    394. [1420491600000, [32.80, 33.25, 32.52, 33.05]], //01/05/15
    395. [1420578000000, [33.05, 33.57, 32.93, 33.30]], //01/06/15
    396. [1420664400000, [33.21, 33.39, 32.98, 33.08]], //01/07/15
    397. [1420750800000, [33.32, 33.38, 33.13, 33.37]], //01/08/15
    398. [1420837200000, [33.52, 33.53, 32.95, 33.03]], //01/09/15
    399.  
    400. [1421096400000, [32.07, 32.14, 31.77, 31.98]], //01/12/15
    401. [1421182800000, [32.26, 32.33, 31.61, 31.86]], //01/13/15
    402. [1421269200000, [31.65, 31.85, 31.41, 31.78]], //01/14/15
    403. [1421355600000, [31.86, 31.97, 31.56, 31.58]], //01/15/15
    404. [1421442000000, [31.51, 32.34, 31.45, 32.30]], //01/16/15
    405.  
    406. [1421787600000, [32.84, 32.87, 32.55, 32.85]], //01/20/15
    407. [1421874000000, [32.83, 33.08, 32.71, 33.04]], //01/21/15
    408. [1421960400000, [33.30, 33.36, 32.96, 33.28]], //01/22/15
    409. [1422046800000, [33.43, 33.88, 33.29, 33.48]], //01/23/15
    410.  
    411. [1422306000000, [32.72, 32.74, 32.40, 32.60]], //01/26/15
    412. [1422392400000, [32.39, 32.46, 32.20, 32.38]], //01/27/15
    413. [1422478800000, [32.47, 32.49, 31.81, 31.84]], //01/28/15
    414. [1422565200000, [31.84, 32.20, 31.78, 32.08]], //01/29/15
    415. [1422651600000, [31.88, 32.11, 31.82, 31.89]], //01/30/15
    416.  
    417. [1422910800000, [33.00, 33.22, 32.90, 33.21]], //02/02/15
    418. [1422997200000, [33.29, 33.52, 33.26, 33.47]], //02/03/15
    419. [1423083600000, [33.41, 33.43, 33.08, 33.16]], //02/04/15
    420. [1423170000000, [33.25, 33.50, 33.23, 33.50]], //02/05/15
    421. [1423256400000, [33.54, 33.75, 33.47, 33.52]], //02/06/15
    422.  
    423. [1423515600000, [33.47, 33.75, 32.50, 32.64]], //02/09/15
    424. [1423602000000, [32.77, 33.05, 32.55, 32.96]], //02/10/15
    425. [1423688400000, [32.49, 32.82, 32.35, 32.77]], //02/11/15
    426. [1423774800000, [32.70, 32.99, 31.71, 31.89]], //02/12/15
    427. [1423861200000, [31.99, 32.57, 31.50, 32.55]], //02/13/15
    428.  
    429. [1424206800000, [31.02, 31.30, 30.98, 31.27]], //02/17/15
    430. [1424293200000, [31.34, 31.90, 31.15, 31.80]], //02/18/15
    431. [1424379600000, [31.85, 31.91, 31.05, 31.15]], //02/19/15
    432. [1424466000000, [30.88, 31.21, 30.80, 31.21]], //02/20/15
    433.  
    434. [1424725200000, [31.22, 31.30, 31.10, 31.17]], //02/23/15
    435. [1424811600000, [31.15, 31.45, 31.01, 31.39]], //02/24/15
    436. [1424898000000, [31.45, 32.06, 31.40, 31.91]], //02/25/15
    437. [1424984400000, [31.94, 32.01, 31.81, 31.89]], //02/26/15
    438. [1425070800000, [31.83, 32.27, 31.75, 31.99]], //02/27/15
    439.  
    440. [1425330000000, [31.90, 32.12, 31.85, 32.11]], //03/02/15
    441. [1425416400000, [32.05, 32.08, 31.78, 31.86]], //03/03/15
    442. [1425502800000, [31.76, 31.77, 31.47, 31.66]], //03/04/15
    443. [1425589200000, [31.62, 31.82, 31.57, 31.82]], //03/05/15
    444. [1425675600000, [31.71, 31.78, 31.33, 31.42]], //03/06/15
    445.  
    446. [1425934800000, [31.52, 32.71, 31.49, 32.51]], //03/09/15
    447. [1426021200000, [31.50, 32.34, 31.17, 32.15]], //03/10/15
    448. [1426107600000, [32.30, 32.49, 31.15, 31.19]], //03/11/15
    449. [1426194000000, [31.27, 31.41, 31.17, 31.40]], //03/12/15
    450. [1426280400000, [31.28, 31.36, 30.81, 31.04]], //03/13/15
    451.  
    452. [1426539600000, [31.06, 31.48, 30.96, 31.45]], //03/16/15
    453. [1426626000000, [31.30, 31.39, 31.09, 31.31]], //03/17/15
    454. [1426712400000, [31.18, 31.85, 31.11, 31.64]], //03/18/15
    455. [1426798800000, [31.44, 31.61, 31.26, 31.33]], //03/19/15
    456. [1426885200000, [31.34, 31.53, 31.30, 31.40]], //03/20/15
    457.  
    458. [1427144400000, [31.48, 31.74, 31.45, 31.47]], //03/23/15
    459. [1427230800000, [31.38, 31.48, 31.27, 31.28]], //03/24/15
    460. [1427317200000, [32.23, 32.33, 31.91, 31.91]], //03/25/15
    461. [1427403600000, [32.80, 32.92, 32.17, 32.30]], //03/26/15
    462. [1427490000000, [32.34, 32.90, 31.60, 31.64]], //03/27/15
    463.  
    464. [1427749200000, [30.98, 31.20, 30.97, 31.12]], //03/30/15
    465. [1427835600000, [30.15, 31.90, 30.01, 31.05]] //03/31/15
    466. ]
    467. }]
    468. }
    469. ]
    470. };
    471.  
    472. zingchart.render({
    473. id: 'myChart',
    474. data: myConfig,
    475. height: 400,
    476. width: "100%"
    477. });