• 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 myConfig = {
                "type": "line",
                "utc": true,
                "timezone": -5, //EST time
                "scale-x": {
                    "min-value": "1457101800000",
                    "max-value": "1457125200000",
                    "step": "30minute",
                    "transform": {
                        "type": "date",
                        "all": "%g:%i"
                    },
                    "item": {
                        "font-size": 10
                    },
                    "max-items": 14
                },
                "scale-y": {
                    "values": "30:34:1",
                    "format": "$%v",
                    "item": {
                        "font-size": 10
                    }
                },
                "plot": {
                    "aspect": "spline",
                    "tooltip": {
                        "text": "$%v<br>at<br>%kv",
                        "decimals": 2,
                        "text-align": "center",
                        "font-color": "black",
                        "background-color": "white",
                        "border-width": 1,
                        "border-color": "gray",
                        "border-radius": "7px",
                        "alpha": 0.5,
                        "padding": "7%"
                    }
                },
                "series": [{
                        "values": [
                            [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
                            [1457103600000, 31.30], //10:00 a.m.
                            [1457105400000, 30.95], //10:30 a.m.
                            [1457107200000, 30.99], //11:00 a.m.
                            [1457109000000, 32.33], //11:30 a.m.
                            [1457110800000, 33.34], //12:00 p.m.
                            [1457112600000, 33.01], //12:30 p.m.
                            [1457114400000, 34], //1:00 p.m.
                            [1457116200000, 33.64], //1:30 p.m.
                            [1457118000000, 32.59], //2:00 p.m.
                            [1457119800000, 32.60], //2:30 p.m.
                            [1457121600000, 31.99], //3:00 p.m.
                            [1457123400000, 31.14], //3:30 p.m.
                            [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
                        ]
                    },
                    {
                        "values": [
                            [1457101800000, 31.30], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
                            [1457103600000, 32.51], //10:00 a.m.
                            [1457105400000, 32.56], //10:30 a.m.
                            [1457107200000, 31.59], //11:00 a.m.
                            [1457109000000, 30.31], //11:30 a.m.
                            [1457110800000, 31.61], //12:00 p.m.
                            [1457112600000, 31.15], //12:30 p.m.
                            [1457114400000, 32.63], //1:00 p.m.
                            [1457116200000, 32.61], //1:30 p.m.
                            [1457118000000, 33.37], //2:00 p.m.
                            [1457119800000, 32.16], //2:30 p.m.
                            [1457121600000, 32.33], //3:00 p.m.
                            [1457123400000, 33.94], //3:30 p.m.
                            [1457125200000, 33.44], //at 4:00 p.m. EST (which is 21:00 GMT)
                        ]
                    }
                ]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                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 myConfig = {
      "type": "line",
     	"utc":true,
     	"timezone":-5, //EST time
     	"scale-x":{
     	  "min-value":"1457101800000",
     	  "max-value":"1457125200000",
     	  "step":"30minute",
     	  "transform":{
     	    "type":"date",
     	    "all":"%g:%i"
     	  },
     	  "item":{
     	    "font-size":10
     	  }, 
     	  "max-items":14
     	},
     	"scale-y":{
     	  "values":"30:34:1",
     	  "format":"$%v",
     	  "item":{
     	    "font-size":10
     	  }
     	},
     	"plot":{
     	  "aspect":"spline",
     	  "tooltip":{
          "text":"$%v<br>at<br>%kv",
          "decimals":2,
          "text-align":"center",
          "font-color":"black",
          "background-color":"white",
          "border-width":1,
          "border-color":"gray",
          "border-radius":"7px",
          "alpha":0.5,
          "padding":"7%"
        }
     	},
    	"series": [
    		{
    		  "values":[
    		    [1457101800000,30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
    		    [1457103600000,31.30], //10:00 a.m.
    		    [1457105400000,30.95], //10:30 a.m.
    		    [1457107200000,30.99], //11:00 a.m.
    		    [1457109000000,32.33], //11:30 a.m.
    		    [1457110800000,33.34], //12:00 p.m.
    		    [1457112600000,33.01], //12:30 p.m.
    		    [1457114400000,34], //1:00 p.m.
    		    [1457116200000,33.64], //1:30 p.m.
    		    [1457118000000,32.59], //2:00 p.m.
    		    [1457119800000,32.60], //2:30 p.m.
    		    [1457121600000,31.99], //3:00 p.m.
    		    [1457123400000,31.14], //3:30 p.m.
    		    [1457125200000,32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    		  ]
    		},
    		{
    		  "values":[
    		    [1457101800000,31.30], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
    		    [1457103600000,32.51], //10:00 a.m.
    		    [1457105400000,32.56], //10:30 a.m.
    		    [1457107200000,31.59], //11:00 a.m.
    		    [1457109000000,30.31], //11:30 a.m.
    		    [1457110800000,31.61], //12:00 p.m.
    		    [1457112600000,31.15], //12:30 p.m.
    		    [1457114400000,32.63], //1:00 p.m.
    		    [1457116200000,32.61], //1:30 p.m.
    		    [1457118000000,33.37], //2:00 p.m.
    		    [1457119800000,32.16], //2:30 p.m.
    		    [1457121600000,32.33], //3:00 p.m.
    		    [1457123400000,33.94], //3:30 p.m.
    		    [1457125200000,33.44], //at 4:00 p.m. EST (which is 21:00 GMT)
    		  ]
    		}
    	]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 400, 
    	width: "100%"
    });