<!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"]; // HELPER METHODS
// -----------------------------
function fetchData() {
fetch('https://cdn.zingchart.com/datasets/market-activity-composite.json')
.then((res) => res.json())
.then((jsonData) => {
zingchart.exec('myChart', 'setseriesvalues', {
graphid: 0,
values: [jsonData.chartData],
});
zingchart.exec('myChart', 'setseriesvalues', {
graphid: 1,
values: [jsonData.chartData2],
});
zingchart.exec('myChart', 'modify', {
graphid: 1,
data: {
scaleX: {
values: jsonData.chartScaleX,
},
},
});
});
}
// EVENTS
// -----------------------------
zingchart.bind('myChart', 'label_click', (e) => {
zingchart.exec(e.id, 'reload');
fetchData();
});
window.addEventListener('load', function() {
fetchData();
});
// CHART CONFIG
// -----------------------------
let chartConfig = {
gui: {
behaviors: [{
id: 'ZoomIn',
enabled: 'all',
},
{
id: 'ZoomOut',
enabled: 'all',
},
{
id: 'ShowAll',
enabled: 'all',
},
],
},
theme: 'classic',
graphset: [{
type: 'mixed',
backgroundColor: '#394142 #1a2021',
borderColor: '#3b5d62',
guide: {
plotLabel: {
text: 'Open: %v0 +High: %v1 +Low: %v2 Close: %v3',
padding: '8px',
alpha: 0.725,
BackgroundColor2: '#aaa',
borderRadius: '8px',
visible: true,
},
scaleLabel: {
visible: false,
},
shared: true,
},
width: '100%',
height: '75%',
x: '0px',
y: '0px',
title: {
text: 'Market Activity Composite',
marginTop: '10px',
marginRight: '0px',
marginBottom: '10px',
marginLeft: '0px',
backgroundColor: 'none',
fontSize: '22px',
height: '20px',
position: '0% 0%',
},
plot: {
tooltip: {
visible: false,
},
exact: false,
maxTrackers: 0,
mode: 'fast',
rules: [{
lineColor: 'red',
rule: '%v3 < %v0',
},
{
lineColor: 'green',
rule: '%v3 > %v0',
},
],
},
plotarea: {
marginTop: '55px',
marginRight: '50px',
marginBottom: '0px',
marginLeft: '70px',
},
scaleX: {
item: {
fontColor: '#000',
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
zooming: true,
},
scaleY: {
values: '20:100:10',
alpha: 0.5,
format: '$%v',
item: {
padding: '3px',
color: '#ffffff',
fontSize: '11px',
},
lineColor: '#fff',
lineWidth: '1px',
tick: {
lineColor: '#fff',
lineWidth: '1px',
},
zooming: true,
},
labels: [{
id: 'reload_btn',
text: 'Reload',
padding: '5px',
backgroundColor: '#fff',
borderColor: '#777',
borderRadius: '5px',
borderWidth: '1px',
cursor: 'hand',
fontColor: '#777',
x: '60px',
y: '10px',
}, ],
zoom: {
alpha: 0.6,
backgroundColor: '#ff0000',
shared: true,
},
noData: {
text: 'Loading data from servers...',
fontColor: 'white',
},
series: [{
type: 'stock',
text: 'demo',
values: [],
aspect: 'whisker',
decimals: 2,
}, ],
},
{
type: 'bar',
backgroundColor: '#1a2021',
guide: {
scaleLabel: {
visible: true,
},
shared: true,
visible: true,
},
width: '100%',
height: '25%',
x: '0px',
y: '75%',
plot: {
tooltip: {
visible: false,
},
guideLabel: {
text: 'Volume:%v',
},
maxTrackers: 0,
mode: 'fast',
},
plotarea: {
marginTop: '18px',
marginRight: '50px',
marginBottom: '30px',
marginLeft: '70px',
},
scaleX: {
values: [],
alpha: 0.5,
item: {
color: '#fff',
fontSize: '11px',
},
lineColor: '#777',
lineWidth: '1px',
maxItems: 7,
shared: true,
tick: {
lineColor: '#fff',
lineWidth: '1px',
},
zooming: true,
},
scaleY: {
alpha: 0.5,
item: {
padding: '3px',
color: '#ffffff',
fontSize: '11px',
},
lineColor: '#fff',
lineWidth: '1px',
minValue: '0px',
multiplier: true,
tick: {
lineColor: '#fff',
lineWidth: '1px',
},
},
zoom: {
alpha: 0.6,
backgroundColor: '#ff0000',
shared: true,
},
noData: {
text: 'Loading data from servers...',
fontColor: 'white',
},
series: [{
text: 'Volumes',
values: [],
backgroundColor: '#39a8d8',
lineColor: '#39a8d8',
}, ],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.ASYNC = true;
zingchart.render({
id: 'myChart',
data: chartConfig,
});
</script>
</body>
</html>
// HELPER METHODS
// -----------------------------
function fetchData() {
fetch('https://cdn.zingchart.com/datasets/market-activity-composite.json')
.then((res) => res.json())
.then((jsonData) => {
zingchart.exec('myChart', 'setseriesvalues', {
graphid: 0,
values: [jsonData.chartData],
});
zingchart.exec('myChart', 'setseriesvalues', {
graphid: 1,
values: [jsonData.chartData2],
});
zingchart.exec('myChart', 'modify', {
graphid: 1,
data: {
scaleX: {
values: jsonData.chartScaleX,
},
},
});
});
}
// EVENTS
// -----------------------------
zingchart.bind('myChart', 'label_click', (e) => {
zingchart.exec(e.id, 'reload');
fetchData();
});
window.addEventListener('load', function () {
fetchData();
});
// CHART CONFIG
// -----------------------------
let chartConfig = {
gui: {
behaviors: [
{
id: 'ZoomIn',
enabled: 'all',
},
{
id: 'ZoomOut',
enabled: 'all',
},
{
id: 'ShowAll',
enabled: 'all',
},
],
},
theme: 'classic',
graphset: [
{
type: 'mixed',
backgroundColor: '#394142 #1a2021',
borderColor: '#3b5d62',
guide: {
plotLabel: {
text: 'Open: %v0 +High: %v1 +Low: %v2 Close: %v3',
padding: '8px',
alpha: 0.725,
BackgroundColor2: '#aaa',
borderRadius: '8px',
visible: true,
},
scaleLabel: {
visible: false,
},
shared: true,
},
width: '100%',
height: '75%',
x: '0px',
y: '0px',
title: {
text: 'Market Activity Composite',
marginTop: '10px',
marginRight: '0px',
marginBottom: '10px',
marginLeft: '0px',
backgroundColor: 'none',
fontSize: '22px',
height: '20px',
position: '0% 0%',
},
plot: {
tooltip: {
visible: false,
},
exact: false,
maxTrackers: 0,
mode: 'fast',
rules: [
{
lineColor: 'red',
rule: '%v3 < %v0',
},
{
lineColor: 'green',
rule: '%v3 > %v0',
},
],
},
plotarea: {
marginTop: '55px',
marginRight: '50px',
marginBottom: '0px',
marginLeft: '70px',
},
scaleX: {
item: {
fontColor: '#000',
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
zooming: true,
},
scaleY: {
values: '20:100:10',
alpha: 0.5,
format: '$%v',
item: {
padding: '3px',
color: '#ffffff',
fontSize: '11px',
},
lineColor: '#fff',
lineWidth: '1px',
tick: {
lineColor: '#fff',
lineWidth: '1px',
},
zooming: true,
},
labels: [
{
id: 'reload_btn',
text: 'Reload',
padding: '5px',
backgroundColor: '#fff',
borderColor: '#777',
borderRadius: '5px',
borderWidth: '1px',
cursor: 'hand',
fontColor: '#777',
x: '60px',
y: '10px',
},
],
zoom: {
alpha: 0.6,
backgroundColor: '#ff0000',
shared: true,
},
noData: {
text: 'Loading data from servers...',
fontColor: 'white',
},
series: [
{
type: 'stock',
text: 'demo',
values: [],
aspect: 'whisker',
decimals: 2,
},
],
},
{
type: 'bar',
backgroundColor: '#1a2021',
guide: {
scaleLabel: {
visible: true,
},
shared: true,
visible: true,
},
width: '100%',
height: '25%',
x: '0px',
y: '75%',
plot: {
tooltip: {
visible: false,
},
guideLabel: {
text: 'Volume:%v',
},
maxTrackers: 0,
mode: 'fast',
},
plotarea: {
marginTop: '18px',
marginRight: '50px',
marginBottom: '30px',
marginLeft: '70px',
},
scaleX: {
values: [],
alpha: 0.5,
item: {
color: '#fff',
fontSize: '11px',
},
lineColor: '#777',
lineWidth: '1px',
maxItems: 7,
shared: true,
tick: {
lineColor: '#fff',
lineWidth: '1px',
},
zooming: true,
},
scaleY: {
alpha: 0.5,
item: {
padding: '3px',
color: '#ffffff',
fontSize: '11px',
},
lineColor: '#fff',
lineWidth: '1px',
minValue: '0px',
multiplier: true,
tick: {
lineColor: '#fff',
lineWidth: '1px',
},
},
zoom: {
alpha: 0.6,
backgroundColor: '#ff0000',
shared: true,
},
noData: {
text: 'Loading data from servers...',
fontColor: 'white',
},
series: [
{
text: 'Volumes',
values: [],
backgroundColor: '#39a8d8',
lineColor: '#39a8d8',
},
],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.ASYNC = true;
zingchart.render({
id: 'myChart',
data: chartConfig,
});
