• 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": "mixed",
    18.       "title": {
    19.         "text": "Stock & Volume Chart"
    20.       },
    21.       "scale-y": {
    22.         "offset-start": "35%",
    23.         "values": "29:33:2",
    24.         "format": "$%v",
    25.         "label": {
    26.           "text": "Prices"
    27.         }
    28.       },
    29.       "scale-y-2": {
    30.         "blended": true,
    31.         "offset-end": "75%",
    32.         "placement": "default",
    33.         "values": "0:3:3",
    34.         "format": "%vM",
    35.         "label": {
    36.           "text": "Volume"
    37.         }
    38.       },
    39.       "series": [{
    40.           "type": "stock",
    41.           "scales": "scale-x,scale-y",
    42.           "values": [
    43.             [31.34, 31.46, 30.87, 31.06],
    44.             [31.80, 32.25, 31.52, 32.05],
    45.             [32.05, 32.57, 31.93, 32.30],
    46.             [32.21, 32.39, 31.98, 32.08],
    47.             [32.32, 32.38, 32.13, 32.37],
    48.             [32.52, 32.53, 31.95, 32.03],
    49.             [32.07, 32.14, 31.77, 31.98],
    50.             [32.26, 32.33, 31.61, 31.86],
    51.             [31.65, 31.85, 31.41, 31.78],
    52.             [31.86, 31.97, 31.56, 31.58],
    53.             [31.51, 31.65, 31.45, 31.59],
    54.             [31.84, 31.87, 31.55, 31.85],
    55.             [31.83, 32.08, 31.71, 32.04],
    56.             [32.30, 32.36, 31.96, 32.28],
    57.             [32.43, 32.88, 32.29, 32.48],
    58.             [32.72, 32.74, 32.40, 32.60],
    59.             [32.39, 32.46, 32.20, 32.38],
    60.             [32.47, 32.49, 31.81, 31.84],
    61.             [31.84, 32.20, 31.78, 32.08],
    62.             [31.88, 32.11, 31.82, 31.89]
    63.           ]
    64.         },
    65.         {
    66.           "type": "bar",
    67.           "scales": "scale-x,scale-y-2",
    68.           "values": [
    69.             1.3,
    70.             1.5,
    71.             2.1,
    72.             2.2,
    73.             1.9,
    74.             1.7,
    75.             1.8,
    76.             1.9,
    77.             1.9,
    78.             2.0,
    79.             1.4,
    80.             2.1,
    81.             2.3,
    82.             2.6,
    83.             2.5,
    84.             2.3,
    85.             1.5,
    86.             2.4,
    87.             1.6,
    88.             1.4
    89.           ]
    90.         }
    91.       ]
    92.     };
    93.  
    94.     zingchart.render({
    95.       id: 'myChart',
    96.       data: myConfig,
    97.       height: 400,
    98.       width: "100%"
    99.     });
    100.   </script>
    101. </body>
    102.  
    103. </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": "mixed",
    3.   "title": {
    4.     "text": "Stock & Volume Chart"
    5.   },
    6.   "scale-y": {
    7.     "offset-start": "35%",
    8.     "values": "29:33:2",
    9.     "format": "$%v",
    10.     "label": {
    11.       "text": "Prices"
    12.     }
    13.   },
    14.   "scale-y-2": {
    15.     "blended": true,
    16.     "offset-end": "75%",
    17.     "placement": "default",
    18.     "values": "0:3:3",
    19.     "format": "%vM",
    20.     "label": {
    21.       "text": "Volume"
    22.     }
    23.   },
    24.   "series": [{
    25.       "type": "stock",
    26.       "scales": "scale-x,scale-y",
    27.       "values": [
    28.         [31.34, 31.46, 30.87, 31.06],
    29.         [31.80, 32.25, 31.52, 32.05],
    30.         [32.05, 32.57, 31.93, 32.30],
    31.         [32.21, 32.39, 31.98, 32.08],
    32.         [32.32, 32.38, 32.13, 32.37],
    33.         [32.52, 32.53, 31.95, 32.03],
    34.         [32.07, 32.14, 31.77, 31.98],
    35.         [32.26, 32.33, 31.61, 31.86],
    36.         [31.65, 31.85, 31.41, 31.78],
    37.         [31.86, 31.97, 31.56, 31.58],
    38.         [31.51, 31.65, 31.45, 31.59],
    39.         [31.84, 31.87, 31.55, 31.85],
    40.         [31.83, 32.08, 31.71, 32.04],
    41.         [32.30, 32.36, 31.96, 32.28],
    42.         [32.43, 32.88, 32.29, 32.48],
    43.         [32.72, 32.74, 32.40, 32.60],
    44.         [32.39, 32.46, 32.20, 32.38],
    45.         [32.47, 32.49, 31.81, 31.84],
    46.         [31.84, 32.20, 31.78, 32.08],
    47.         [31.88, 32.11, 31.82, 31.89]
    48.       ]
    49.     },
    50.     {
    51.       "type": "bar",
    52.       "scales": "scale-x,scale-y-2",
    53.       "values": [
    54.         1.3,
    55.         1.5,
    56.         2.1,
    57.         2.2,
    58.         1.9,
    59.         1.7,
    60.         1.8,
    61.         1.9,
    62.         1.9,
    63.         2.0,
    64.         1.4,
    65.         2.1,
    66.         2.3,
    67.         2.6,
    68.         2.5,
    69.         2.3,
    70.         1.5,
    71.         2.4,
    72.         1.6,
    73.         1.4
    74.       ]
    75.     }
    76.   ]
    77. };
    78.  
    79. zingchart.render({
    80.   id: 'myChart',
    81.   data: myConfig,
    82.   height: 400,
    83.   width: "100%"
    84. });