<!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"];
fetch('https://cdn.zingchart.com/resources/XHBQLLQK.json')
.then(response => response.json())
.then(data => {
// DEFINE DATA
// -----------------------------
let chartData = {
bas: data.bas,
data: data.data,
haut: data.haut,
ouv: data.ouv,
var: data.var,
values: data.values,
}
let chartScale = {
x1: data.x1,
x2: data.x2
}
// CHART CONFIG
// -----------------------------
let chartConfig = {
showProgress: false,
backgroundColor: 'white',
graphset: [{
type: 'area',
backgroundColor: '#fff',
width: '100%',
height: '82%',
x: '0px',
y: '0px',
plot: {
preview: 'false'
},
plotarea: {
marginTop: '5%',
marginBottom: '15%',
marginLeft: '8%'
},
scaleX: {
values: chartScale.x1,
lineWidth: '1px',
tick: {
lineWidth: '1px'
},
zooming: true
},
scaleY: {
values: '0:80:10',
decimals: 2,
format: '€%v',
guide: {
items: [{
backgroundColor: '#fff'
},
{
backgroundColor: '#eee'
}
],
lineColor: '#777',
lineStyle: 'solid'
},
item: {
padding: '5px'
},
lineWidth: '1px',
tick: {
lineWidth: '1px'
}
},
crosshairX: {
alpha: 0.3,
lineColor: 'rgb(86,110,147)',
lineWidth: '2px',
scaleLabel: {
backgroundColor: 'rgb(86,110,147)'
},
shared: true,
valueLabel: {
text: 'Open : %data-ouv EUR<br />High : %data-haut EUR<br />Low : %data-bas EUR<br />Close : %v EUR<br />Variation : %data-var',
textAlign: 'left'
}
},
tooltip: {
visible: false
},
zoom: {
shared: true
},
preview: {
margin: '0 5% 6% 11%',
alpha: 0,
backgroundColor: 'none',
borderWidth: 0,
handle: {
marginTop: 0,
backgroundColor: 'rgb(86,110,147)',
width: '15px',
height: '15px'
},
shared: true,
width: '100%',
height: '26%',
y: '94%'
},
series: [{
values: chartData.values,
alphaArea: 0.4,
backgroundColor: 'rgb(86,110,147)',
dataBas: chartData.bas,
dataHaut: chartData.haut,
dataOuv: chartData.ouv,
dataVar: chartData.var,
lineColor: 'rgb(86,110,147)',
lineWidth: '2px',
marker: {
visible: false
}
}]
},
{
type: 'bar',
alpha: 1,
backgroundColor: '#fff',
width: '100%',
height: '20%',
x: 0,
y: '77%',
plotarea: {
marginTop: '2%',
marginBottom: '14%',
marginLeft: '11%',
backgroundColor: '#fff'
},
scaleX: {
values: chartScale.x2,
guide: {
visible: false
},
item: {
visible: false
},
lineWidth: '1px',
tick: {
visible: true
},
zooming: true
},
scaleY: {
decimals: 2,
guide: {
items: [{
backgroundColor: '#fff'
},
{
backgroundColor: '#eee'
}
],
lineStyle: 'solid'
},
item: {
padding: '5px'
},
lineWidth: '1px',
maxValue: '100px',
minValue: 0,
step: 25,
tick: {
lineWidth: '1px'
}
},
crosshairX: {
alpha: 0.3,
lineColor: 'rgb(86,110,147)',
lineWidth: '2px',
scaleLabel: {
visible: true
},
shared: true
},
tooltip: {
visible: false
},
zoom: {
shared: true
},
series: [{
text: 'Volume',
values: chartData.data,
backgroundColor: 'rgb(86,110,147)',
barWidth: '50%',
marker: {
visible: false
}
}]
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
});
</script>
</body>
</html>
fetch('https://cdn.zingchart.com/resources/XHBQLLQK.json')
.then(response => response.json())
.then(data => {
// DEFINE DATA
// -----------------------------
let chartData = {
bas: data.bas,
data: data.data,
haut: data.haut,
ouv: data.ouv,
var: data.var,
values: data.values,
}
let chartScale = {
x1: data.x1,
x2: data.x2
}
// CHART CONFIG
// -----------------------------
let chartConfig = {
showProgress: false,
backgroundColor: 'white',
graphset: [
{
type: 'area',
backgroundColor: '#fff',
width: '100%',
height: '82%',
x: '0px',
y: '0px',
plot: {
preview: 'false'
},
plotarea: {
marginTop: '5%',
marginBottom: '15%',
marginLeft: '8%'
},
scaleX: {
values: chartScale.x1,
lineWidth: '1px',
tick: {
lineWidth: '1px'
},
zooming: true
},
scaleY: {
values: '0:80:10',
decimals: 2,
format: '€%v',
guide: {
items: [
{
backgroundColor: '#fff'
},
{
backgroundColor: '#eee'
}
],
lineColor: '#777',
lineStyle: 'solid'
},
item: {
padding: '5px'
},
lineWidth: '1px',
tick: {
lineWidth: '1px'
}
},
crosshairX: {
alpha: 0.3,
lineColor: 'rgb(86,110,147)',
lineWidth: '2px',
scaleLabel: {
backgroundColor: 'rgb(86,110,147)'
},
shared: true,
valueLabel: {
text: 'Open : %data-ouv EUR<br />High : %data-haut EUR<br />Low : %data-bas EUR<br />Close : %v EUR<br />Variation : %data-var',
textAlign: 'left'
}
},
tooltip: {
visible: false
},
zoom: {
shared: true
},
preview: {
margin: '0 5% 6% 11%',
alpha: 0,
backgroundColor: 'none',
borderWidth: 0,
handle: {
marginTop: 0,
backgroundColor: 'rgb(86,110,147)',
width: '15px',
height: '15px'
},
shared: true,
width: '100%',
height: '26%',
y: '94%'
},
series: [
{
values: chartData.values,
alphaArea: 0.4,
backgroundColor: 'rgb(86,110,147)',
dataBas: chartData.bas,
dataHaut: chartData.haut,
dataOuv: chartData.ouv,
dataVar: chartData.var,
lineColor: 'rgb(86,110,147)',
lineWidth: '2px',
marker: {
visible: false
}
}
]
},
{
type: 'bar',
alpha: 1,
backgroundColor: '#fff',
width: '100%',
height: '20%',
x: 0,
y: '77%',
plotarea: {
marginTop: '2%',
marginBottom: '14%',
marginLeft: '11%',
backgroundColor: '#fff'
},
scaleX: {
values: chartScale.x2,
guide: {
visible: false
},
item: {
visible: false
},
lineWidth: '1px',
tick: {
visible: true
},
zooming: true
},
scaleY: {
decimals: 2,
guide: {
items: [
{
backgroundColor: '#fff'
},
{
backgroundColor: '#eee'
}
],
lineStyle: 'solid'
},
item: {
padding: '5px'
},
lineWidth: '1px',
maxValue: '100px',
minValue: 0,
step: 25,
tick: {
lineWidth: '1px'
}
},
crosshairX: {
alpha: 0.3,
lineColor: 'rgb(86,110,147)',
lineWidth: '2px',
scaleLabel: {
visible: true
},
shared: true
},
tooltip: {
visible: false
},
zoom: {
shared: true
},
series: [
{
text: 'Volume',
values: chartData.data,
backgroundColor: 'rgb(86,110,147)',
barWidth: '50%',
marker: {
visible: false
}
}
]
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig
});
});
