• 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: 'blue'
    64.             }]
    65.           },
    66.           trendUp: {
    67.             backgroundColor: 'transparent',
    68.             lineColor: '#4CAF50',
    69.             borderColor: '#4CAF50',
    70.             mediaRules: [{
    71.               maxWidth: 1000,
    72.               backgroundColor: 'green'
    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.           },
    103.           trendEqual: {
    104.             backgroundColor: '#03A9F4',
    105.             lineColor: '#03A9F4',
    106.             borderColor: '#03A9F4'
    107.           },
    108.           trendUp: {
    109.             backgroundColor: 'transparent',
    110.             lineColor: '#03A9F4',
    111.             borderColor: '#03A9F4'
    112.           }
    113.         }
    114.       ],
    115.       plot: {
    116.         fontSize: 10
    117.       },
    118.       scaleX: {
    119.         minValue: 1420232400000,
    120.         step: 'day',
    121.         transform: {
    122.           type: 'date',
    123.           all: '%m/%d'
    124.         },
    125.         item: {
    126.           fontSize: 10
    127.         }
    128.       },
    129.       scaleY: {
    130.         values: '29:33:1',
    131.         format: '$%v',
    132.         item: {
    133.           fontSize: 10
    134.         },
    135.         guide: {
    136.           lineStyle: 'solid'
    137.         }
    138.       }
    139.     };
    140.  
    141.     zingchart.render({
    142.       id: 'myChart',
    143.       data: chartConfig,
    144.       height: '100%',
    145.       width: '100%'
    146.     });
    147.   </script>
    148. </body>
    149.  
    150. </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: 'blue'
    42.         }]
    43.       },
    44.       trendUp: {
    45.         backgroundColor: 'transparent',
    46.         lineColor: '#4CAF50',
    47.         borderColor: '#4CAF50',
    48.         mediaRules: [{
    49.           maxWidth: 1000,
    50.           backgroundColor: 'green'
    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.       },
    81.       trendEqual: {
    82.         backgroundColor: '#03A9F4',
    83.         lineColor: '#03A9F4',
    84.         borderColor: '#03A9F4'
    85.       },
    86.       trendUp: {
    87.         backgroundColor: 'transparent',
    88.         lineColor: '#03A9F4',
    89.         borderColor: '#03A9F4'
    90.       }
    91.     }
    92.   ],
    93.   plot: {
    94.     fontSize: 10
    95.   },
    96.   scaleX: {
    97.     minValue: 1420232400000,
    98.     step: 'day',
    99.     transform: {
    100.       type: 'date',
    101.       all: '%m/%d'
    102.     },
    103.     item: {
    104.       fontSize: 10
    105.     }
    106.   },
    107.   scaleY: {
    108.     values: '29:33:1',
    109.     format: '$%v',
    110.     item: {
    111.       fontSize: 10
    112.     },
    113.     guide: {
    114.       lineStyle: 'solid'
    115.     }
    116.   }
    117. };
    118.  
    119. zingchart.render({
    120.   id: 'myChart',
    121.   data: chartConfig,
    122.   height: '100%',
    123.   width: '100%'
    124. });