• 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 myConfig9 = {
    17.       "type": "scatter",
    18.       "utc": true,
    19.       "timezone": -8,
    20.       "scrollX": {},
    21.       "scale-x": {
    22.         "zooming": true,
    23.         "label": {
    24.           "text": "Scatter Chart with a Time-Series Scale"
    25.         },
    26.         "min-value": 1425196800000,
    27.         "step": "2day",
    28.         "transform": {
    29.           "type": "date",
    30.           "all": "%m/%d/%y"
    31.         }
    32.       },
    33.       "series": [{
    34.           "values": [
    35.             [1425225600000, 9],
    36.             [1425312000000, 15],
    37.             [1425398400000, 21],
    38.             [1425484800000, 30],
    39.             [1425571200000, 40],
    40.             [1425657600000, 59],
    41.             [1425744000000, 60],
    42.             [1425826800000, 75],
    43.             [1425913200000, 81],
    44.             [1425999600000, 99]
    45.           ],
    46.           "marker": {
    47.             "type": "star4"
    48.           }
    49.         },
    50.         {
    51.           "values": [
    52.             [1425243600000, 3],
    53.             [1425322800000, 13],
    54.             [1425391200000, 25],
    55.             [1425470400000, 35],
    56.             [1425574800000, 41],
    57.             [1425697200000, 57],
    58.             [1425772800000, 61],
    59.             [1425866400000, 70],
    60.             [1425938400000, 82],
    61.             [1425985200000, 95]
    62.           ],
    63.           "marker": {
    64.             "type": "triangle"
    65.           }
    66.         },
    67.         {
    68.           "values": [
    69.             [1425279600000, 9],
    70.             [1425301200000, 21],
    71.             [1425430800000, 29],
    72.             [1425488400000, 33],
    73.             [1425614400000, 39],
    74.             [1425708000000, 51],
    75.             [1425718800000, 64],
    76.             [1425859200000, 70],
    77.             [1425931200000, 75],
    78.             [1426042800000, 93]
    79.           ],
    80.           "marker": {
    81.             "type": "rpoly4"
    82.           }
    83.         },
    84.         {
    85.           "values": [
    86.             [1425200400000, 11],
    87.             [1425358800000, 15],
    88.             [1425441600000, 24],
    89.             [1425535200000, 29],
    90.             [1425574800000, 30],
    91.             [1425646800000, 35],
    92.             [1425754800000, 67],
    93.             [1425852000000, 70],
    94.             [1425888000000, 71],
    95.             [1426014000000, 90]
    96.           ],
    97.           "marker": {
    98.             "type": "gear8"
    99.           }
    100.         },
    101.         {
    102.           "values": [
    103.             [1425236400000, 5],
    104.             [1425337200000, 5],
    105.             [1425384000000, 10],
    106.             [1425488400000, 30],
    107.             [1425610800000, 45],
    108.             [1425686400000, 74],
    109.             [1425783600000, 50],
    110.             [1425816000000, 56],
    111.             [1425898800000, 61],
    112.             [1426028400000, 71]
    113.           ],
    114.           "marker": {
    115.             "type": "cross"
    116.           }
    117.         },
    118.       ]
    119.     };
    120.  
    121.     zingchart.render({
    122.       id: 'myChart',
    123.       data: myConfig9,
    124.       height: 400,
    125.       width: "100%"
    126.     });
    127.   </script>
    128. </body>
    129.  
    130. </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 myConfig9 = {
    2.   "type": "scatter",
    3.   "utc": true,
    4.   "timezone": -8,
    5.   "scrollX": {},
    6.   "scale-x": {
    7.     "zooming": true,
    8.     "label": {
    9.       "text": "Scatter Chart with a Time-Series Scale"
    10.     },
    11.     "min-value": 1425196800000,
    12.     "step": "2day",
    13.     "transform": {
    14.       "type": "date",
    15.       "all": "%m/%d/%y"
    16.     }
    17.   },
    18.   "series": [{
    19.       "values": [
    20.         [1425225600000, 9],
    21.         [1425312000000, 15],
    22.         [1425398400000, 21],
    23.         [1425484800000, 30],
    24.         [1425571200000, 40],
    25.         [1425657600000, 59],
    26.         [1425744000000, 60],
    27.         [1425826800000, 75],
    28.         [1425913200000, 81],
    29.         [1425999600000, 99]
    30.       ],
    31.       "marker": {
    32.         "type": "star4"
    33.       }
    34.     },
    35.     {
    36.       "values": [
    37.         [1425243600000, 3],
    38.         [1425322800000, 13],
    39.         [1425391200000, 25],
    40.         [1425470400000, 35],
    41.         [1425574800000, 41],
    42.         [1425697200000, 57],
    43.         [1425772800000, 61],
    44.         [1425866400000, 70],
    45.         [1425938400000, 82],
    46.         [1425985200000, 95]
    47.       ],
    48.       "marker": {
    49.         "type": "triangle"
    50.       }
    51.     },
    52.     {
    53.       "values": [
    54.         [1425279600000, 9],
    55.         [1425301200000, 21],
    56.         [1425430800000, 29],
    57.         [1425488400000, 33],
    58.         [1425614400000, 39],
    59.         [1425708000000, 51],
    60.         [1425718800000, 64],
    61.         [1425859200000, 70],
    62.         [1425931200000, 75],
    63.         [1426042800000, 93]
    64.       ],
    65.       "marker": {
    66.         "type": "rpoly4"
    67.       }
    68.     },
    69.     {
    70.       "values": [
    71.         [1425200400000, 11],
    72.         [1425358800000, 15],
    73.         [1425441600000, 24],
    74.         [1425535200000, 29],
    75.         [1425574800000, 30],
    76.         [1425646800000, 35],
    77.         [1425754800000, 67],
    78.         [1425852000000, 70],
    79.         [1425888000000, 71],
    80.         [1426014000000, 90]
    81.       ],
    82.       "marker": {
    83.         "type": "gear8"
    84.       }
    85.     },
    86.     {
    87.       "values": [
    88.         [1425236400000, 5],
    89.         [1425337200000, 5],
    90.         [1425384000000, 10],
    91.         [1425488400000, 30],
    92.         [1425610800000, 45],
    93.         [1425686400000, 74],
    94.         [1425783600000, 50],
    95.         [1425816000000, 56],
    96.         [1425898800000, 61],
    97.         [1426028400000, 71]
    98.       ],
    99.       "marker": {
    100.         "type": "cross"
    101.       }
    102.     },
    103.   ]
    104. };
    105.  
    106. zingchart.render({
    107.   id: 'myChart',
    108.   data: myConfig9,
    109.   height: 400,
    110.   width: "100%"
    111. });