• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body,
        #myChart {
          height: 100%;
          width: 100%;
        }
      </style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig11 = {
          "type": "bubble",
          "utc": true,
          "timezone": -8,
          "scale-x": {
            "label": {
              "text": "Bubble Chart with a Time-Series Scale"
            },
            "min-value": 1425196800000,
            "step": "2day",
            "transform": {
              "type": "date",
              "all": "%m/%d/%y"
            }
          },
          "tooltip": {
            "text": "%scale-key-value:<br>%node-size-value"
          },
          "series": [{
              "values": [
                [1425225600000, 9, 59],
                [1425312000000, 15, 15],
                [1425398400000, 21, 30],
                [1425484800000, 30, 5],
                [1425571200000, 40, 35],
                [1425657600000, 59, 21],
                [1425744000000, 60, 25],
                [1425826800000, 75, 85],
                [1425913200000, 81, 87],
                [1425999600000, 99, 12]
              ]
            },
            {
              "values": [
                [1425243600000, 3, 18],
                [1425322800000, 13, 21],
                [1425391200000, 25, 33],
                [1425470400000, 35, 54],
                [1425574800000, 41, 59],
                [1425697200000, 57, 34],
                [1425772800000, 61, 17],
                [1425866400000, 70, 3],
                [1425938400000, 82, 28],
                [1425985200000, 95, 76]
              ]
            },
            {
              "values": [
                [1425279600000, 9, 3],
                [1425301200000, 21, 60],
                [1425430800000, 29, 9],
                [1425488400000, 33, 9],
                [1425614400000, 39, 4],
                [1425708000000, 51, 3],
                [1425718800000, 64, 11],
                [1425859200000, 70, 12],
                [1425931200000, 75, 3],
                [1426042800000, 93, 29]
              ]
            },
            {
              "values": [
                [1425200400000, 11, 11],
                [1425358800000, 15, 21],
                [1425441600000, 24, 54],
                [1425535200000, 29, 6],
                [1425574800000, 30, 9],
                [1425646800000, 35, 59],
                [1425754800000, 67, 30],
                [1425852000000, 70, 14],
                [1425888000000, 71, 7],
                [1426014000000, 90, 9]
              ]
            },
            {
              "values": [
                [1425236400000, 5, 8],
                [1425337200000, 5, 3],
                [1425384000000, 10, 2],
                [1425488400000, 30, 8],
                [1425610800000, 45, 87],
                [1425686400000, 74, 1],
                [1425783600000, 50, 7],
                [1425816000000, 56, 20],
                [1425898800000, 61, 3],
                [1426028400000, 71, 4]
              ]
            },
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig11,
          height: "100%",
          width: "100%"
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    html,
    body,
    #myChart {
      height: 100%;
      width: 100%;
    }
    var myConfig11 = {
      "type": "bubble",
      "utc": true,
      "timezone": -8,
      "scale-x": {
        "label": {
          "text": "Bubble Chart with a Time-Series Scale"
        },
        "min-value": 1425196800000,
        "step": "2day",
        "transform": {
          "type": "date",
          "all": "%m/%d/%y"
        }
      },
      "tooltip": {
        "text": "%scale-key-value:<br>%node-size-value"
      },
      "series": [{
          "values": [
            [1425225600000, 9, 59],
            [1425312000000, 15, 15],
            [1425398400000, 21, 30],
            [1425484800000, 30, 5],
            [1425571200000, 40, 35],
            [1425657600000, 59, 21],
            [1425744000000, 60, 25],
            [1425826800000, 75, 85],
            [1425913200000, 81, 87],
            [1425999600000, 99, 12]
          ]
        },
        {
          "values": [
            [1425243600000, 3, 18],
            [1425322800000, 13, 21],
            [1425391200000, 25, 33],
            [1425470400000, 35, 54],
            [1425574800000, 41, 59],
            [1425697200000, 57, 34],
            [1425772800000, 61, 17],
            [1425866400000, 70, 3],
            [1425938400000, 82, 28],
            [1425985200000, 95, 76]
          ]
        },
        {
          "values": [
            [1425279600000, 9, 3],
            [1425301200000, 21, 60],
            [1425430800000, 29, 9],
            [1425488400000, 33, 9],
            [1425614400000, 39, 4],
            [1425708000000, 51, 3],
            [1425718800000, 64, 11],
            [1425859200000, 70, 12],
            [1425931200000, 75, 3],
            [1426042800000, 93, 29]
          ]
        },
        {
          "values": [
            [1425200400000, 11, 11],
            [1425358800000, 15, 21],
            [1425441600000, 24, 54],
            [1425535200000, 29, 6],
            [1425574800000, 30, 9],
            [1425646800000, 35, 59],
            [1425754800000, 67, 30],
            [1425852000000, 70, 14],
            [1425888000000, 71, 7],
            [1426014000000, 90, 9]
          ]
        },
        {
          "values": [
            [1425236400000, 5, 8],
            [1425337200000, 5, 3],
            [1425384000000, 10, 2],
            [1425488400000, 30, 8],
            [1425610800000, 45, 87],
            [1425686400000, 74, 1],
            [1425783600000, 50, 7],
            [1425816000000, 56, 20],
            [1425898800000, 61, 3],
            [1426028400000, 71, 4]
          ]
        },
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig11,
      height: "100%",
      width: "100%"
    });