• 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: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            var origDates = [{
                    "dateUTCString": "Tue Oct 21 2014 21:17:02 GMT+0000 (UTC)"
                },
                {
                    "dateUTCString": "Tue Jun 10 2014 03:06:38 GMT+0000 (UTC)"
                },
                {
                    "dateUTCString": "Tue Nov 04 2014 10:46:15 GMT+0000 (UTC)"
                },
                {
                    "dateUTCString": "Sat May 17 2014 04:51:23 GMT+0000 (UTC)"
                },
                {
                    "dateUTCString": "Fri Aug 07 2015 02:26:57 GMT+0000 (UTC)"
                },
                {
                    "dateUTCString": "Mon Apr 13 2015 07:07:44 GMT+0000 (UTC)"
                },
                {
                    "dateUTCString": "Mon May 19 2014 22:47:56 GMT+0000 (UTC)"
                },
                {
                    "dateUTCString": "Sat Jun 13 2015 00:38:36 GMT+0000 (UTC)"
                },
                {
                    "dateUTCString": "Sat Feb 07 2015 23:55:14 GMT+0000 (UTC)"
                },
                {
                    "dateUTCString": "Thu May 15 2014 19:44:57 GMT+0000 (UTC)"
                }
            ];
    
            var newDates = [];
            for (var n = 0; n < origDates.length; n++) {
                var currentDate = new Date(origDates[n].dateUTCString); // Create a Date instance
                newDates.push(currentDate.getTime()); // getTime() for Unix time in ms
            }
            newDates.sort(); // Sort the dates chronologically
    
            var myConfig = {
                type: "bar",
                utc: true,
                timezone: -8,
                plot: {
                    valueBox: {
                        text: "%k",
                        color: "#555",
                        fontWeight: "none"
                    }
                },
                scaleX: {
                    values: newDates,
                    transform: {
                        type: "date",
                        all: "%m/%d/%y\n%h:%i:%s"
                    }
                },
                series: [{
                    values: [35, 42, 67, 89, 25, 34, 67, 85, 43, 34]
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: 400,
                width: 600
            });
        </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 origDates = [
      {
        "dateUTCString": "Tue Oct 21 2014 21:17:02 GMT+0000 (UTC)"
      },
      {
        "dateUTCString": "Tue Jun 10 2014 03:06:38 GMT+0000 (UTC)"
      },
      {
        "dateUTCString": "Tue Nov 04 2014 10:46:15 GMT+0000 (UTC)"
      },
      {
        "dateUTCString": "Sat May 17 2014 04:51:23 GMT+0000 (UTC)"
      },
      {
        "dateUTCString": "Fri Aug 07 2015 02:26:57 GMT+0000 (UTC)"
      },
      {
        "dateUTCString": "Mon Apr 13 2015 07:07:44 GMT+0000 (UTC)"
      },
      {
        "dateUTCString": "Mon May 19 2014 22:47:56 GMT+0000 (UTC)"
      },
      {
        "dateUTCString": "Sat Jun 13 2015 00:38:36 GMT+0000 (UTC)"
      },
      {
        "dateUTCString": "Sat Feb 07 2015 23:55:14 GMT+0000 (UTC)"
      },
      {
        "dateUTCString": "Thu May 15 2014 19:44:57 GMT+0000 (UTC)"
      }
    ];
    
    var newDates = [];
    for(var n = 0; n < origDates.length; n++){
      var currentDate = new Date(origDates[n].dateUTCString); // Create a Date instance
      newDates.push(currentDate.getTime()); // getTime() for Unix time in ms
    }
    newDates.sort(); // Sort the dates chronologically
    
    var myConfig = {
     	type: "bar", 
     	utc: true,
     	timezone: -8,
     	plot:{
     	  valueBox:{
     	    text:"%k",
     	    color:"#555",
     	    fontWeight:"none"
     	  }
     	},
     	scaleX:{
     	  values:newDates,
     	  transform:{
     	    type:"date",
     	    all:"%m/%d/%y\n%h:%i:%s"
     	  }
     	},
    	series : [
    		{
    			values : [35,42,67,89,25,34,67,85,43,34]
    		}
    	]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 400, 
    	width: 600 
    });