<!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>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 550px;
width: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<!-- CHART CONTAINER -->
<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"];
let gSeriesData = {
text: '7 Year Data',
values: []
};
// toggle the type of chart
// 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: 'line',
globals: {
fontFamily: 'Lucida Sans Unicode'
},
plotarea: {
margin: '50px 40px 40px 80px'
},
scaleX: {
item: {
fontSize: '10px'
},
transform: {
type: 'date',
item: {
visible: true
}
},
zooming: true
},
scaleY: {
autoFit: true,
guide: {
lineStyle: 'solid'
},
item: {
fontSize: '10px'
},
label: {
text: 'VOLUMES'
},
minValue: 'auto',
short: true
},
crosshairX: {
plotLabel: {
short: true,
decimals: 1
}
},
preview: {
adjustLayout: true,
borderWidth: '1px',
handle: {
height: '20px',
lineWidth: '0px'
}
},
noData: {
text: 'No data found',
backgroundColor: '#efefef'
},
// define zoom module options
options: {
// define custom buttons
buttons: [{
text: '2006',
type: 'year',
// Difference from farthest year 2013 - 2006
count: 2013 - 2010
},
{
text: '2011',
type: 'year',
count: 2013 - 2011
},
{
text: '2012',
type: 'year',
count: 2013 - 2012
},
{
text: 'All',
type: 'all',
},
]
},
// if fetching data remotely define an empty series
series: [{}]
};
// ONLY ONCE we have loaded the zoom-button module
zingchart.loadModules('zoom-buttons', () => {
// render the chart right away
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
modules: 'zoom-buttons',
});
// fetch the data remotely
fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data.json')
.then(res => res.json())
.then(timeseriesData => {
// assign data
gSeriesData.values = timeseriesData.values;
zingchart.exec('myChart', 'setseriesdata', {
data: [gSeriesData]
})
})
.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>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 550px;
width: 100%;
}
.zc-ref {
display: none;
}
let gSeriesData = {
text: '7 Year Data',
values: []
};
// toggle the type of chart
// 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: 'line',
globals: {
fontFamily: 'Lucida Sans Unicode'
},
plotarea: {
margin: '50px 40px 40px 80px'
},
scaleX: {
item: {
fontSize: '10px'
},
transform: {
type: 'date',
item: {
visible: true
}
},
zooming: true
},
scaleY: {
autoFit: true,
guide: {
lineStyle: 'solid'
},
item: {
fontSize: '10px'
},
label: {
text: 'VOLUMES'
},
minValue: 'auto',
short: true
},
crosshairX: {
plotLabel: {
short: true,
decimals: 1
}
},
preview: {
adjustLayout: true,
borderWidth: '1px',
handle: {
height: '20px',
lineWidth: '0px'
}
},
noData: {
text: 'No data found',
backgroundColor: '#efefef'
},
// define zoom module options
options: {
// define custom buttons
buttons: [{
text: '2006',
type: 'year',
// Difference from farthest year 2013 - 2006
count: 2013 - 2010
},
{
text: '2011',
type: 'year',
count: 2013 - 2011
},
{
text: '2012',
type: 'year',
count: 2013 - 2012
},
{
text: 'All',
type: 'all',
},
]
},
// if fetching data remotely define an empty series
series: [{}]
};
// ONLY ONCE we have loaded the zoom-button module
zingchart.loadModules('zoom-buttons', () => {
// render the chart right away
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
modules: 'zoom-buttons',
});
// fetch the data remotely
fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data.json')
.then(res => res.json())
.then(timeseriesData => {
// assign data
gSeriesData.values = timeseriesData.values;
zingchart.exec('myChart', 'setseriesdata', {
data: [gSeriesData]
})
})
.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
});
});
});
});