• 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": "area",
                "utc": true,
                /* This attribute will ensure your chart reads in UTC time. */
                "timezone": 9.5,
                /* This attribute will allow you to set a offset from UTC time */
                "plotarea": {
                    "adjust-layout": true
                },
                "title": {
                    "text": "Utc & Timezone",
                    "adjustLayout": true // dynamic margins around the title
                },
                "plot": {
                    "tooltip": {
                        "text": "%kv<br>%v"
                    }
                },
                "scale-x": {
                    "label": {
                        "text": "Above is an example of a time-series scale"
                    },
                    "min-value": 1420070400000,
                    "step": "month",
                    "transform": {
                        "type": "date",
                        "all": "%H:%i:%s<br>%M.%d.%y"
                    }
                },
                "series": [{
                    "values": [20, 40, 25, 50, 15, 45, 33, 34]
                }, {
                    "values": [5, 30, 21, 18, 59, 50, 28, 33]
                }, ]
            };
    
            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": "area", 
    "utc":true,  /* This attribute will ensure your chart reads in UTC time. */ 
    "timezone":9.5, /* This attribute will allow you to set a offset from UTC time */
    "plotarea": {
      "adjust-layout":true
    }, 
    "title":{
      "text": "Utc & Timezone",
      "adjustLayout":true // dynamic margins around the title
    },
    "plot": {
      "tooltip": {
        "text": "%kv<br>%v"
      }
    },
    "scale-x":{
      "label":{ 
        "text":"Above is an example of a time-series scale"
      }, 
      "min-value":1420070400000,
      "step":"month", 
      "transform":{       
        "type":"date",
        "all":"%H:%i:%s<br>%M.%d.%y"
        } 
    }, "series": [{"values":[20,40,25,50,15,45,33,34]}, {"values":[5,30,21,18,59,50,28,33]}, ] };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 400, 
    	width: "100%" 
    });