• 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>
            zing-grid[loading] {
                height: 400px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig9 = {
                "type": "scatter",
                "utc": true,
                "timezone": -8,
                "scrollX": {},
                "scale-x": {
                    "zooming": true,
                    "label": {
                        "text": "Scatter Chart with a Time-Series Scale"
                    },
                    "min-value": 1425196800000,
                    "step": "2day",
                    "transform": {
                        "type": "date",
                        "all": "%m/%d/%y"
                    }
                },
                "series": [{
                        "values": [
                            [1425225600000, 9],
                            [1425312000000, 15],
                            [1425398400000, 21],
                            [1425484800000, 30],
                            [1425571200000, 40],
                            [1425657600000, 59],
                            [1425744000000, 60],
                            [1425826800000, 75],
                            [1425913200000, 81],
                            [1425999600000, 99]
                        ],
                        "marker": {
                            "type": "star4"
                        }
                    },
                    {
                        "values": [
                            [1425243600000, 3],
                            [1425322800000, 13],
                            [1425391200000, 25],
                            [1425470400000, 35],
                            [1425574800000, 41],
                            [1425697200000, 57],
                            [1425772800000, 61],
                            [1425866400000, 70],
                            [1425938400000, 82],
                            [1425985200000, 95]
                        ],
                        "marker": {
                            "type": "triangle"
                        }
                    },
                    {
                        "values": [
                            [1425279600000, 9],
                            [1425301200000, 21],
                            [1425430800000, 29],
                            [1425488400000, 33],
                            [1425614400000, 39],
                            [1425708000000, 51],
                            [1425718800000, 64],
                            [1425859200000, 70],
                            [1425931200000, 75],
                            [1426042800000, 93]
                        ],
                        "marker": {
                            "type": "rpoly4"
                        }
                    },
                    {
                        "values": [
                            [1425200400000, 11],
                            [1425358800000, 15],
                            [1425441600000, 24],
                            [1425535200000, 29],
                            [1425574800000, 30],
                            [1425646800000, 35],
                            [1425754800000, 67],
                            [1425852000000, 70],
                            [1425888000000, 71],
                            [1426014000000, 90]
                        ],
                        "marker": {
                            "type": "gear8"
                        }
                    },
                    {
                        "values": [
                            [1425236400000, 5],
                            [1425337200000, 5],
                            [1425384000000, 10],
                            [1425488400000, 30],
                            [1425610800000, 45],
                            [1425686400000, 74],
                            [1425783600000, 50],
                            [1425816000000, 56],
                            [1425898800000, 61],
                            [1426028400000, 71]
                        ],
                        "marker": {
                            "type": "cross"
                        }
                    },
                ]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig9,
                height: 400,
                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>
    
          
    var myConfig9 = {
      "type": "scatter", 
      "utc":true,
      "timezone":-8,
      "scrollX":{},
      "scale-x":{
        "zooming":true,
        "label":{
          "text":"Scatter Chart with a Time-Series Scale"
        },
        "min-value":1425196800000,
        "step":"2day",
        "transform":{
          "type":"date",
          "all":"%m/%d/%y"
        }
      },
      "series": [
        {
          "values": [
            [1425225600000,9],
            [1425312000000,15],
            [1425398400000,21],
            [1425484800000,30],
            [1425571200000,40],
            [1425657600000,59],
            [1425744000000,60],
            [1425826800000,75],
            [1425913200000,81],
            [1425999600000,99]
    			],
    			"marker":{
    			  "type":"star4"
    			}
    		},
    		{
          "values": [
            [1425243600000,3],
            [1425322800000,13],
            [1425391200000,25],
            [1425470400000,35],
            [1425574800000,41],
            [1425697200000,57],
            [1425772800000,61],
            [1425866400000,70],
            [1425938400000,82],
            [1425985200000,95]
    			],
    			"marker":{
    			  "type":"triangle"
    			}
    		},
    		{
          "values": [
            [1425279600000,9],
            [1425301200000,21],
            [1425430800000,29],
            [1425488400000,33],
            [1425614400000,39],
            [1425708000000,51],
            [1425718800000,64],
            [1425859200000,70],
            [1425931200000,75],
            [1426042800000,93]
    			],
    			"marker":{
    			  "type":"rpoly4"
    			}
    		},
    		{
          "values": [
            [1425200400000,11],
            [1425358800000,15],
            [1425441600000,24],
            [1425535200000,29],
            [1425574800000,30],
            [1425646800000,35],
            [1425754800000,67],
            [1425852000000,70],
            [1425888000000,71],
            [1426014000000,90]
    			],
    			"marker":{
    			  "type":"gear8"
    			}
    		},
    		{
          "values": [
            [1425236400000,5],
            [1425337200000,5],
            [1425384000000,10],
            [1425488400000,30],
            [1425610800000,45],
            [1425686400000,74],
            [1425783600000,50],
            [1425816000000,56],
            [1425898800000,61],
            [1426028400000,71]
    			],
    			"marker":{
    			  "type":"cross"
    			}
    		},
    	]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig9, 
    	height: 400, 
    	width: "100%" 
    });