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