var myConfig = {
type: 'line',
\t utc: true, //If set to false, this will default to UTC time.
\t timezone: -5, //Currently set to EST time. You can specify your desired time zone.
\t scaleX: {
\t minValue: 1471496400000,
\t maxValue: 1471579200000,
\t step: 'hour',
\t transform: {
\t type: 'date',
\t all: '%g%a'
\t },
\t label: {
\t text: 'X-Axis'
\t },
\t item: {
\t fontSize: 10
\t },
\t maxItems: 24
\t },
\t scaleX2: {
\t minValue: 1470891600000,
\t maxValue: 1470974400000,
\t placement: 'default',
\t blended: true,
\t visible: false,
\t step: 'hour',
\t transform: {
\t type: 'date',
\t all: '%g%a'
\t },
\t item: {
\t fontSize: 10
\t },
\t },
\t scaleY: {
\t values: '0:10:1',
\t label: {
\t text: 'Y-Axis'
\t },
\t item: {
\t fontSize: 10
\t },
\t guide: {
\t lineStyle: 'solid'
\t }
\t },
\t plot: {
\t tooltip: {
\t visible: false
\t }
\t },
\t crosshairX: {
\t plotLabel: {
\t multiple: true
\t }
\t },
\t series: [
\t \t { //Today, or 08/18/16 until 6am
\t \t scales: 'scaleX, scaleY',
\t \t values: [
\t \t [1471496400000, 3], //08/18/16 at midnight, EST time
\t \t [1471500000000, 7], //1am
\t \t [1471503600000, 5], //2am
\t \t [1471507200000, 9], //3am
\t \t [1471510800000, 4], //4am
\t \t [1471514400000, 5], //5am
\t \t [1471518000000, 2] //6am
\t \t ],
\t \t text: 'Today'
\t \t },
\t \t { //Last Thursday, or 08/11/16, all 24 hours
\t \t scales: 'scaleX2, scaleY',
\t \t values: [
\t \t [1470891600000, 5], //08/11/16 at midnight, EST time
\t \t [1470895200000, 6], //1am
\t \t [1470898800000, 4], //2am
\t \t [1470902400000, 9], //3am
\t \t [1470906000000, 1], //4am
\t \t [1470909600000, 5], //5am
\t \t [1470913200000, 6], //6am
\t \t [1470916800000, 3], //7am
\t \t [1470920400000, 5], //8am
\t \t [1470924000000, 7], //9am
\t \t [1470927600000, 8], //10am
\t \t [1470931200000, 2], //11am
\t \t [1470934800000, 3], //12am
\t \t [1470938400000, 1], //1pm
\t \t [1470942000000, 4], //2pm
\t \t [1470945600000, 6], //3pm
\t \t [1470949200000, 7], //4pm
\t \t [1470952800000, 3], //5pm
\t \t [1470956400000, 5], //6pm
\t \t [1470960000000, 6], //7pm
\t \t [1470963600000, 2], //8pm
\t \t [1470967200000, 3], //9pm
\t \t [1470970800000, 5], //10pm
\t \t [1470974400000, 4] //11pm
\t \t ],
\t \t text: 'Last Week'
\t \t }
\t ],
\t legend: {
\t align: 'center',
\t verticalAlign: 'bottom',
\t marker: {
\t type: 'circle',
\t size: 4,
\t showLine: true
\t },
\t borderWidth: 1
\t }
};
zingchart.render({
\t id : 'myChart',
\t data : myConfig,
\t height: 400,
\t width: 600
});
<head>
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
\t </head>
\t <body>
\t \t <div id='myChart'></div>
\t </body>