• 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: 'scatter',
    18.       crosshairX: {
    19.         plotLabel: {
    20.           backgroundColor: 'white',
    21.           borderWidth: 1,
    22.           borderColor: 'gray',
    23.           borderRadius: '3px',
    24.           padding: '5%'
    25.         },
    26.         scaleLabel: {
    27.           text: '%v',
    28.           transform: {
    29.             type: 'date',
    30.             all: '%D,<br>%M %d'
    31.           },
    32.           fontColor: 'black',
    33.           backgroundColor: 'white',
    34.           borderWidth: 1,
    35.           borderColor: 'gray',
    36.           borderRadius: '3px',
    37.           padding: '5%'
    38.         }
    39.       },
    40.       plot: {
    41.         marker: {
    42.           type: 'cross',
    43.           lineWidth: 2,
    44.           size: 3
    45.         },
    46.         tooltip: {
    47.           text: '%v particles',
    48.           borderRadius: '3px'
    49.         }
    50.       },
    51.       scaleX: {
    52.         minValue: 1420232400000,
    53.         step: 'day',
    54.         transform: {
    55.           type: 'date',
    56.           all: '%D, %M %d, %Y'
    57.         },
    58.         item: {
    59.           fontSize: 10
    60.         },
    61.         guide: {
    62.           lineStyle: 'solid'
    63.         }
    64.       },
    65.       scaleY: {
    66.         values: '31:33:0.5',
    67.         item: {
    68.           fontSize: 10
    69.         },
    70.         guide: {
    71.           lineStyle: 'solid'
    72.         }
    73.       },
    74.       series: [{
    75.           values: [
    76.             [1420232400000, 32.34], //01/02/15
    77.  
    78.             [1420491600000, 31.80], //01/05/15
    79.             [1420578000000, 32.05], //01/06/15
    80.             [1420664400000, 32.21], //01/07/15
    81.             [1420750800000, 32.32], //01/08/15
    82.             [1420837200000, 32.92], //01/09/15
    83.  
    84.             [1421096400000, 32.07], //01/12/15
    85.             [1421182800000, 32.26], //01/13/15
    86.             [1421269200000, 31.65], //01/14/15
    87.             [1421355600000, 31.86], //01/15/15
    88.             [1421442000000, 31.51], //01/16/15
    89.  
    90.             [1421787600000, 31.84], //01/20/15
    91.             [1421874000000, 31.83], //01/21/15
    92.             [1421960400000, 32.30], //01/22/15
    93.             [1422046800000, 32.43], //01/23/15
    94.  
    95.             [1422306000000, 32.91], //01/26/15
    96.             [1422392400000, 32.39], //01/27/15
    97.             [1422478800000, 32.77], //01/28/15
    98.             [1422565200000, 31.84], //01/29/15
    99.             [1422651600000, 31.88], //01/30/15
    100.           ],
    101.           text: 'Alpha'
    102.         },
    103.         {
    104.           values: [
    105.             [1420232400000, 31.46], //01/02/15
    106.  
    107.             [1420491600000, 32.25], //01/05/15
    108.             [1420578000000, 32.57], //01/06/15
    109.             [1420664400000, 32.39], //01/07/15
    110.             [1420750800000, 31.38], //01/08/15
    111.             [1420837200000, 32.53], //01/09/15
    112.  
    113.             [1421096400000, 32.14], //01/12/15
    114.             [1421182800000, 31.33], //01/13/15
    115.             [1421269200000, 31.85], //01/14/15
    116.             [1421355600000, 31.97], //01/15/15
    117.             [1421442000000, 31.65], //01/16/15
    118.  
    119.             [1421787600000, 32.27], //01/20/15
    120.             [1421874000000, 32.08], //01/21/15
    121.             [1421960400000, 32.36], //01/22/15
    122.             [1422046800000, 31.88], //01/23/15
    123.  
    124.             [1422306000000, 32.74], //01/26/15
    125.             [1422392400000, 32.46], //01/27/15
    126.             [1422478800000, 32.49], //01/28/15
    127.             [1422565200000, 32.20], //01/29/15
    128.             [1422651600000, 32.11], //01/30/15
    129.           ],
    130.           text: 'Beta'
    131.         },
    132.         {
    133.           values: [
    134.             [1420232400000, 31.87], //01/02/15
    135.  
    136.             [1420491600000, 31.52], //01/05/15
    137.             [1420578000000, 31.93], //01/06/15
    138.             [1420664400000, 31.98], //01/07/15
    139.             [1420750800000, 32.13], //01/08/15
    140.             [1420837200000, 31.95], //01/09/15
    141.  
    142.             [1421096400000, 31.77], //01/12/15
    143.             [1421182800000, 31.61], //01/13/15
    144.             [1421269200000, 31.41], //01/14/15
    145.             [1421355600000, 31.56], //01/15/15
    146.             [1421442000000, 31.45], //01/16/15
    147.  
    148.             [1421787600000, 31.55], //01/20/15
    149.             [1421874000000, 31.71], //01/21/15
    150.             [1421960400000, 31.96], //01/22/15
    151.             [1422046800000, 32.29], //01/23/15
    152.  
    153.             [1422306000000, 32.40], //01/26/15
    154.             [1422392400000, 32.20], //01/27/15
    155.             [1422478800000, 31.51], //01/28/15
    156.             [1422565200000, 31.38], //01/29/15
    157.             [1422651600000, 31.42], //01/30/15
    158.           ],
    159.           text: 'Gamma'
    160.         }
    161.       ]
    162.     };
    163.  
    164.     zingchart.TOUCHZOOM = 'pinch';
    165.  
    166.     zingchart.render({
    167.       id: 'myChart',
    168.       data: myConfig,
    169.       height: 400,
    170.       width: '100%'
    171.     });
    172.   </script>
    173. </body>
    174.  
    175. </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: 'scatter',
    3.   crosshairX: {
    4.     plotLabel: {
    5.       backgroundColor: 'white',
    6.       borderWidth: 1,
    7.       borderColor: 'gray',
    8.       borderRadius: '3px',
    9.       padding: '5%'
    10.     },
    11.     scaleLabel: {
    12.       text: '%v',
    13.       transform: {
    14.         type: 'date',
    15.         all: '%D,<br>%M %d'
    16.       },
    17.       fontColor: 'black',
    18.       backgroundColor: 'white',
    19.       borderWidth: 1,
    20.       borderColor: 'gray',
    21.       borderRadius: '3px',
    22.       padding: '5%'
    23.     }
    24.   },
    25.   plot: {
    26.     marker: {
    27.       type: 'cross',
    28.       lineWidth: 2,
    29.       size: 3
    30.     },
    31.     tooltip: {
    32.       text: '%v particles',
    33.       borderRadius: '3px'
    34.     }
    35.   },
    36.   scaleX: {
    37.     minValue: 1420232400000,
    38.     step: 'day',
    39.     transform: {
    40.       type: 'date',
    41.       all: '%D, %M %d, %Y'
    42.     },
    43.     item: {
    44.       fontSize: 10
    45.     },
    46.     guide: {
    47.       lineStyle: 'solid'
    48.     }
    49.   },
    50.   scaleY: {
    51.     values: '31:33:0.5',
    52.     item: {
    53.       fontSize: 10
    54.     },
    55.     guide: {
    56.       lineStyle: 'solid'
    57.     }
    58.   },
    59.   series: [{
    60.       values: [
    61.         [1420232400000, 32.34], //01/02/15
    62.  
    63.         [1420491600000, 31.80], //01/05/15
    64.         [1420578000000, 32.05], //01/06/15
    65.         [1420664400000, 32.21], //01/07/15
    66.         [1420750800000, 32.32], //01/08/15
    67.         [1420837200000, 32.92], //01/09/15
    68.  
    69.         [1421096400000, 32.07], //01/12/15
    70.         [1421182800000, 32.26], //01/13/15
    71.         [1421269200000, 31.65], //01/14/15
    72.         [1421355600000, 31.86], //01/15/15
    73.         [1421442000000, 31.51], //01/16/15
    74.  
    75.         [1421787600000, 31.84], //01/20/15
    76.         [1421874000000, 31.83], //01/21/15
    77.         [1421960400000, 32.30], //01/22/15
    78.         [1422046800000, 32.43], //01/23/15
    79.  
    80.         [1422306000000, 32.91], //01/26/15
    81.         [1422392400000, 32.39], //01/27/15
    82.         [1422478800000, 32.77], //01/28/15
    83.         [1422565200000, 31.84], //01/29/15
    84.         [1422651600000, 31.88], //01/30/15
    85.       ],
    86.       text: 'Alpha'
    87.     },
    88.     {
    89.       values: [
    90.         [1420232400000, 31.46], //01/02/15
    91.  
    92.         [1420491600000, 32.25], //01/05/15
    93.         [1420578000000, 32.57], //01/06/15
    94.         [1420664400000, 32.39], //01/07/15
    95.         [1420750800000, 31.38], //01/08/15
    96.         [1420837200000, 32.53], //01/09/15
    97.  
    98.         [1421096400000, 32.14], //01/12/15
    99.         [1421182800000, 31.33], //01/13/15
    100.         [1421269200000, 31.85], //01/14/15
    101.         [1421355600000, 31.97], //01/15/15
    102.         [1421442000000, 31.65], //01/16/15
    103.  
    104.         [1421787600000, 32.27], //01/20/15
    105.         [1421874000000, 32.08], //01/21/15
    106.         [1421960400000, 32.36], //01/22/15
    107.         [1422046800000, 31.88], //01/23/15
    108.  
    109.         [1422306000000, 32.74], //01/26/15
    110.         [1422392400000, 32.46], //01/27/15
    111.         [1422478800000, 32.49], //01/28/15
    112.         [1422565200000, 32.20], //01/29/15
    113.         [1422651600000, 32.11], //01/30/15
    114.       ],
    115.       text: 'Beta'
    116.     },
    117.     {
    118.       values: [
    119.         [1420232400000, 31.87], //01/02/15
    120.  
    121.         [1420491600000, 31.52], //01/05/15
    122.         [1420578000000, 31.93], //01/06/15
    123.         [1420664400000, 31.98], //01/07/15
    124.         [1420750800000, 32.13], //01/08/15
    125.         [1420837200000, 31.95], //01/09/15
    126.  
    127.         [1421096400000, 31.77], //01/12/15
    128.         [1421182800000, 31.61], //01/13/15
    129.         [1421269200000, 31.41], //01/14/15
    130.         [1421355600000, 31.56], //01/15/15
    131.         [1421442000000, 31.45], //01/16/15
    132.  
    133.         [1421787600000, 31.55], //01/20/15
    134.         [1421874000000, 31.71], //01/21/15
    135.         [1421960400000, 31.96], //01/22/15
    136.         [1422046800000, 32.29], //01/23/15
    137.  
    138.         [1422306000000, 32.40], //01/26/15
    139.         [1422392400000, 32.20], //01/27/15
    140.         [1422478800000, 31.51], //01/28/15
    141.         [1422565200000, 31.38], //01/29/15
    142.         [1422651600000, 31.42], //01/30/15
    143.       ],
    144.       text: 'Gamma'
    145.     }
    146.   ]
    147. };
    148.  
    149. zingchart.TOUCHZOOM = 'pinch';
    150.  
    151. zingchart.render({
    152.   id: 'myChart',
    153.   data: myConfig,
    154.   height: 400,
    155.   width: '100%'
    156. });