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