<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
<script nonce="undefined" src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.container {
width: 400px;
height: 200px;
min-width: 400px;
border: 1px dashed #777;
}
#myChart {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class='container'>
<div id='myChart'></div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'area',
scaleX: {
minValue: 1457101800000,
maxValue: 1457125200000,
step: '30minute',
transform: {
type: 'date',
all: '%g:%i'
},
label: {
text: 'Trading Day',
fontSize: 16
},
item: {
fontSize: 12
},
itemsOverlap: true,
maxItems: 14,
mediaRules: [{
maxWidth: 500,
maxItems: 3,
label: {
fontSize: 12
},
item: {
fontSize: 9
}
},
{
maxWidth: 300,
label: {
visible: false
}
}
]
},
scaleY: {
values: '30:34:1',
format: '$%v',
label: {
text: 'Price',
fontSize: 16
},
item: {
fontSize: 12
},
guide: {
lineStyle: 'solid'
},
mediaRules: [{
maxWidth: 500,
values: '30:34:2',
label: {
fontSize: 12
},
item: {
fontSize: 9
}
},
{
maxWidth: 300,
label: {
visible: false
}
}
]
},
utc: true,
timezone: -5, //EST time
plot: {
tooltip: {
text: '$%v/share<br>at<br>%kv',
decimals: 2,
transform: {
type: 'date',
all: '%g:%i %a'
},
borderRadius: '3px'
},
lineColor: '#1ABC9C',
backgroundColor: '#3498DB #1ABC9C',
marker: {
backgroundColor: '#3498DB',
borderColor: '#1ABC9C',
size: 3
},
alphaArea: 0.5
},
plotarea: {
adjustLayout: true
},
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)
]
}]
};
// adjust the refresh rate of the chart
zingchart.DEV.RESIZESPEED = 50;
zingchart.DEV.DEBOUNCESPEED = 50;
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});
// initiate jquery resizable container for demo purposes
$('.container').resizable();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div class='container'>
<div id='myChart'></div>
</div>
</body>
</html>
.container {
width: 400px;
height: 200px;
min-width: 400px;
border: 1px dashed #777;
}
#myChart {
width: 100%;
height: 100%;
}
let chartConfig = {
type: 'area',
scaleX: {
minValue: 1457101800000,
maxValue: 1457125200000,
step: '30minute',
transform: {
type: 'date',
all: '%g:%i'
},
label: {
text: 'Trading Day',
fontSize: 16
},
item: {
fontSize: 12
},
itemsOverlap: true,
maxItems: 14,
mediaRules: [{
maxWidth: 500,
maxItems: 3,
label: {
fontSize: 12
},
item: {
fontSize: 9
}
},
{
maxWidth: 300,
label: {
visible: false
}
}
]
},
scaleY: {
values: '30:34:1',
format: '$%v',
label: {
text: 'Price',
fontSize: 16
},
item: {
fontSize: 12
},
guide: {
lineStyle: 'solid'
},
mediaRules: [{
maxWidth: 500,
values: '30:34:2',
label: {
fontSize: 12
},
item: {
fontSize: 9
}
},
{
maxWidth: 300,
label: {
visible: false
}
}
]
},
utc: true,
timezone: -5, //EST time
plot: {
tooltip: {
text: '$%v/share<br>at<br>%kv',
decimals: 2,
transform: {
type: 'date',
all: '%g:%i %a'
},
borderRadius: '3px'
},
lineColor: '#1ABC9C',
backgroundColor: '#3498DB #1ABC9C',
marker: {
backgroundColor: '#3498DB',
borderColor: '#1ABC9C',
size: 3
},
alphaArea: 0.5
},
plotarea: {
adjustLayout: true
},
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)
]
}]
};
// adjust the refresh rate of the chart
zingchart.DEV.RESIZESPEED = 50;
zingchart.DEV.DEBOUNCESPEED = 50;
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%'
});
// initiate jquery resizable container for demo purposes
$('.container').resizable();