<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE DATA
// -----------------------------
let chartData = [{
type: 'bar',
text: 'Volume',
values: [27144790, 38327470, 15735090, 12707680, 10368880, 134518400, 68773920, 51248570, 31846320, 34607180,
24654210, 20017750, 22001560, 21365850, 15923890, 16562780, 15538680, 35531140, 27375520, 25181850, 60205450,
53951170, 40554390, 31152390, 19898330, 24839090, 40861070, 23335620, 23331520, 36496330, 29978670, 58051950,
29098970, 29787120, 30297590, 23653430, 24616840, 41462900, 22560100, 24420880, 25412380, 45266100, 48248930,
22747480, 35981520, 24349150, 15795100, 21367560, 49907430, 26799690, 26533110, 21053330, 19644590, 24613950,
19681380, 22607130, 26340350, 19633650, 16817820, 13078060, 22066610, 15936780, 16692600, 61034530
],
backgroundColor: '#40beeb',
barWidth: '4px'
},
{
type: 'line',
text: 'Open',
values: [40.53, 37.66, 39.01, 39.2, 38.52, 35.61, 31.97, 31.48, 32.23, 33.08, 33.84, 33.35, 33.02, 32.95, 32.05,
32, 31.85, 31.33, 31.51, 30.94, 31.5, 34.67, 33.73, 32.89, 31.73, 32.49, 33.67, 34.14, 33.24, 34.73, 35.07,
35.06, 36.85, 36.7, 38.03, 38.16, 38.73, 38.82, 39.07, 39.44, 38.24, 40.05, 40.7, 40.81, 42.06, 42.83, 41.94,
41.08, 39.96, 37.82, 36.49, 38.15, 38.57, 38.59, 38.31, 36.8, 36.81, 37.23, 38.31, 37.65, 38.71, 38.2, 38.3, 38.11
],
lineColor: '#305f74',
scales: 'scale-x,scale-y-2'
},
{
type: 'line',
text: 'Close',
values: [42.62, 38.97, 39.09, 39.02, 38.75, 31.85, 30.66, 31.96, 32.05, 33.94, 33.39, 32.85, 32.77, 32.26, 32.07,
31.77, 31.75, 31.52, 30.5, 30.51, 33.77, 34, 32.44, 31.75, 32.58, 32.9, 33.89, 33.33, 34.47, 35.37, 35.54, 36.79,
36.9, 38.02, 38.02, 38.74, 38.9, 39.24, 39.52, 38.48, 39.46, 41.44, 40.93, 40.97, 42.05, 41.77, 41.33, 40.23,
37.41, 38.06, 37.84, 38.33, 38.31, 37.88, 37.43, 36.87, 37.05, 38.05, 37.65, 37.75, 38.71, 38.16, 37.93, 38.59
],
lineColor: '#4492a8',
scales: 'scale-x,scale-y-2'
},
{
type: 'line',
text: 'High',
values: [43.97, 38.98, 40.77, 39.86, 39.6, 36.1, 32, 32.98, 33.11, 34.1, 34.06, 33.83, 33.29, 33.21, 32.44, 32.39,
31.95, 32.25, 31.68, 31.2, 33.84, 35.14, 33.86, 33.2, 32.69, 33.32, 34.89, 34.41, 34.55, 35.5, 35.97, 37.27, 37.25,
38.17, 38.55, 38.83, 39.3, 39.24, 39.58, 39.64, 39.59, 42, 41.15, 41.34, 42.95, 42.83, 42, 41.4544, 40.04, 38.35,
38.1, 38.79, 39.378, 38.99, 38.52, 37.17, 37.08, 38.29, 38.6, 38.19, 39, 38.8, 38.44, 38.92
],
lineColor: '#7ca82b',
scales: 'scale-x,scale-y-2'
},
{
type: 'line',
text: 'Low',
values: [40.175, 37.24, 38.966, 38.7, 38.05, 31.72, 29.51, 31.13, 31.75, 32.4, 32.89, 32.62, 32.16, 32.02, 31.64,
31.52, 31.15, 30.52, 30.45, 30.38, 31.09, 33.88, 32.11, 31.62, 31.65, 31.85, 33.112, 33.22, 33.09, 34.66, 34.93,
35.06, 35.9, 36.44, 37.298, 37.75, 38.32, 37.7727, 38.73, 38.255, 38.01, 39.81, 40.11, 40.35, 41.91, 41.42, 40.825,
40.14, 36.84, 37.35, 36.11, 38, 38.2, 37.62, 37.1, 36.38, 35.95, 36.85, 37.45, 37.56, 37.85, 38.02, 37.56, 37.99
],
lineColor: '#cc3300',
scales: 'scale-x,scale-y-2'
}
];
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'mixed',
backgroundColor: '#fff',
title: {
text: 'Twitter Stock Prices',
alpha: 1,
backgroundColor: -1,
fontColor: '#333333'
},
plot: {
lineWidth: '1px',
marker: {
visible: false
},
tooltipText: '%v'
},
plotarea: {
margin: '75 75 75 75'
},
scaleX: {
fontColor: '#333333',
guide: {
lineColor: '#ccc',
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
fontColor: '#333333'
},
labels: ['4/29/19', '4/30/19', '5/1/19', '5/2/19', '5/5/19', '5/6/19', '5/7/19', '5/8/19', '5/9/19',
'5/12/19', '5/13/19', '5/19/19', '5/15/19', '5/16/19', '5/19/19', '5/20/19', '5/21/19', '5/22/19',
'5/23/19', '5/27/19', '5/28/19', '5/29/19', '5/30/19', '6/2/19', '6/3/19', '6/4/19', '6/5/19',
'6/6/19', '6/9/19', '6/10/19', '6/11/19', '6/12/19', '6/13/19', '6/16/19', '6/17/19', '6/18/19',
'6/19/19', '6/20/19', '6/23/19', '6/24/19', '6/25/19', '6/26/19', '6/27/19', '6/30/19', '7/1/19',
'7/2/19', '7/3/19', '7/7/19', '7/8/19', '7/9/19', '7/10/19', '7/11/19', '7/19/19', '7/15/19', '7/16/19',
'7/17/19', '7/18/19', '7/21/19', '7/22/19', '7/23/19', '7/24/19', '7/25/19', '7/28/19', '7/29/19'
],
lineColor: '#151515',
maxItems: 8,
tick: {
lineColor: '#cccccc',
lineWidth: '1px'
},
zooming: true,
zoomSnap: true
},
scaleY: {
decimals: 0,
fontColor: '#333333',
guide: {
lineColor: '#ccc',
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
fontColor: '#333333'
},
label: {
text: 'Volume',
fontColor: '#333333'
},
lineColor: '#151515',
multiplier: true,
tick: {
lineColor: '#cccccc',
lineWidth: '1px'
},
zooming: true,
zoomSnap: true
},
scaleY2: {
values: '0:50:5',
decimals: 0,
format: '$%v',
label: {
text: 'Share Price'
},
multiplier: true
},
crosshairX: {
plotLabel: {
text: '%t: %v',
borderRadius: '5px',
decimals: 2
}
},
images: [{
src: 'https://app.zingsoft.com/api/file/7GZZYXZ7/icon_twitter_small.png',
x: '47%',
y: '5%'
}],
labels: [{
text: 'Zoom by dragging in graph',
padding: '5px',
backgroundColor: '#fff',
borderColor: '#fff',
borderRadius: '5px',
borderWidth: '1px',
fontColor: '#777',
x: '9%',
y: '92%'
},
{
id: 'reload_btn',
text: 'Reload',
padding: '5px',
backgroundColor: '#fff',
borderColor: '#777',
borderRadius: '5px',
borderWidth: '1px',
cursor: 'hand',
fontColor: '#777',
x: '83%',
y: '92%'
}
],
scrollX: {
bar: {
backgroundColor: '#eee',
height: '10px'
}
},
scrollY: {
bar: {
width: '10px',
backgroundColor: '#eee'
}
},
series: chartData
};
// EVENTS
// -----------------------------
zingchart.label_click = (p) => {
zingchart.exec(p.id, 'reload');
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
cacheControl: ''
});
</script>
</body>
</html>
// DEFINE DATA
// -----------------------------
let chartData = [
{
type: 'bar',
text: 'Volume',
values: [27144790, 38327470, 15735090, 12707680, 10368880, 134518400, 68773920, 51248570, 31846320, 34607180,
24654210, 20017750, 22001560, 21365850, 15923890, 16562780, 15538680, 35531140, 27375520, 25181850, 60205450,
53951170, 40554390, 31152390, 19898330, 24839090, 40861070, 23335620, 23331520, 36496330, 29978670, 58051950,
29098970, 29787120, 30297590, 23653430, 24616840, 41462900, 22560100, 24420880, 25412380, 45266100, 48248930,
22747480, 35981520, 24349150, 15795100, 21367560, 49907430, 26799690, 26533110, 21053330, 19644590, 24613950,
19681380, 22607130, 26340350, 19633650, 16817820, 13078060, 22066610, 15936780, 16692600, 61034530],
backgroundColor: '#40beeb',
barWidth: '4px'
},
{
type: 'line',
text: 'Open',
values: [40.53, 37.66, 39.01, 39.2, 38.52, 35.61, 31.97, 31.48, 32.23, 33.08, 33.84, 33.35, 33.02, 32.95, 32.05,
32, 31.85, 31.33, 31.51, 30.94, 31.5, 34.67, 33.73, 32.89, 31.73, 32.49, 33.67, 34.14, 33.24, 34.73, 35.07,
35.06, 36.85, 36.7, 38.03, 38.16, 38.73, 38.82, 39.07, 39.44, 38.24, 40.05, 40.7, 40.81, 42.06, 42.83, 41.94,
41.08, 39.96, 37.82, 36.49, 38.15, 38.57, 38.59, 38.31, 36.8, 36.81, 37.23, 38.31, 37.65, 38.71, 38.2, 38.3, 38.11],
lineColor: '#305f74',
scales: 'scale-x,scale-y-2'
},
{
type: 'line',
text: 'Close',
values: [42.62, 38.97, 39.09, 39.02, 38.75, 31.85, 30.66, 31.96, 32.05, 33.94, 33.39, 32.85, 32.77, 32.26, 32.07,
31.77, 31.75, 31.52, 30.5, 30.51, 33.77, 34, 32.44, 31.75, 32.58, 32.9, 33.89, 33.33, 34.47, 35.37, 35.54, 36.79,
36.9, 38.02, 38.02, 38.74, 38.9, 39.24, 39.52, 38.48, 39.46, 41.44, 40.93, 40.97, 42.05, 41.77, 41.33, 40.23,
37.41, 38.06, 37.84, 38.33, 38.31, 37.88, 37.43, 36.87, 37.05, 38.05, 37.65, 37.75, 38.71, 38.16, 37.93, 38.59],
lineColor: '#4492a8',
scales: 'scale-x,scale-y-2'
},
{
type: 'line',
text: 'High',
values: [43.97, 38.98, 40.77, 39.86, 39.6, 36.1, 32, 32.98, 33.11, 34.1, 34.06, 33.83, 33.29, 33.21, 32.44, 32.39,
31.95, 32.25, 31.68, 31.2, 33.84, 35.14, 33.86, 33.2, 32.69, 33.32, 34.89, 34.41, 34.55, 35.5, 35.97, 37.27, 37.25,
38.17, 38.55, 38.83, 39.3, 39.24, 39.58, 39.64, 39.59, 42, 41.15, 41.34, 42.95, 42.83, 42, 41.4544, 40.04, 38.35,
38.1, 38.79, 39.378, 38.99, 38.52, 37.17, 37.08, 38.29, 38.6, 38.19, 39, 38.8, 38.44, 38.92],
lineColor: '#7ca82b',
scales: 'scale-x,scale-y-2'
},
{
type: 'line',
text: 'Low',
values: [40.175, 37.24, 38.966, 38.7, 38.05, 31.72, 29.51, 31.13, 31.75, 32.4, 32.89, 32.62, 32.16, 32.02, 31.64,
31.52, 31.15, 30.52, 30.45, 30.38, 31.09, 33.88, 32.11, 31.62, 31.65, 31.85, 33.112, 33.22, 33.09, 34.66, 34.93,
35.06, 35.9, 36.44, 37.298, 37.75, 38.32, 37.7727, 38.73, 38.255, 38.01, 39.81, 40.11, 40.35, 41.91, 41.42, 40.825,
40.14, 36.84, 37.35, 36.11, 38, 38.2, 37.62, 37.1, 36.38, 35.95, 36.85, 37.45, 37.56, 37.85, 38.02, 37.56, 37.99],
lineColor: '#cc3300',
scales: 'scale-x,scale-y-2'
}
];
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'mixed',
backgroundColor: '#fff',
title: {
text: 'Twitter Stock Prices',
alpha: 1,
backgroundColor: -1,
fontColor: '#333333'
},
plot: {
lineWidth: '1px',
marker: {
visible: false
},
tooltipText: '%v'
},
plotarea: {
margin: '75 75 75 75'
},
scaleX: {
fontColor: '#333333',
guide: {
lineColor: '#ccc',
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
fontColor: '#333333'
},
labels: ['4/29/19', '4/30/19', '5/1/19', '5/2/19', '5/5/19', '5/6/19', '5/7/19', '5/8/19', '5/9/19',
'5/12/19', '5/13/19', '5/19/19', '5/15/19', '5/16/19', '5/19/19', '5/20/19', '5/21/19', '5/22/19',
'5/23/19', '5/27/19', '5/28/19', '5/29/19', '5/30/19', '6/2/19', '6/3/19', '6/4/19', '6/5/19',
'6/6/19', '6/9/19', '6/10/19', '6/11/19', '6/12/19', '6/13/19', '6/16/19', '6/17/19', '6/18/19',
'6/19/19', '6/20/19', '6/23/19', '6/24/19', '6/25/19', '6/26/19', '6/27/19', '6/30/19', '7/1/19',
'7/2/19', '7/3/19', '7/7/19', '7/8/19', '7/9/19', '7/10/19', '7/11/19', '7/19/19', '7/15/19', '7/16/19',
'7/17/19', '7/18/19', '7/21/19', '7/22/19', '7/23/19', '7/24/19', '7/25/19', '7/28/19', '7/29/19'],
lineColor: '#151515',
maxItems: 8,
tick: {
lineColor: '#cccccc',
lineWidth: '1px'
},
zooming: true,
zoomSnap: true
},
scaleY: {
decimals: 0,
fontColor: '#333333',
guide: {
lineColor: '#ccc',
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
fontColor: '#333333'
},
label: {
text: 'Volume',
fontColor: '#333333'
},
lineColor: '#151515',
multiplier: true,
tick: {
lineColor: '#cccccc',
lineWidth: '1px'
},
zooming: true,
zoomSnap: true
},
scaleY2: {
values: '0:50:5',
decimals: 0,
format: '$%v',
label: {
text: 'Share Price'
},
multiplier: true
},
crosshairX: {
plotLabel: {
text: '%t: %v',
borderRadius: '5px',
decimals: 2
}
},
images: [
{
src: 'https://app.zingsoft.com/api/file/7GZZYXZ7/icon_twitter_small.png',
x: '47%',
y: '5%'
}
],
labels: [
{
text: 'Zoom by dragging in graph',
padding: '5px',
backgroundColor: '#fff',
borderColor: '#fff',
borderRadius: '5px',
borderWidth: '1px',
fontColor: '#777',
x: '9%',
y: '92%'
},
{
id: 'reload_btn',
text: 'Reload',
padding: '5px',
backgroundColor: '#fff',
borderColor: '#777',
borderRadius: '5px',
borderWidth: '1px',
cursor: 'hand',
fontColor: '#777',
x: '83%',
y: '92%'
}
],
scrollX: {
bar: {
backgroundColor: '#eee',
height: '10px'
}
},
scrollY: {
bar: {
width: '10px',
backgroundColor: '#eee'
}
},
series: chartData
};
// EVENTS
// -----------------------------
zingchart.label_click = (p) => {
zingchart.exec(p.id, 'reload');
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
cacheControl: ''
});
