• 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: 'range',
    18.       scaleX: {
    19.         minValue: 1420232400000,
    20.         step: 'day',
    21.         transform: {
    22.           type: 'date',
    23.           all: '%M %d'
    24.         },
    25.         item: {
    26.           fontSize: 10
    27.         },
    28.         maxItems: 13,
    29.  
    30.         zooming: true,
    31.         zoomToValues: [1422910800000, 1430427600000],
    32.         guide: {
    33.           alpha: 1,
    34.           lineStyle: 'solid',
    35.           visible: true
    36.         },
    37.         minorTicks: 7,
    38.         minorGuide: {
    39.           alpha: 0.7,
    40.           lineStyle: 'dotted'
    41.         },
    42.         markers: [{
    43.             type: 'area',
    44.             backgroundColor: '#BBDEFB',
    45.             range: [1420232400000, 1422651600000],
    46.             valueRange: true
    47.           },
    48.           {
    49.             type: 'area',
    50.             backgroundColor: '#BBDEFB',
    51.             range: [1425330000000, 1427835600000],
    52.             valueRange: true
    53.           },
    54.           {
    55.             type: 'area',
    56.             backgroundColor: '#BBDEFB',
    57.             range: [1430514000000, 1432933200000],
    58.             valueRange: true
    59.           }
    60.         ]
    61.       },
    62.       scrollX: {
    63.  
    64.       },
    65.       preview: {},
    66.       crosshairX: {
    67.         alpha: 0.3,
    68.         lineWidth: '100%',
    69.         plotLabel: {
    70.           text: '$%node-min-value-$%node-max-value',
    71.  
    72.           borderRadius: 3,
    73.           decimals: 2,
    74.           multiple: true,
    75.           placement: 'node-top'
    76.         },
    77.         scaleLabel: {
    78.           borderRadius: 3,
    79.         }
    80.       },
    81.       scaleY: {
    82.         values: '29:33:1',
    83.         format: '$%v',
    84.         item: {
    85.           fontSize: 10
    86.         },
    87.         guide: {
    88.           visible: false
    89.         }
    90.       },
    91.       plot: {
    92.         backgroundColor: '#2196F3',
    93.         lineColor: '#2196F3',
    94.         lineWidth: 1,
    95.         marker: {
    96.           visible: false
    97.         },
    98.         tooltip: {
    99.           visible: false
    100.         }
    101.       },
    102.       series: [{
    103.         values: [
    104.           [1420232400000, [31.34, 31.06]], //01/02/15
    105.  
    106.           [1420491600000, [31.80, 32.05]], //01/05/15
    107.           [1420578000000, [32.05, 32.30]], //01/06/15
    108.           [1420664400000, [32.21, 32.08]], //01/07/15
    109.           [1420750800000, [32.32, 32.37]], //01/08/15
    110.           [1420837200000, [32.52, 32.03]], //01/09/15
    111.  
    112.           [1421096400000, [32.07, 31.98]], //01/12/15
    113.           [1421182800000, [32.26, 31.86]], //01/13/15
    114.           [1421269200000, [31.65, 31.78]], //01/14/15
    115.           [1421355600000, [31.86, 31.58]], //01/15/15
    116.           [1421442000000, [31.51, 31.59]], //01/16/15
    117.  
    118.           [1421787600000, [31.84, 31.85]], //01/20/15
    119.           [1421874000000, [31.83, 32.04]], //01/21/15
    120.           [1421960400000, [32.30, 32.28]], //01/22/15
    121.           [1422046800000, [32.43, 32.48]], //01/23/15
    122.  
    123.           [1422306000000, [32.72, 32.60]], //01/26/15
    124.           [1422392400000, [32.39, 32.38]], //01/27/15
    125.           [1422478800000, [32.47, 31.84]], //01/28/15
    126.           [1422565200000, [31.84, 32.08]], //01/29/15
    127.           [1422651600000, [31.88, 31.89]], //01/30/15
    128.  
    129.           [1422910800000, [32.00, 32.21]], //02/02/15
    130.           [1422997200000, [32.29, 32.47]], //02/03/15
    131.           [1423083600000, [32.41, 32.16]], //02/04/15
    132.           [1423170000000, [32.25, 32.50]], //02/05/15
    133.           [1423256400000, [32.54, 32.52]], //02/06/15
    134.  
    135.           [1423515600000, [32.47, 31.64]], //02/09/15
    136.           [1423602000000, [31.77, 31.96]], //02/10/15
    137.           [1423688400000, [31.49, 31.77]], //02/11/15
    138.           [1423774800000, [31.70, 30.89]], //02/12/15
    139.           [1423861200000, [30.99, 31.55]], //02/13/15
    140.  
    141.           [1424206800000, [30.02, 30.27]], //02/17/15
    142.           [1424293200000, [30.34, 30.80]], //02/18/15
    143.           [1424379600000, [30.85, 30.15]], //02/19/15
    144.           [1424466000000, [29.88, 30.21]], //02/20/15
    145.  
    146.           [1424725200000, [30.22, 30.17]], //02/23/15
    147.           [1424811600000, [30.15, 30.39]], //02/24/15
    148.           [1424898000000, [30.45, 30.91]], //02/25/15
    149.           [1424984400000, [30.94, 30.89]], //02/26/15
    150.           [1425070800000, [30.83, 30.99]], //02/27/15
    151.  
    152.           [1425330000000, [30.90, 31.11]], //03/02/15
    153.           [1425416400000, [31.05, 30.86]], //03/03/15
    154.           [1425502800000, [30.76, 30.66]], //03/04/15
    155.           [1425589200000, [30.62, 30.82]], //03/05/15
    156.           [1425675600000, [30.71, 30.42]], //03/06/15
    157.  
    158.           [1425934800000, [30.52, 30.64]], //03/09/15
    159.           [1426021200000, [30.50, 30.17]], //03/10/15
    160.           [1426107600000, [30.28, 30.19]], //03/11/15
    161.           [1426194000000, [30.27, 30.40]], //03/12/15
    162.           [1426280400000, [30.28, 30.04]], //03/13/15
    163.  
    164.           [1426539600000, [30.06, 30.45]], //03/16/15
    165.           [1426626000000, [30.30, 30.31]], //03/17/15
    166.           [1426712400000, [30.18, 30.64]], //03/18/15
    167.           [1426798800000, [30.44, 30.33]], //03/19/15
    168.           [1426885200000, [30.34, 30.40]], //03/20/15
    169.  
    170.           [1427144400000, [30.48, 30.47]], //03/23/15
    171.           [1427230800000, [30.38, 30.28]], //03/24/15
    172.           [1427317200000, [30.23, 29.91]], //03/25/15
    173.           [1427403600000, [30.80, 30.30]], //03/26/15
    174.           [1427490000000, [30.34, 29.64]], //03/27/15
    175.  
    176.           [1427749200000, [29.98, 30.12]], //03/30/15
    177.           [1427835600000, [30.15, 30.81]], //03/31/15
    178.           [1427922000000, [31.34, 31.06]], //04/01/15
    179.           [1428008400000, [31.80, 32.05]], //04/02/15
    180.  
    181.           [1428354000000, [32.05, 32.30]], //04/06/15
    182.           [1428440400000, [32.21, 32.08]], //04/07/15
    183.           [1428526800000, [32.32, 32.37]], //04/08/15
    184.           [1428613200000, [32.52, 32.03]], //04/09/15
    185.           [1428699600000, [32.07, 31.98]], //04/10/15
    186.  
    187.           [1428958800000, [32.26, 31.86]], //04/13/15
    188.           [1429045200000, [31.65, 31.78]], //04/14/15
    189.           [1429131600000, [31.86, 31.58]], //04/15/15
    190.           [1429218000000, [31.51, 31.59]], //04/16/15
    191.           [1429304400000, [31.84, 31.85]], //04/17/15
    192.  
    193.           [1429563600000, [31.83, 32.04]], //04/20/15
    194.           [1429650000000, [32.30, 32.28]], //04/21/15
    195.           [1429736400000, [32.43, 32.48]], //04/22/15
    196.           [1429822800000, [32.72, 32.60]], //04/23/15
    197.           [1429909200000, [32.39, 32.38]], //04/24/15
    198.  
    199.           [1430168400000, [32.47, 31.84]], //04/27/15
    200.           [1430254800000, [31.84, 32.08]], //04/28/15
    201.           [1430341200000, [31.88, 31.89]], //04/29/15
    202.           [1430427600000, [32.00, 32.21]], //04/30/15
    203.           [1430514000000, [32.29, 32.47]], //05/01/15
    204.  
    205.           [1430773200000, [32.41, 32.16]], //05/04/15
    206.           [1430859600000, [32.25, 32.50]], //05/05/15
    207.           [1430946000000, [32.54, 32.52]], //05/06/15
    208.           [1431032400000, [32.47, 31.64]], //05/07/15
    209.           [1431118800000, [31.77, 31.96]], //05/08/15
    210.  
    211.           [1431378000000, [31.49, 31.77]], //05/11/15
    212.           [1431464400000, [31.70, 30.89]], //05/12/15
    213.           [1431550800000, [30.99, 31.55]], //05/13/15
    214.           [1431637200000, [30.02, 30.27]], //05/14/15
    215.           [1431723600000, [30.34, 30.80]], //05/15/15
    216.  
    217.           [1431982800000, [30.85, 30.15]], //05/18/15
    218.           [1432069200000, [29.88, 30.21]], //05/19/15
    219.           [1432155600000, [30.22, 30.17]], //05/20/15
    220.           [1432242000000, [30.15, 30.39]], //05/21/15
    221.           [1432328400000, [30.45, 30.91]], //05/22/15
    222.  
    223.           [1432674000000, [30.94, 30.89]], //05/26/15
    224.           [1432760400000, [30.83, 30.99]], //05/27/15
    225.           [1432846800000, [30.90, 31.11]], //05/28/15
    226.           [1432933200000, [31.05, 30.86]], //05/29/15
    227.  
    228.           [1433192400000, [30.76, 30.66]], //06/01/15
    229.           [1433278800000, [30.62, 30.82]], //06/02/15
    230.           [1433365200000, [30.71, 30.42]], //06/03/15
    231.           [1433451600000, [30.52, 30.64]], //06/04/15
    232.           [1433538000000, [30.50, 30.17]], //06/05/15
    233.  
    234.           [1433797200000, [30.28, 30.19]], //06/08/15
    235.           [1433883600000, [30.27, 30.40]], //06/09/15
    236.           [1433970000000, [30.28, 30.04]], //06/10/15
    237.           [1434056400000, [30.06, 30.45]], //06/11/15
    238.           [1434142800000, [30.30, 30.31]], //06/12/15
    239.  
    240.           [1434402000000, [30.18, 30.64]], //06/15/15
    241.           [1434488400000, [30.44, 30.33]], //06/16/15
    242.           [1434574800000, [30.34, 30.40]], //06/17/15
    243.           [1434661200000, [30.48, 30.47]], //06/18/15
    244.           [1434747600000, [30.38, 30.28]], //06/19/15
    245.  
    246.           [1435006800000, [30.23, 29.91]], //06/22/15
    247.           [1435093200000, [30.80, 30.30]], //06/23/15
    248.           [1435179600000, [30.34, 29.64]], //06/24/15
    249.           [1435266000000, [29.98, 30.12]], //06/25/15
    250.           [1435352400000, [30.15, 30.81]], //06/26/15
    251.  
    252.           [1435611600000, [29.98, 30.12]], //06/29/15
    253.           [1435698000000, [30.15, 30.81]], //06/30/15
    254.         ]
    255.       }]
    256.     };
    257.  
    258.     zingchart.render({
    259.       id: 'myChart',
    260.       data: myConfig,
    261.       height: 400,
    262.       width: '100%'
    263.     });
    264.   </script>
    265. </body>
    266.  
    267. </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: 'range',
    3.   scaleX: {
    4.     minValue: 1420232400000,
    5.     step: 'day',
    6.     transform: {
    7.       type: 'date',
    8.       all: '%M %d'
    9.     },
    10.     item: {
    11.       fontSize: 10
    12.     },
    13.     maxItems: 13,
    14.  
    15.     zooming: true,
    16.     zoomToValues: [1422910800000, 1430427600000],
    17.     guide: {
    18.       alpha: 1,
    19.       lineStyle: 'solid',
    20.       visible: true
    21.     },
    22.     minorTicks: 7,
    23.     minorGuide: {
    24.       alpha: 0.7,
    25.       lineStyle: 'dotted'
    26.     },
    27.     markers: [{
    28.         type: 'area',
    29.         backgroundColor: '#BBDEFB',
    30.         range: [1420232400000, 1422651600000],
    31.         valueRange: true
    32.       },
    33.       {
    34.         type: 'area',
    35.         backgroundColor: '#BBDEFB',
    36.         range: [1425330000000, 1427835600000],
    37.         valueRange: true
    38.       },
    39.       {
    40.         type: 'area',
    41.         backgroundColor: '#BBDEFB',
    42.         range: [1430514000000, 1432933200000],
    43.         valueRange: true
    44.       }
    45.     ]
    46.   },
    47.   scrollX: {
    48.  
    49.   },
    50.   preview: {},
    51.   crosshairX: {
    52.     alpha: 0.3,
    53.     lineWidth: '100%',
    54.     plotLabel: {
    55.       text: '$%node-min-value-$%node-max-value',
    56.  
    57.       borderRadius: 3,
    58.       decimals: 2,
    59.       multiple: true,
    60.       placement: 'node-top'
    61.     },
    62.     scaleLabel: {
    63.       borderRadius: 3,
    64.     }
    65.   },
    66.   scaleY: {
    67.     values: '29:33:1',
    68.     format: '$%v',
    69.     item: {
    70.       fontSize: 10
    71.     },
    72.     guide: {
    73.       visible: false
    74.     }
    75.   },
    76.   plot: {
    77.     backgroundColor: '#2196F3',
    78.     lineColor: '#2196F3',
    79.     lineWidth: 1,
    80.     marker: {
    81.       visible: false
    82.     },
    83.     tooltip: {
    84.       visible: false
    85.     }
    86.   },
    87.   series: [{
    88.     values: [
    89.       [1420232400000, [31.34, 31.06]], //01/02/15
    90.  
    91.       [1420491600000, [31.80, 32.05]], //01/05/15
    92.       [1420578000000, [32.05, 32.30]], //01/06/15
    93.       [1420664400000, [32.21, 32.08]], //01/07/15
    94.       [1420750800000, [32.32, 32.37]], //01/08/15
    95.       [1420837200000, [32.52, 32.03]], //01/09/15
    96.  
    97.       [1421096400000, [32.07, 31.98]], //01/12/15
    98.       [1421182800000, [32.26, 31.86]], //01/13/15
    99.       [1421269200000, [31.65, 31.78]], //01/14/15
    100.       [1421355600000, [31.86, 31.58]], //01/15/15
    101.       [1421442000000, [31.51, 31.59]], //01/16/15
    102.  
    103.       [1421787600000, [31.84, 31.85]], //01/20/15
    104.       [1421874000000, [31.83, 32.04]], //01/21/15
    105.       [1421960400000, [32.30, 32.28]], //01/22/15
    106.       [1422046800000, [32.43, 32.48]], //01/23/15
    107.  
    108.       [1422306000000, [32.72, 32.60]], //01/26/15
    109.       [1422392400000, [32.39, 32.38]], //01/27/15
    110.       [1422478800000, [32.47, 31.84]], //01/28/15
    111.       [1422565200000, [31.84, 32.08]], //01/29/15
    112.       [1422651600000, [31.88, 31.89]], //01/30/15
    113.  
    114.       [1422910800000, [32.00, 32.21]], //02/02/15
    115.       [1422997200000, [32.29, 32.47]], //02/03/15
    116.       [1423083600000, [32.41, 32.16]], //02/04/15
    117.       [1423170000000, [32.25, 32.50]], //02/05/15
    118.       [1423256400000, [32.54, 32.52]], //02/06/15
    119.  
    120.       [1423515600000, [32.47, 31.64]], //02/09/15
    121.       [1423602000000, [31.77, 31.96]], //02/10/15
    122.       [1423688400000, [31.49, 31.77]], //02/11/15
    123.       [1423774800000, [31.70, 30.89]], //02/12/15
    124.       [1423861200000, [30.99, 31.55]], //02/13/15
    125.  
    126.       [1424206800000, [30.02, 30.27]], //02/17/15
    127.       [1424293200000, [30.34, 30.80]], //02/18/15
    128.       [1424379600000, [30.85, 30.15]], //02/19/15
    129.       [1424466000000, [29.88, 30.21]], //02/20/15
    130.  
    131.       [1424725200000, [30.22, 30.17]], //02/23/15
    132.       [1424811600000, [30.15, 30.39]], //02/24/15
    133.       [1424898000000, [30.45, 30.91]], //02/25/15
    134.       [1424984400000, [30.94, 30.89]], //02/26/15
    135.       [1425070800000, [30.83, 30.99]], //02/27/15
    136.  
    137.       [1425330000000, [30.90, 31.11]], //03/02/15
    138.       [1425416400000, [31.05, 30.86]], //03/03/15
    139.       [1425502800000, [30.76, 30.66]], //03/04/15
    140.       [1425589200000, [30.62, 30.82]], //03/05/15
    141.       [1425675600000, [30.71, 30.42]], //03/06/15
    142.  
    143.       [1425934800000, [30.52, 30.64]], //03/09/15
    144.       [1426021200000, [30.50, 30.17]], //03/10/15
    145.       [1426107600000, [30.28, 30.19]], //03/11/15
    146.       [1426194000000, [30.27, 30.40]], //03/12/15
    147.       [1426280400000, [30.28, 30.04]], //03/13/15
    148.  
    149.       [1426539600000, [30.06, 30.45]], //03/16/15
    150.       [1426626000000, [30.30, 30.31]], //03/17/15
    151.       [1426712400000, [30.18, 30.64]], //03/18/15
    152.       [1426798800000, [30.44, 30.33]], //03/19/15
    153.       [1426885200000, [30.34, 30.40]], //03/20/15
    154.  
    155.       [1427144400000, [30.48, 30.47]], //03/23/15
    156.       [1427230800000, [30.38, 30.28]], //03/24/15
    157.       [1427317200000, [30.23, 29.91]], //03/25/15
    158.       [1427403600000, [30.80, 30.30]], //03/26/15
    159.       [1427490000000, [30.34, 29.64]], //03/27/15
    160.  
    161.       [1427749200000, [29.98, 30.12]], //03/30/15
    162.       [1427835600000, [30.15, 30.81]], //03/31/15
    163.       [1427922000000, [31.34, 31.06]], //04/01/15
    164.       [1428008400000, [31.80, 32.05]], //04/02/15
    165.  
    166.       [1428354000000, [32.05, 32.30]], //04/06/15
    167.       [1428440400000, [32.21, 32.08]], //04/07/15
    168.       [1428526800000, [32.32, 32.37]], //04/08/15
    169.       [1428613200000, [32.52, 32.03]], //04/09/15
    170.       [1428699600000, [32.07, 31.98]], //04/10/15
    171.  
    172.       [1428958800000, [32.26, 31.86]], //04/13/15
    173.       [1429045200000, [31.65, 31.78]], //04/14/15
    174.       [1429131600000, [31.86, 31.58]], //04/15/15
    175.       [1429218000000, [31.51, 31.59]], //04/16/15
    176.       [1429304400000, [31.84, 31.85]], //04/17/15
    177.  
    178.       [1429563600000, [31.83, 32.04]], //04/20/15
    179.       [1429650000000, [32.30, 32.28]], //04/21/15
    180.       [1429736400000, [32.43, 32.48]], //04/22/15
    181.       [1429822800000, [32.72, 32.60]], //04/23/15
    182.       [1429909200000, [32.39, 32.38]], //04/24/15
    183.  
    184.       [1430168400000, [32.47, 31.84]], //04/27/15
    185.       [1430254800000, [31.84, 32.08]], //04/28/15
    186.       [1430341200000, [31.88, 31.89]], //04/29/15
    187.       [1430427600000, [32.00, 32.21]], //04/30/15
    188.       [1430514000000, [32.29, 32.47]], //05/01/15
    189.  
    190.       [1430773200000, [32.41, 32.16]], //05/04/15
    191.       [1430859600000, [32.25, 32.50]], //05/05/15
    192.       [1430946000000, [32.54, 32.52]], //05/06/15
    193.       [1431032400000, [32.47, 31.64]], //05/07/15
    194.       [1431118800000, [31.77, 31.96]], //05/08/15
    195.  
    196.       [1431378000000, [31.49, 31.77]], //05/11/15
    197.       [1431464400000, [31.70, 30.89]], //05/12/15
    198.       [1431550800000, [30.99, 31.55]], //05/13/15
    199.       [1431637200000, [30.02, 30.27]], //05/14/15
    200.       [1431723600000, [30.34, 30.80]], //05/15/15
    201.  
    202.       [1431982800000, [30.85, 30.15]], //05/18/15
    203.       [1432069200000, [29.88, 30.21]], //05/19/15
    204.       [1432155600000, [30.22, 30.17]], //05/20/15
    205.       [1432242000000, [30.15, 30.39]], //05/21/15
    206.       [1432328400000, [30.45, 30.91]], //05/22/15
    207.  
    208.       [1432674000000, [30.94, 30.89]], //05/26/15
    209.       [1432760400000, [30.83, 30.99]], //05/27/15
    210.       [1432846800000, [30.90, 31.11]], //05/28/15
    211.       [1432933200000, [31.05, 30.86]], //05/29/15
    212.  
    213.       [1433192400000, [30.76, 30.66]], //06/01/15
    214.       [1433278800000, [30.62, 30.82]], //06/02/15
    215.       [1433365200000, [30.71, 30.42]], //06/03/15
    216.       [1433451600000, [30.52, 30.64]], //06/04/15
    217.       [1433538000000, [30.50, 30.17]], //06/05/15
    218.  
    219.       [1433797200000, [30.28, 30.19]], //06/08/15
    220.       [1433883600000, [30.27, 30.40]], //06/09/15
    221.       [1433970000000, [30.28, 30.04]], //06/10/15
    222.       [1434056400000, [30.06, 30.45]], //06/11/15
    223.       [1434142800000, [30.30, 30.31]], //06/12/15
    224.  
    225.       [1434402000000, [30.18, 30.64]], //06/15/15
    226.       [1434488400000, [30.44, 30.33]], //06/16/15
    227.       [1434574800000, [30.34, 30.40]], //06/17/15
    228.       [1434661200000, [30.48, 30.47]], //06/18/15
    229.       [1434747600000, [30.38, 30.28]], //06/19/15
    230.  
    231.       [1435006800000, [30.23, 29.91]], //06/22/15
    232.       [1435093200000, [30.80, 30.30]], //06/23/15
    233.       [1435179600000, [30.34, 29.64]], //06/24/15
    234.       [1435266000000, [29.98, 30.12]], //06/25/15
    235.       [1435352400000, [30.15, 30.81]], //06/26/15
    236.  
    237.       [1435611600000, [29.98, 30.12]], //06/29/15
    238.       [1435698000000, [30.15, 30.81]], //06/30/15
    239.     ]
    240.   }]
    241. };
    242.  
    243. zingchart.render({
    244.   id: 'myChart',
    245.   data: myConfig,
    246.   height: 400,
    247.   width: '100%'
    248. });