<!DOCTYPE html>
<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>
<div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
function fetchData() {
fetch('https://cdn.zingchart.com/datasets/historical-prices-wsj-values.json')
.then((res) => res.json())
.then((jsonData) => {
zingchart.exec('myChart', 'setseriesvalues', {
values: [jsonData.values],
});
});
}
zingchart.bind('myChart', 'label_click', (e) => {
zingchart.exec(e.id, 'reload');
fetchData();
});
let chartConfig = {
type: 'stock',
title: {
text: 'S&P 500',
fontFamily: 'Garamond',
},
subtitle: {
text: 'Source: http://quotes.wsj.com/index/SPX/historical-prices',
fontWeight: 'normal',
},
plot: {
tooltip: {
visible: false,
},
aspect: 'whisker',
preview: {
backgroundColor: '#0066ff',
lineColor: '#0066ff',
},
trendDown: {
lineColor: '#ff3300',
},
trendUp: {
lineColor: '#0066ff',
},
},
plotarea: {
marginBottom: '25%',
marginTop: '15%',
},
scaleX: {
item: {
fontSize: '10px',
},
maxItems: 10,
minValue: 1438592400000, // 08/03/15
step: 'day',
transform: {
type: 'date',
all: '%D,<br>%M %d',
},
zooming: true,
},
scaleY: {
values: '1800: 3100: 100',
format: '$%v',
guide: {
lineStyle: 'solid',
},
item: {
fontSize: '10px',
},
},
preview: {},
labels: [{
id: 'reload_btn',
text: 'Reload',
padding: '5px',
backgroundColor: '#777',
borderColor: '#777',
borderRadius: '5px',
borderWidth: '1px',
cursor: 'hand',
fontColor: 'white',
x: '60px',
y: '10px',
}, ],
series: [],
crosshairX: {
plotLabel: {
text: 'Open: $%v0<br>High: $%v1<br>Low: $%v2<br>Close: $%v3',
decimals: 2,
},
scaleLabel: {
text: '%v',
transform: {
type: 'date',
all: '%D,<br>%M %d, %Y',
},
},
},
crosshairY: {
type: 'multiple', // 'single' (default) or 'multiple'
scaleLabel: {
visible: false,
},
},
noData: {
text: 'Loading data from servers...',
fontColor: 'black',
},
};
// render chart before window load
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
window.addEventListener('load', function() {
fetchData();
});
</script>
</body>
</html>
function fetchData() {
fetch('https://cdn.zingchart.com/datasets/historical-prices-wsj-values.json')
.then((res) => res.json())
.then((jsonData) => {
zingchart.exec('myChart', 'setseriesvalues', {
values: [jsonData.values],
});
});
}
zingchart.bind('myChart', 'label_click', (e) => {
zingchart.exec(e.id, 'reload');
fetchData();
});
let chartConfig = {
type: 'stock',
title: {
text: 'S&P 500',
fontFamily: 'Garamond',
},
subtitle: {
text: 'Source: http://quotes.wsj.com/index/SPX/historical-prices',
fontWeight: 'normal',
},
plot: {
tooltip: {
visible: false,
},
aspect: 'whisker',
preview: {
backgroundColor: '#0066ff',
lineColor: '#0066ff',
},
trendDown: {
lineColor: '#ff3300',
},
trendUp: {
lineColor: '#0066ff',
},
},
plotarea: {
marginBottom: '25%',
marginTop: '15%',
},
scaleX: {
item: {
fontSize: '10px',
},
maxItems: 10,
minValue: 1438592400000, // 08/03/15
step: 'day',
transform: {
type: 'date',
all: '%D,<br>%M %d',
},
zooming: true,
},
scaleY: {
values: '1800: 3100: 100',
format: '$%v',
guide: {
lineStyle: 'solid',
},
item: {
fontSize: '10px',
},
},
preview: {},
labels: [
{
id: 'reload_btn',
text: 'Reload',
padding: '5px',
backgroundColor: '#777',
borderColor: '#777',
borderRadius: '5px',
borderWidth: '1px',
cursor: 'hand',
fontColor: 'white',
x: '60px',
y: '10px',
},
],
series: [],
crosshairX: {
plotLabel: {
text: 'Open: $%v0<br>High: $%v1<br>Low: $%v2<br>Close: $%v3',
decimals: 2,
},
scaleLabel: {
text: '%v',
transform: {
type: 'date',
all: '%D,<br>%M %d, %Y',
},
},
},
crosshairY: {
type: 'multiple', // 'single' (default) or 'multiple'
scaleLabel: {
visible: false,
},
},
noData: {
text: 'Loading data from servers...',
fontColor: 'black',
},
};
// render chart before window load
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
window.addEventListener('load', function () {
fetchData();
});
