• 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>
    10.     html,
    11.     body,
    12.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     let chartConfig = {
    24.       type: 'stock',
    25.       series: [{
    26.           values: [
    27.             [1420232400000, [31.34, 31.46, 30.87, 31.06]], //01/02/15
    28.             [1420491600000, [31.80, 32.25, 31.52, 32.05]], //01/05/15
    29.             [1420578000000, [32.05, 32.57, 31.93, 32.30]], //01/06/15
    30.             [1420664400000, [32.21, 32.39, 31.98, 32.08]], //01/07/15
    31.             [1420750800000, [32.32, 32.38, 32.13, 32.37]], //01/08/15
    32.             [1420837200000, [32.52, 32.53, 31.95, 32.03]], //01/09/15
    33.             [1421096400000, [32.07, 32.14, 31.77, 31.98]], //01/12/15
    34.             [1421182800000, [32.26, 32.33, 31.61, 31.86]], //01/13/15
    35.             [1421269200000, [31.65, 31.85, 31.41, 31.78]], //01/14/15
    36.             [1421355600000, [31.86, 31.97, 31.56, 31.58]], //01/15/15
    37.             [1421442000000, [31.51, 31.65, 31.45, 31.59]], //01/16/15
    38.             [1421787600000, [31.84, 31.87, 31.55, 31.85]], //01/20/15
    39.             [1421874000000, [31.83, 32.08, 31.71, 32.04]], //01/21/15
    40.             [1421960400000, [32.30, 32.36, 31.96, 32.28]], //01/22/15
    41.             [1422046800000, [32.43, 32.88, 32.29, 32.48]], //01/23/15
    42.             [1422306000000, [32.72, 32.74, 32.40, 32.60]], //01/26/15
    43.             [1422392400000, [32.39, 32.46, 32.20, 32.38]], //01/27/15
    44.             [1422478800000, [32.47, 32.49, 31.81, 31.84]], //01/28/15
    45.             [1422565200000, [31.84, 32.20, 31.78, 32.08]], //01/29/15
    46.             [1422651600000, [31.88, 32.11, 31.82, 31.89]], //01/30/15
    47.           ],
    48.           trendDown: {
    49.             backgroundColor: '#4CAF50',
    50.             lineColor: '#4CAF50',
    51.             borderColor: '#4CAF50',
    52.             bottomState: {
    53.               backgroundColor: 'red',
    54.               offsetX: '10px',
    55.               offsetY: '10px',
    56.             },
    57.           },
    58.           trendEqual: {
    59.             backgroundColor: '#4CAF50',
    60.             lineColor: '#4CAF50',
    61.             borderColor: '#4CAF50',
    62.             bottomState: {
    63.               backgroundColor: 'red',
    64.               offsetX: '10px',
    65.               offsetY: '10px',
    66.             },
    67.           },
    68.           trendUp: {
    69.             backgroundColor: 'transparent',
    70.             lineColor: '#4CAF50',
    71.             borderColor: '#4CAF50',
    72.             bottomState: {
    73.               backgroundColor: 'red',
    74.               offsetX: '10px',
    75.               offsetY: '10px',
    76.             },
    77.           }
    78.         },
    79.         {
    80.           values: [
    81.             [1422910800000, [32.00, 32.22, 31.90, 32.21]], //02/02/15
    82.             [1422997200000, [32.29, 32.52, 32.26, 32.47]], //02/03/15
    83.             [1423083600000, [32.41, 32.43, 32.08, 32.16]], //02/04/15
    84.             [1423170000000, [32.25, 32.50, 32.23, 32.50]], //02/05/15
    85.             [1423256400000, [32.54, 32.75, 32.47, 32.52]], //02/06/15
    86.             [1423515600000, [32.47, 32.75, 31.50, 31.64]], //02/09/15
    87.             [1423602000000, [31.77, 32.05, 31.55, 31.96]], //02/10/15
    88.             [1423688400000, [31.49, 31.82, 31.35, 31.77]], //02/11/15
    89.             [1423774800000, [31.70, 31.99, 30.71, 30.89]], //02/12/15
    90.             [1423861200000, [30.99, 31.57, 30.50, 31.55]], //02/13/15
    91.             [1424206800000, [30.02, 30.30, 29.98, 30.27]], //02/17/15
    92.             [1424293200000, [30.34, 30.90, 30.15, 30.80]], //02/18/15
    93.             [1424379600000, [30.85, 30.91, 30.05, 30.15]], //02/19/15
    94.             [1424466000000, [29.88, 30.21, 29.80, 30.21]], //02/20/15
    95.             [1424725200000, [30.22, 30.30, 30.10, 30.17]], //02/23/15
    96.             [1424811600000, [30.15, 30.45, 30.01, 30.39]], //02/24/15
    97.             [1424898000000, [30.45, 31.06, 30.40, 30.91]], //02/25/15
    98.             [1424984400000, [30.94, 31.01, 30.81, 30.89]], //02/26/15
    99.             [1425070800000, [30.83, 31.27, 30.75, 30.99]], //02/27/15
    100.           ],
    101.           trendDown: {
    102.             backgroundColor: '#03A9F4',
    103.             lineColor: '#03A9F4',
    104.             borderColor: '#03A9F4',
    105.             bottomState: {
    106.               backgroundColor: 'red',
    107.               offsetX: '10px',
    108.               offsetY: '10px',
    109.             },
    110.           },
    111.           trendEqual: {
    112.             backgroundColor: '#03A9F4',
    113.             lineColor: '#03A9F4',
    114.             borderColor: '#03A9F4',
    115.             bottomState: {
    116.               backgroundColor: 'red',
    117.               offsetX: '10px',
    118.               offsetY: '10px',
    119.             },
    120.           },
    121.           trendUp: {
    122.             backgroundColor: 'transparent',
    123.             lineColor: '#03A9F4',
    124.             borderColor: '#03A9F4',
    125.             bottomState: {
    126.               backgroundColor: 'red',
    127.               offsetX: '10px',
    128.               offsetY: '10px',
    129.             },
    130.           }
    131.         }
    132.       ],
    133.       plot: {
    134.         fontSize: 10
    135.       },
    136.       scaleX: {
    137.         minValue: 1420232400000,
    138.         step: 'day',
    139.         transform: {
    140.           type: 'date',
    141.           all: '%m/%d'
    142.         },
    143.         item: {
    144.           fontSize: 10
    145.         }
    146.       },
    147.       scaleY: {
    148.         values: '29:33:1',
    149.         format: '$%v',
    150.         item: {
    151.           fontSize: 10
    152.         },
    153.         guide: {
    154.           lineStyle: 'solid'
    155.         }
    156.       }
    157.     };
    158.  
    159.     zingchart.render({
    160.       id: 'myChart',
    161.       data: chartConfig,
    162.       height: '100%',
    163.       width: '100%'
    164.     });
    165.   </script>
    166. </body>
    167.  
    168. </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. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. let chartConfig = {
    2.   type: 'stock',
    3.   series: [{
    4.       values: [
    5.         [1420232400000, [31.34, 31.46, 30.87, 31.06]], //01/02/15
    6.         [1420491600000, [31.80, 32.25, 31.52, 32.05]], //01/05/15
    7.         [1420578000000, [32.05, 32.57, 31.93, 32.30]], //01/06/15
    8.         [1420664400000, [32.21, 32.39, 31.98, 32.08]], //01/07/15
    9.         [1420750800000, [32.32, 32.38, 32.13, 32.37]], //01/08/15
    10.         [1420837200000, [32.52, 32.53, 31.95, 32.03]], //01/09/15
    11.         [1421096400000, [32.07, 32.14, 31.77, 31.98]], //01/12/15
    12.         [1421182800000, [32.26, 32.33, 31.61, 31.86]], //01/13/15
    13.         [1421269200000, [31.65, 31.85, 31.41, 31.78]], //01/14/15
    14.         [1421355600000, [31.86, 31.97, 31.56, 31.58]], //01/15/15
    15.         [1421442000000, [31.51, 31.65, 31.45, 31.59]], //01/16/15
    16.         [1421787600000, [31.84, 31.87, 31.55, 31.85]], //01/20/15
    17.         [1421874000000, [31.83, 32.08, 31.71, 32.04]], //01/21/15
    18.         [1421960400000, [32.30, 32.36, 31.96, 32.28]], //01/22/15
    19.         [1422046800000, [32.43, 32.88, 32.29, 32.48]], //01/23/15
    20.         [1422306000000, [32.72, 32.74, 32.40, 32.60]], //01/26/15
    21.         [1422392400000, [32.39, 32.46, 32.20, 32.38]], //01/27/15
    22.         [1422478800000, [32.47, 32.49, 31.81, 31.84]], //01/28/15
    23.         [1422565200000, [31.84, 32.20, 31.78, 32.08]], //01/29/15
    24.         [1422651600000, [31.88, 32.11, 31.82, 31.89]], //01/30/15
    25.       ],
    26.       trendDown: {
    27.         backgroundColor: '#4CAF50',
    28.         lineColor: '#4CAF50',
    29.         borderColor: '#4CAF50',
    30.         bottomState: {
    31.           backgroundColor: 'red',
    32.           offsetX: '10px',
    33.           offsetY: '10px',
    34.         },
    35.       },
    36.       trendEqual: {
    37.         backgroundColor: '#4CAF50',
    38.         lineColor: '#4CAF50',
    39.         borderColor: '#4CAF50',
    40.         bottomState: {
    41.           backgroundColor: 'red',
    42.           offsetX: '10px',
    43.           offsetY: '10px',
    44.         },
    45.       },
    46.       trendUp: {
    47.         backgroundColor: 'transparent',
    48.         lineColor: '#4CAF50',
    49.         borderColor: '#4CAF50',
    50.         bottomState: {
    51.           backgroundColor: 'red',
    52.           offsetX: '10px',
    53.           offsetY: '10px',
    54.         },
    55.       }
    56.     },
    57.     {
    58.       values: [
    59.         [1422910800000, [32.00, 32.22, 31.90, 32.21]], //02/02/15
    60.         [1422997200000, [32.29, 32.52, 32.26, 32.47]], //02/03/15
    61.         [1423083600000, [32.41, 32.43, 32.08, 32.16]], //02/04/15
    62.         [1423170000000, [32.25, 32.50, 32.23, 32.50]], //02/05/15
    63.         [1423256400000, [32.54, 32.75, 32.47, 32.52]], //02/06/15
    64.         [1423515600000, [32.47, 32.75, 31.50, 31.64]], //02/09/15
    65.         [1423602000000, [31.77, 32.05, 31.55, 31.96]], //02/10/15
    66.         [1423688400000, [31.49, 31.82, 31.35, 31.77]], //02/11/15
    67.         [1423774800000, [31.70, 31.99, 30.71, 30.89]], //02/12/15
    68.         [1423861200000, [30.99, 31.57, 30.50, 31.55]], //02/13/15
    69.         [1424206800000, [30.02, 30.30, 29.98, 30.27]], //02/17/15
    70.         [1424293200000, [30.34, 30.90, 30.15, 30.80]], //02/18/15
    71.         [1424379600000, [30.85, 30.91, 30.05, 30.15]], //02/19/15
    72.         [1424466000000, [29.88, 30.21, 29.80, 30.21]], //02/20/15
    73.         [1424725200000, [30.22, 30.30, 30.10, 30.17]], //02/23/15
    74.         [1424811600000, [30.15, 30.45, 30.01, 30.39]], //02/24/15
    75.         [1424898000000, [30.45, 31.06, 30.40, 30.91]], //02/25/15
    76.         [1424984400000, [30.94, 31.01, 30.81, 30.89]], //02/26/15
    77.         [1425070800000, [30.83, 31.27, 30.75, 30.99]], //02/27/15
    78.       ],
    79.       trendDown: {
    80.         backgroundColor: '#03A9F4',
    81.         lineColor: '#03A9F4',
    82.         borderColor: '#03A9F4',
    83.         bottomState: {
    84.           backgroundColor: 'red',
    85.           offsetX: '10px',
    86.           offsetY: '10px',
    87.         },
    88.       },
    89.       trendEqual: {
    90.         backgroundColor: '#03A9F4',
    91.         lineColor: '#03A9F4',
    92.         borderColor: '#03A9F4',
    93.         bottomState: {
    94.           backgroundColor: 'red',
    95.           offsetX: '10px',
    96.           offsetY: '10px',
    97.         },
    98.       },
    99.       trendUp: {
    100.         backgroundColor: 'transparent',
    101.         lineColor: '#03A9F4',
    102.         borderColor: '#03A9F4',
    103.         bottomState: {
    104.           backgroundColor: 'red',
    105.           offsetX: '10px',
    106.           offsetY: '10px',
    107.         },
    108.       }
    109.     }
    110.   ],
    111.   plot: {
    112.     fontSize: 10
    113.   },
    114.   scaleX: {
    115.     minValue: 1420232400000,
    116.     step: 'day',
    117.     transform: {
    118.       type: 'date',
    119.       all: '%m/%d'
    120.     },
    121.     item: {
    122.       fontSize: 10
    123.     }
    124.   },
    125.   scaleY: {
    126.     values: '29:33:1',
    127.     format: '$%v',
    128.     item: {
    129.       fontSize: 10
    130.     },
    131.     guide: {
    132.       lineStyle: 'solid'
    133.     }
    134.   }
    135. };
    136.  
    137. zingchart.render({
    138.   id: 'myChart',
    139.   data: chartConfig,
    140.   height: '100%',
    141.   width: '100%'
    142. });