<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-zoom-buttons.min.js"></script>
<style>
.chart--container {
min-height: 530px;
width: 100%;
height: 100%;
}
input {
font-family: 'Lucida Sans Unicode';
}
.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"]; // window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'area',
globals: {
fontFamily: 'Lucida Sans Unicode'
},
plotarea: {
margin: '50px 40px 40px 80px'
},
scaleX: {
item: {
fontSize: '10px'
},
transform: {
type: 'date'
},
zooming: true
},
scaleY: {
autoFit: true,
guide: {
lineStyle: 'solid'
},
item: {
fontSize: '10px'
},
label: {
text: 'VOLUMES'
},
minValue: 'auto',
short: true
},
preview: {
adjustLayout: true,
borderWidth: '1px',
handle: {
height: '20px',
lineWidth: '0px'
}
},
noData: {
text: 'No data found',
backgroundColor: '#efefef'
},
// if fetching data remotely define an empty series
series: [{}]
};
// render the chart right away
zingchart.render({
id: 'myChart',
data: chartConfig
});
// ONLY ONCE we have loaded the zoom-button module
zingchart.loadModules('zoom-buttons', () => {
// fetch the data remotely
fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data-2019.json')
.then(res => res.json())
.then(timeseriesData => {
// assign data
chartConfig.series[0].values = timeseriesData.values;
// destroy the chart since we have to render the
// chart with a module. if there is no module,
// just use set data like the catch statement
zingchart.exec('myChart', 'destroy');
// render chart with width and height to
// fill the parent container CSS dimensions
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
modules: 'zoom-buttons'
});
})
.catch(e => {
// if error, render blank chart
console.error('--- error fetching data from: https://cdn.zingchart.com/datasets/timeseries-sample-data.json ---');
chartConfig.title = {};
chartConfig.title.text = 'Error Fetching https://cdn.zingchart.com/datasets/timeseries-sample-data.json';
// just exec setdata api method since we don't need to render the zoom modules
// https://www.zingchart.com/docs/api/methods/
zingchart.exec('myChart', 'setdata', {
data: chartConfig
});
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://cdn.zingchart.com/modules/zingchart-zoom-buttons.min.js"></script>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'area',
globals: {
fontFamily: 'Lucida Sans Unicode'
},
plotarea: {
margin: '50px 40px 40px 80px'
},
scaleX: {
item: {
fontSize: '10px'
},
transform: {
type: 'date'
},
zooming: true
},
scaleY: {
autoFit: true,
guide: {
lineStyle: 'solid'
},
item: {
fontSize: '10px'
},
label: {
text: 'VOLUMES'
},
minValue: 'auto',
short: true
},
preview: {
adjustLayout: true,
borderWidth: '1px',
handle: {
height: '20px',
lineWidth: '0px'
}
},
noData: {
text: 'No data found',
backgroundColor: '#efefef'
},
// if fetching data remotely define an empty series
series: [{}]
};
// render the chart right away
zingchart.render({
id: 'myChart',
data: chartConfig
});
// ONLY ONCE we have loaded the zoom-button module
zingchart.loadModules('zoom-buttons', () => {
// fetch the data remotely
fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data-2019.json')
.then(res => res.json())
.then(timeseriesData => {
// assign data
chartConfig.series[0].values = timeseriesData.values;
// destroy the chart since we have to render the
// chart with a module. if there is no module,
// just use set data like the catch statement
zingchart.exec('myChart', 'destroy');
// render chart with width and height to
// fill the parent container CSS dimensions
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
modules: 'zoom-buttons'
});
})
.catch(e => {
// if error, render blank chart
console.error('--- error fetching data from: https://cdn.zingchart.com/datasets/timeseries-sample-data.json ---');
chartConfig.title = {};
chartConfig.title.text = 'Error Fetching https://cdn.zingchart.com/datasets/timeseries-sample-data.json';
// just exec setdata api method since we don't need to render the zoom modules
// https://www.zingchart.com/docs/api/methods/
zingchart.exec('myChart', 'setdata', {
data: chartConfig
});
});
});
});
