• 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.       "graphset": [{
    18.           "title": {
    19.             "text": "Stock Fund Performance Chart"
    20.           },
    21.           "type": "stock",
    22.           "height": "60%",
    23.           "width": "75%",
    24.           "x": "0%",
    25.           "y": "0%",
    26.           "crosshair-x": {
    27.             "plot-label": {
    28.               "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
    29.               "decimals": 2
    30.             },
    31.             "scale-label": {
    32.               "visible": false
    33.             },
    34.             "shared": true
    35.           },
    36.           "scale-x": {
    37.             "visible": false
    38.           },
    39.           "scale-y": {
    40.             "values": "29:33:2",
    41.             "format": "$%v",
    42.             "label": {
    43.               "text": "Prices"
    44.             },
    45.             "item": {
    46.               "font-size": 10
    47.             },
    48.             "guide": {
    49.               "line-style": "solid"
    50.             }
    51.           },
    52.           "plot": {
    53.             "aspect": "whisker",
    54.             "tooltip": {
    55.               "visible": false
    56.             },
    57.             "trend-up": {
    58.  
    59.             },
    60.             "trend-down": {
    61.               "alpha": 0.5
    62.             }
    63.           },
    64.           "plotarea": {
    65.             "margin-bottom": "dynamic"
    66.           },
    67.           "series": [{
    68.             "values": [
    69.               [1422910800000, [32.00, 32.22, 31.90, 32.21]], //02/02/15
    70.               [1422997200000, [32.29, 32.52, 32.26, 32.47]], //02/03/15
    71.               [1423083600000, [32.41, 32.43, 32.08, 32.16]], //02/04/15
    72.               [1423170000000, [32.25, 32.50, 32.23, 32.50]], //02/05/15
    73.               [1423256400000, [32.54, 32.75, 32.47, 32.52]], //02/06/15
    74.  
    75.               [1423515600000, [32.47, 32.75, 31.50, 31.64]], //02/09/15
    76.               [1423602000000, [31.77, 32.05, 31.55, 31.96]], //02/10/15
    77.               [1423688400000, [31.49, 31.82, 31.35, 31.77]], //02/11/15
    78.               [1423774800000, [31.70, 31.99, 30.71, 30.89]], //02/12/15
    79.               [1423861200000, [30.99, 31.57, 30.50, 31.55]], //02/13/15
    80.  
    81.               [1424206800000, [30.02, 30.30, 29.98, 30.27]], //02/17/15
    82.               [1424293200000, [30.34, 30.90, 30.15, 30.80]], //02/18/15
    83.               [1424379600000, [30.85, 30.91, 30.05, 30.15]], //02/19/15
    84.               [1424466000000, [29.88, 30.21, 29.80, 30.21]], //02/20/15
    85.  
    86.               [1424725200000, [30.22, 30.30, 30.10, 30.17]], //02/23/15
    87.               [1424811600000, [30.15, 30.45, 30.01, 30.39]], //02/24/15
    88.               [1424898000000, [30.45, 31.06, 30.40, 30.91]], //02/25/15
    89.               [1424984400000, [30.94, 31.01, 30.81, 30.89]], //02/26/15
    90.               [1425070800000, [30.83, 31.27, 30.75, 30.99]], //02/27/15
    91.  
    92.               [1425330000000, [30.90, 31.12, 30.85, 31.11]], //03/02/15
    93.               [1425416400000, [31.05, 31.08, 30.78, 30.86]], //03/03/15
    94.               [1425502800000, [30.76, 30.77, 30.47, 30.66]], //03/04/15
    95.               [1425589200000, [30.62, 30.82, 30.57, 30.82]], //03/05/15
    96.               [1425675600000, [30.71, 30.78, 30.33, 30.42]], //03/06/15
    97.  
    98.               [1425934800000, [30.52, 30.70, 30.49, 30.64]], //03/09/15
    99.               [1426021200000, [30.50, 30.64, 30.17, 30.17]], //03/10/15
    100.               [1426107600000, [30.28, 30.49, 30.15, 30.19]], //03/11/15
    101.               [1426194000000, [30.27, 30.41, 30.17, 30.40]], //03/12/15
    102.               [1426280400000, [30.28, 30.36, 29.81, 30.04]], //03/13/15
    103.  
    104.               [1426539600000, [30.06, 30.48, 29.96, 30.45]], //03/16/15
    105.               [1426626000000, [30.30, 30.39, 30.09, 30.31]], //03/17/15
    106.               [1426712400000, [30.18, 30.85, 30.11, 30.64]], //03/18/15
    107.               [1426798800000, [30.44, 30.61, 30.26, 30.33]], //03/19/15
    108.               [1426885200000, [30.34, 30.53, 30.30, 30.40]], //03/20/15
    109.  
    110.               [1427144400000, [30.48, 30.74, 30.45, 30.47]], //03/23/15
    111.               [1427230800000, [30.38, 30.48, 30.27, 30.28]], //03/24/15
    112.               [1427317200000, [30.23, 30.33, 29.91, 29.91]], //03/25/15
    113.               [1427403600000, [30.80, 30.92, 30.17, 30.30]], //03/26/15
    114.               [1427490000000, [30.34, 30.90, 29.60, 29.64]], //03/27/15
    115.  
    116.               [1427749200000, [29.98, 30.20, 29.97, 30.12]], //03/30/15
    117.               [1427835600000, [30.15, 30.90, 29.81, 30.81]] //03/31/15
    118.             ]
    119.           }]
    120.         },
    121.         {
    122.           "type": "area",
    123.           "height": "40%",
    124.           "width": "75%",
    125.           "x": "0%",
    126.           "y": "60%",
    127.           "crosshair-x": {
    128.             "plot-label": {
    129.               "text": "Volume: %vM",
    130.               "decimals": 2
    131.             },
    132.             "scale-label": {
    133.               "text": "%v"
    134.             },
    135.             "shared": true
    136.           },
    137.           "scale-x": {
    138.             "min-value": 1422910800000,
    139.             "step": "day",
    140.             "transform": {
    141.               "type": "date",
    142.               "all": "%D,<br>%m/%d"
    143.             },
    144.             "max-items": 6,
    145.             "item": {
    146.               "font-size": 10
    147.             }
    148.           },
    149.           "scale-y": {
    150.             "values": "0:3:3",
    151.             "format": "%vM",
    152.             "label": {
    153.               "text": "Volume"
    154.             },
    155.             "item": {
    156.               "font-size": 10
    157.             },
    158.             "guide": {
    159.               "line-style": "solid"
    160.             }
    161.           },
    162.           "plot": {
    163.             "tooltip": {
    164.               "visible": false
    165.             },
    166.             "line-width": 1,
    167.             "marker": {
    168.               "visible": false
    169.             }
    170.           },
    171.           "plotarea": {
    172.             "margin-top": "dynamic"
    173.           },
    174.           "series": [{
    175.             "values": [
    176.               [1422910800000, 1.6], //02/02/15
    177.               [1422997200000, 1.1], //02/03/15
    178.               [1423083600000, 1.3], //02/04/15
    179.               [1423170000000, 1.5], //02/05/15
    180.               [1423256400000, 1.9], //02/06/15
    181.  
    182.               [1423515600000, 2.0], //02/09/15
    183.               [1423602000000, 2.4], //02/10/15
    184.               [1423688400000, 1.4], //02/11/15
    185.               [1423774800000, 1.3], //02/12/15
    186.               [1423861200000, 1.0], //02/13/15
    187.  
    188.               [1424206800000, 0.9], //02/17/15
    189.               [1424293200000, 1.1], //02/18/15
    190.               [1424379600000, 0.5], //02/19/15
    191.               [1424466000000, 0.8], //02/20/15
    192.  
    193.               [1424725200000, 1.0], //02/23/15
    194.               [1424811600000, 1.5], //02/24/15
    195.               [1424898000000, 1.3], //02/25/15
    196.               [1424984400000, 1.4], //02/26/15
    197.               [1425070800000, 0.9], //02/27/15
    198.  
    199.               [1425330000000, 1.8], //03/02/15
    200.               [1425416400000, 0.8], //03/03/15
    201.               [1425502800000, 1.2], //03/04/15
    202.               [1425589200000, 1.4], //03/05/15
    203.               [1425675600000, 0.9], //03/06/15
    204.  
    205.               [1425934800000, 0.9], //03/09/15
    206.               [1426021200000, 1.1], //03/10/15
    207.               [1426107600000, 1.5], //03/11/15
    208.               [1426194000000, 1.3], //03/12/15
    209.               [1426280400000, 1.2], //03/13/15
    210.  
    211.               [1426539600000, 1.4], //03/16/15
    212.               [1426626000000, 1.7], //03/17/15
    213.               [1426712400000, 1.6], //03/18/15
    214.               [1426798800000, 1.1], //03/19/15
    215.               [1426885200000, 1.0], //03/20/15
    216.  
    217.               [1427144400000, 0.9], //03/23/15
    218.               [1427230800000, 1.9], //03/24/15
    219.               [1427317200000, 1.1], //03/25/15
    220.               [1427403600000, 1.5], //03/26/15
    221.               [1427490000000, 1.3], //03/27/15
    222.  
    223.               [1427749200000, 1.2], //03/30/15
    224.               [1427835600000, 2.3], //03/31/15
    225.             ]
    226.           }]
    227.         },
    228.         {
    229.           "type": "bar",
    230.           "height": "100%",
    231.           "width": "25%",
    232.           "x": "75%",
    233.           "y": "0%",
    234.           "scale-x": {
    235.             "placement": "opposite",
    236.             "label": {
    237.               "text": "Sector Breakdown"
    238.             },
    239.             "labels": [""],
    240.             "tick": {
    241.               "visible": false
    242.             }
    243.           },
    244.           "scale-y": {
    245.             "format": "%v%",
    246.             "values": "0:100:25",
    247.             "guide": {
    248.               "line-style": "solid"
    249.             },
    250.             "item": {
    251.               "font-size": 10
    252.             },
    253.           },
    254.           "plot": {
    255.             "stacked": true,
    256.             "stack-type": "100%",
    257.             "tooltip": {
    258.               "text": "%t"
    259.             }
    260.           },
    261.           "series": [{
    262.               "values": [59],
    263.               "text": "Consumer Goods"
    264.             },
    265.             {
    266.               "values": [55],
    267.               "text": "Information Technology"
    268.             },
    269.             {
    270.               "values": [30],
    271.               "text": "Financials"
    272.             },
    273.             {
    274.               "values": [28],
    275.               "text": "Healthcare"
    276.             },
    277.             {
    278.               "values": [15],
    279.               "text": "Industrials"
    280.             }
    281.           ]
    282.         }
    283.       ]
    284.     };
    285.  
    286.     zingchart.render({
    287.       id: 'myChart',
    288.       data: myConfig,
    289.       height: 400,
    290.       width: "100%"
    291.     });
    292.   </script>
    293. </body>
    294.  
    295. </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.   "graphset": [{
    3.       "title": {
    4.         "text": "Stock Fund Performance Chart"
    5.       },
    6.       "type": "stock",
    7.       "height": "60%",
    8.       "width": "75%",
    9.       "x": "0%",
    10.       "y": "0%",
    11.       "crosshair-x": {
    12.         "plot-label": {
    13.           "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
    14.           "decimals": 2
    15.         },
    16.         "scale-label": {
    17.           "visible": false
    18.         },
    19.         "shared": true
    20.       },
    21.       "scale-x": {
    22.         "visible": false
    23.       },
    24.       "scale-y": {
    25.         "values": "29:33:2",
    26.         "format": "$%v",
    27.         "label": {
    28.           "text": "Prices"
    29.         },
    30.         "item": {
    31.           "font-size": 10
    32.         },
    33.         "guide": {
    34.           "line-style": "solid"
    35.         }
    36.       },
    37.       "plot": {
    38.         "aspect": "whisker",
    39.         "tooltip": {
    40.           "visible": false
    41.         },
    42.         "trend-up": {
    43.  
    44.         },
    45.         "trend-down": {
    46.           "alpha": 0.5
    47.         }
    48.       },
    49.       "plotarea": {
    50.         "margin-bottom": "dynamic"
    51.       },
    52.       "series": [{
    53.         "values": [
    54.           [1422910800000, [32.00, 32.22, 31.90, 32.21]], //02/02/15
    55.           [1422997200000, [32.29, 32.52, 32.26, 32.47]], //02/03/15
    56.           [1423083600000, [32.41, 32.43, 32.08, 32.16]], //02/04/15
    57.           [1423170000000, [32.25, 32.50, 32.23, 32.50]], //02/05/15
    58.           [1423256400000, [32.54, 32.75, 32.47, 32.52]], //02/06/15
    59.  
    60.           [1423515600000, [32.47, 32.75, 31.50, 31.64]], //02/09/15
    61.           [1423602000000, [31.77, 32.05, 31.55, 31.96]], //02/10/15
    62.           [1423688400000, [31.49, 31.82, 31.35, 31.77]], //02/11/15
    63.           [1423774800000, [31.70, 31.99, 30.71, 30.89]], //02/12/15
    64.           [1423861200000, [30.99, 31.57, 30.50, 31.55]], //02/13/15
    65.  
    66.           [1424206800000, [30.02, 30.30, 29.98, 30.27]], //02/17/15
    67.           [1424293200000, [30.34, 30.90, 30.15, 30.80]], //02/18/15
    68.           [1424379600000, [30.85, 30.91, 30.05, 30.15]], //02/19/15
    69.           [1424466000000, [29.88, 30.21, 29.80, 30.21]], //02/20/15
    70.  
    71.           [1424725200000, [30.22, 30.30, 30.10, 30.17]], //02/23/15
    72.           [1424811600000, [30.15, 30.45, 30.01, 30.39]], //02/24/15
    73.           [1424898000000, [30.45, 31.06, 30.40, 30.91]], //02/25/15
    74.           [1424984400000, [30.94, 31.01, 30.81, 30.89]], //02/26/15
    75.           [1425070800000, [30.83, 31.27, 30.75, 30.99]], //02/27/15
    76.  
    77.           [1425330000000, [30.90, 31.12, 30.85, 31.11]], //03/02/15
    78.           [1425416400000, [31.05, 31.08, 30.78, 30.86]], //03/03/15
    79.           [1425502800000, [30.76, 30.77, 30.47, 30.66]], //03/04/15
    80.           [1425589200000, [30.62, 30.82, 30.57, 30.82]], //03/05/15
    81.           [1425675600000, [30.71, 30.78, 30.33, 30.42]], //03/06/15
    82.  
    83.           [1425934800000, [30.52, 30.70, 30.49, 30.64]], //03/09/15
    84.           [1426021200000, [30.50, 30.64, 30.17, 30.17]], //03/10/15
    85.           [1426107600000, [30.28, 30.49, 30.15, 30.19]], //03/11/15
    86.           [1426194000000, [30.27, 30.41, 30.17, 30.40]], //03/12/15
    87.           [1426280400000, [30.28, 30.36, 29.81, 30.04]], //03/13/15
    88.  
    89.           [1426539600000, [30.06, 30.48, 29.96, 30.45]], //03/16/15
    90.           [1426626000000, [30.30, 30.39, 30.09, 30.31]], //03/17/15
    91.           [1426712400000, [30.18, 30.85, 30.11, 30.64]], //03/18/15
    92.           [1426798800000, [30.44, 30.61, 30.26, 30.33]], //03/19/15
    93.           [1426885200000, [30.34, 30.53, 30.30, 30.40]], //03/20/15
    94.  
    95.           [1427144400000, [30.48, 30.74, 30.45, 30.47]], //03/23/15
    96.           [1427230800000, [30.38, 30.48, 30.27, 30.28]], //03/24/15
    97.           [1427317200000, [30.23, 30.33, 29.91, 29.91]], //03/25/15
    98.           [1427403600000, [30.80, 30.92, 30.17, 30.30]], //03/26/15
    99.           [1427490000000, [30.34, 30.90, 29.60, 29.64]], //03/27/15
    100.  
    101.           [1427749200000, [29.98, 30.20, 29.97, 30.12]], //03/30/15
    102.           [1427835600000, [30.15, 30.90, 29.81, 30.81]] //03/31/15
    103.         ]
    104.       }]
    105.     },
    106.     {
    107.       "type": "area",
    108.       "height": "40%",
    109.       "width": "75%",
    110.       "x": "0%",
    111.       "y": "60%",
    112.       "crosshair-x": {
    113.         "plot-label": {
    114.           "text": "Volume: %vM",
    115.           "decimals": 2
    116.         },
    117.         "scale-label": {
    118.           "text": "%v"
    119.         },
    120.         "shared": true
    121.       },
    122.       "scale-x": {
    123.         "min-value": 1422910800000,
    124.         "step": "day",
    125.         "transform": {
    126.           "type": "date",
    127.           "all": "%D,<br>%m/%d"
    128.         },
    129.         "max-items": 6,
    130.         "item": {
    131.           "font-size": 10
    132.         }
    133.       },
    134.       "scale-y": {
    135.         "values": "0:3:3",
    136.         "format": "%vM",
    137.         "label": {
    138.           "text": "Volume"
    139.         },
    140.         "item": {
    141.           "font-size": 10
    142.         },
    143.         "guide": {
    144.           "line-style": "solid"
    145.         }
    146.       },
    147.       "plot": {
    148.         "tooltip": {
    149.           "visible": false
    150.         },
    151.         "line-width": 1,
    152.         "marker": {
    153.           "visible": false
    154.         }
    155.       },
    156.       "plotarea": {
    157.         "margin-top": "dynamic"
    158.       },
    159.       "series": [{
    160.         "values": [
    161.           [1422910800000, 1.6], //02/02/15
    162.           [1422997200000, 1.1], //02/03/15
    163.           [1423083600000, 1.3], //02/04/15
    164.           [1423170000000, 1.5], //02/05/15
    165.           [1423256400000, 1.9], //02/06/15
    166.  
    167.           [1423515600000, 2.0], //02/09/15
    168.           [1423602000000, 2.4], //02/10/15
    169.           [1423688400000, 1.4], //02/11/15
    170.           [1423774800000, 1.3], //02/12/15
    171.           [1423861200000, 1.0], //02/13/15
    172.  
    173.           [1424206800000, 0.9], //02/17/15
    174.           [1424293200000, 1.1], //02/18/15
    175.           [1424379600000, 0.5], //02/19/15
    176.           [1424466000000, 0.8], //02/20/15
    177.  
    178.           [1424725200000, 1.0], //02/23/15
    179.           [1424811600000, 1.5], //02/24/15
    180.           [1424898000000, 1.3], //02/25/15
    181.           [1424984400000, 1.4], //02/26/15
    182.           [1425070800000, 0.9], //02/27/15
    183.  
    184.           [1425330000000, 1.8], //03/02/15
    185.           [1425416400000, 0.8], //03/03/15
    186.           [1425502800000, 1.2], //03/04/15
    187.           [1425589200000, 1.4], //03/05/15
    188.           [1425675600000, 0.9], //03/06/15
    189.  
    190.           [1425934800000, 0.9], //03/09/15
    191.           [1426021200000, 1.1], //03/10/15
    192.           [1426107600000, 1.5], //03/11/15
    193.           [1426194000000, 1.3], //03/12/15
    194.           [1426280400000, 1.2], //03/13/15
    195.  
    196.           [1426539600000, 1.4], //03/16/15
    197.           [1426626000000, 1.7], //03/17/15
    198.           [1426712400000, 1.6], //03/18/15
    199.           [1426798800000, 1.1], //03/19/15
    200.           [1426885200000, 1.0], //03/20/15
    201.  
    202.           [1427144400000, 0.9], //03/23/15
    203.           [1427230800000, 1.9], //03/24/15
    204.           [1427317200000, 1.1], //03/25/15
    205.           [1427403600000, 1.5], //03/26/15
    206.           [1427490000000, 1.3], //03/27/15
    207.  
    208.           [1427749200000, 1.2], //03/30/15
    209.           [1427835600000, 2.3], //03/31/15
    210.         ]
    211.       }]
    212.     },
    213.     {
    214.       "type": "bar",
    215.       "height": "100%",
    216.       "width": "25%",
    217.       "x": "75%",
    218.       "y": "0%",
    219.       "scale-x": {
    220.         "placement": "opposite",
    221.         "label": {
    222.           "text": "Sector Breakdown"
    223.         },
    224.         "labels": [""],
    225.         "tick": {
    226.           "visible": false
    227.         }
    228.       },
    229.       "scale-y": {
    230.         "format": "%v%",
    231.         "values": "0:100:25",
    232.         "guide": {
    233.           "line-style": "solid"
    234.         },
    235.         "item": {
    236.           "font-size": 10
    237.         },
    238.       },
    239.       "plot": {
    240.         "stacked": true,
    241.         "stack-type": "100%",
    242.         "tooltip": {
    243.           "text": "%t"
    244.         }
    245.       },
    246.       "series": [{
    247.           "values": [59],
    248.           "text": "Consumer Goods"
    249.         },
    250.         {
    251.           "values": [55],
    252.           "text": "Information Technology"
    253.         },
    254.         {
    255.           "values": [30],
    256.           "text": "Financials"
    257.         },
    258.         {
    259.           "values": [28],
    260.           "text": "Healthcare"
    261.         },
    262.         {
    263.           "values": [15],
    264.           "text": "Industrials"
    265.         }
    266.       ]
    267.     }
    268.   ]
    269. };
    270.  
    271. zingchart.render({
    272.   id: 'myChart',
    273.   data: myConfig,
    274.   height: 400,
    275.   width: "100%"
    276. });