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