• 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.             mediaRules: [{
    53.               maxWidth: 1000,
    54.               backgroundColor: 'red',
    55.             }],
    56.           },
    57.           trendEqual: {
    58.             backgroundColor: '#4CAF50',
    59.             lineColor: '#4CAF50',
    60.             borderColor: '#4CAF50',
    61.             mediaRules: [{
    62.               maxWidth: 1000,
    63.               backgroundColor: 'red',
    64.             }],
    65.           },
    66.           trendUp: {
    67.             backgroundColor: 'transparent',
    68.             lineColor: '#4CAF50',
    69.             borderColor: '#4CAF50',
    70.             mediaRules: [{
    71.               maxWidth: 1000,
    72.               backgroundColor: 'red',
    73.             }],
    74.           }
    75.         },
    76.         {
    77.           values: [
    78.             [1422910800000, [32.00, 32.22, 31.90, 32.21]], //02/02/15
    79.             [1422997200000, [32.29, 32.52, 32.26, 32.47]], //02/03/15
    80.             [1423083600000, [32.41, 32.43, 32.08, 32.16]], //02/04/15
    81.             [1423170000000, [32.25, 32.50, 32.23, 32.50]], //02/05/15
    82.             [1423256400000, [32.54, 32.75, 32.47, 32.52]], //02/06/15
    83.             [1423515600000, [32.47, 32.75, 31.50, 31.64]], //02/09/15
    84.             [1423602000000, [31.77, 32.05, 31.55, 31.96]], //02/10/15
    85.             [1423688400000, [31.49, 31.82, 31.35, 31.77]], //02/11/15
    86.             [1423774800000, [31.70, 31.99, 30.71, 30.89]], //02/12/15
    87.             [1423861200000, [30.99, 31.57, 30.50, 31.55]], //02/13/15
    88.             [1424206800000, [30.02, 30.30, 29.98, 30.27]], //02/17/15
    89.             [1424293200000, [30.34, 30.90, 30.15, 30.80]], //02/18/15
    90.             [1424379600000, [30.85, 30.91, 30.05, 30.15]], //02/19/15
    91.             [1424466000000, [29.88, 30.21, 29.80, 30.21]], //02/20/15
    92.             [1424725200000, [30.22, 30.30, 30.10, 30.17]], //02/23/15
    93.             [1424811600000, [30.15, 30.45, 30.01, 30.39]], //02/24/15
    94.             [1424898000000, [30.45, 31.06, 30.40, 30.91]], //02/25/15
    95.             [1424984400000, [30.94, 31.01, 30.81, 30.89]], //02/26/15
    96.             [1425070800000, [30.83, 31.27, 30.75, 30.99]], //02/27/15
    97.           ],
    98.           trendDown: {
    99.             backgroundColor: '#03A9F4',
    100.             lineColor: '#03A9F4',
    101.             borderColor: '#03A9F4',
    102.             mediaRules: [{
    103.               maxWidth: 1000,
    104.               backgroundColor: 'red',
    105.             }],
    106.           },
    107.           trendEqual: {
    108.             backgroundColor: '#03A9F4',
    109.             lineColor: '#03A9F4',
    110.             borderColor: '#03A9F4',
    111.             mediaRules: [{
    112.               maxWidth: 1000,
    113.               backgroundColor: 'red',
    114.             }],
    115.           },
    116.           trendUp: {
    117.             backgroundColor: 'transparent',
    118.             lineColor: '#03A9F4',
    119.             borderColor: '#03A9F4',
    120.             mediaRules: [{
    121.               maxWidth: 1000,
    122.               backgroundColor: 'red',
    123.             }],
    124.           }
    125.         }
    126.       ],
    127.       plot: {
    128.         fontSize: 10
    129.       },
    130.       scaleX: {
    131.         minValue: 1420232400000,
    132.         step: 'day',
    133.         transform: {
    134.           type: 'date',
    135.           all: '%m/%d'
    136.         },
    137.         item: {
    138.           fontSize: 10
    139.         }
    140.       },
    141.       scaleY: {
    142.         values: '29:33:1',
    143.         format: '$%v',
    144.         item: {
    145.           fontSize: 10
    146.         },
    147.         guide: {
    148.           lineStyle: 'solid'
    149.         }
    150.       }
    151.     };
    152.  
    153.     zingchart.render({
    154.       id: 'myChart',
    155.       data: chartConfig,
    156.       height: '100%',
    157.       width: '100%'
    158.     });
    159.   </script>
    160. </body>
    161.  
    162. </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.         mediaRules: [{
    31.           maxWidth: 1000,
    32.           backgroundColor: 'red',
    33.         }],
    34.       },
    35.       trendEqual: {
    36.         backgroundColor: '#4CAF50',
    37.         lineColor: '#4CAF50',
    38.         borderColor: '#4CAF50',
    39.         mediaRules: [{
    40.           maxWidth: 1000,
    41.           backgroundColor: 'red',
    42.         }],
    43.       },
    44.       trendUp: {
    45.         backgroundColor: 'transparent',
    46.         lineColor: '#4CAF50',
    47.         borderColor: '#4CAF50',
    48.         mediaRules: [{
    49.           maxWidth: 1000,
    50.           backgroundColor: 'red',
    51.         }],
    52.       }
    53.     },
    54.     {
    55.       values: [
    56.         [1422910800000, [32.00, 32.22, 31.90, 32.21]], //02/02/15
    57.         [1422997200000, [32.29, 32.52, 32.26, 32.47]], //02/03/15
    58.         [1423083600000, [32.41, 32.43, 32.08, 32.16]], //02/04/15
    59.         [1423170000000, [32.25, 32.50, 32.23, 32.50]], //02/05/15
    60.         [1423256400000, [32.54, 32.75, 32.47, 32.52]], //02/06/15
    61.         [1423515600000, [32.47, 32.75, 31.50, 31.64]], //02/09/15
    62.         [1423602000000, [31.77, 32.05, 31.55, 31.96]], //02/10/15
    63.         [1423688400000, [31.49, 31.82, 31.35, 31.77]], //02/11/15
    64.         [1423774800000, [31.70, 31.99, 30.71, 30.89]], //02/12/15
    65.         [1423861200000, [30.99, 31.57, 30.50, 31.55]], //02/13/15
    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.         [1424725200000, [30.22, 30.30, 30.10, 30.17]], //02/23/15
    71.         [1424811600000, [30.15, 30.45, 30.01, 30.39]], //02/24/15
    72.         [1424898000000, [30.45, 31.06, 30.40, 30.91]], //02/25/15
    73.         [1424984400000, [30.94, 31.01, 30.81, 30.89]], //02/26/15
    74.         [1425070800000, [30.83, 31.27, 30.75, 30.99]], //02/27/15
    75.       ],
    76.       trendDown: {
    77.         backgroundColor: '#03A9F4',
    78.         lineColor: '#03A9F4',
    79.         borderColor: '#03A9F4',
    80.         mediaRules: [{
    81.           maxWidth: 1000,
    82.           backgroundColor: 'red',
    83.         }],
    84.       },
    85.       trendEqual: {
    86.         backgroundColor: '#03A9F4',
    87.         lineColor: '#03A9F4',
    88.         borderColor: '#03A9F4',
    89.         mediaRules: [{
    90.           maxWidth: 1000,
    91.           backgroundColor: 'red',
    92.         }],
    93.       },
    94.       trendUp: {
    95.         backgroundColor: 'transparent',
    96.         lineColor: '#03A9F4',
    97.         borderColor: '#03A9F4',
    98.         mediaRules: [{
    99.           maxWidth: 1000,
    100.           backgroundColor: 'red',
    101.         }],
    102.       }
    103.     }
    104.   ],
    105.   plot: {
    106.     fontSize: 10
    107.   },
    108.   scaleX: {
    109.     minValue: 1420232400000,
    110.     step: 'day',
    111.     transform: {
    112.       type: 'date',
    113.       all: '%m/%d'
    114.     },
    115.     item: {
    116.       fontSize: 10
    117.     }
    118.   },
    119.   scaleY: {
    120.     values: '29:33:1',
    121.     format: '$%v',
    122.     item: {
    123.       fontSize: 10
    124.     },
    125.     guide: {
    126.       lineStyle: 'solid'
    127.     }
    128.   }
    129. };
    130.  
    131. zingchart.render({
    132.   id: 'myChart',
    133.   data: chartConfig,
    134.   height: '100%',
    135.   width: '100%'
    136. });