<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" 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',
},
legend: {
draggable: true,
},
plot: {
lineWidth: '1px',
marker: {
visible: false,
},
tooltipText: '%v',
},
plotarea: {
height: '80%',
margin: '75 175 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',
},
markers: [{
type: 'line',
range: [60000000],
lineColor: 'red',
}, ],
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%',
}, ],
preview: {},
labels: [{
text: 'Zoom by dragging in graph',
padding: '5px',
backgroundColor: '#fff',
borderColor: '#fff',
borderRadius: '5px',
borderWidth: '1px',
fontColor: '#777',
x: '4%',
y: '84%',
},
{
id: 'reload_btn',
text: 'Reload',
padding: '5px',
backgroundColor: '#fff',
borderColor: '#777',
borderRadius: '5px',
borderWidth: '1px',
cursor: 'hand',
fontColor: '#777',
x: '89%',
y: '84%',
},
],
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: '',
height: '650px',
});
</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',
},
legend: {
draggable: true,
},
plot: {
lineWidth: '1px',
marker: {
visible: false,
},
tooltipText: '%v',
},
plotarea: {
height: '80%',
margin: '75 175 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',
},
markers: [
{
type: 'line',
range: [60000000],
lineColor: 'red',
},
],
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%',
},
],
preview: {},
labels: [
{
text: 'Zoom by dragging in graph',
padding: '5px',
backgroundColor: '#fff',
borderColor: '#fff',
borderRadius: '5px',
borderWidth: '1px',
fontColor: '#777',
x: '4%',
y: '84%',
},
{
id: 'reload_btn',
text: 'Reload',
padding: '5px',
backgroundColor: '#fff',
borderColor: '#777',
borderRadius: '5px',
borderWidth: '1px',
cursor: 'hand',
fontColor: '#777',
x: '89%',
y: '84%',
},
],
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: '',
height: '650px',
});
