• 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%;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </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%"
    });