<!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 {
min-height: 530px;
width: 100%;
height: 100%;
}
.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"];
let chartConfig = {
type: 'line',
backgroundColor: 'white',
marginBottom: '100px',
title: {
text: 'Data vs. Time'
},
legend: {
adjustLayout: true,
align: 'center',
marginTop: '15%',
backgroundColor: 'none',
borderWidth: '0px',
layout: 'h',
verticalAlign: 'top'
},
plot: {
exact: true,
lineWidth: '2px',
preview: true,
shadow: false
},
plotarea: {
adjustLayout: true,
margin: 'dynamic',
marginTop: '5%',
marginBottom: '20%',
width: '100%'
},
scaleX: {
format: '%v',
item: {
autoAlign: true,
maxChars: 10
},
label: {
text: 'TIME',
marginTop: '100px'
},
tick: {
lineColor: 'black',
lineWidth: '2px',
size: '8px'
},
zooming: true
},
scaleY: {
decimals: 0,
zooming: true
},
crosshairX: {
plotLabel: {
backgroundColor: '#fff',
borderColor: 'gray',
borderRadius: '5px',
borderWidth: '3px',
width: '100px'
}
},
labels: [{
text: 'Zoom',
color: 'gray',
x: '15px',
y: '45px'
},
{
text: 'From: ',
color: 'black',
fontWeight: 'bold',
x: '400px',
y: '45px'
},
{
id: 'from-date',
text: '3/1/12',
color: 'black',
x: '440px',
y: '45px'
},
{
text: 'To: ',
color: 'black',
fontWeight: 'bold',
x: '490px',
y: '45px'
},
{
id: 'to-date',
text: '6/3/14',
color: 'black',
x: '520px',
y: '45px'
}
],
shapes: [{
type: 'rect',
id: '6-mos',
backgroundColor: 'gray',
label: {
text: '6 Months',
color: 'white',
fontWeight: 'bold'
},
width: '80px',
height: '20px',
x: '90px',
y: '54px'
},
{
type: 'rect',
id: '1-year',
backgroundColor: 'gray',
label: {
text: '1 year',
color: 'white',
fontWeight: 'bold'
},
width: '80px',
height: '20px',
x: '175px',
y: '54px'
},
{
type: 'rect',
id: '1-5-years',
backgroundColor: 'gray',
label: {
text: '1.5 years',
color: 'white',
fontWeight: 'bold'
},
width: '80px',
height: '20px',
x: '260px',
y: '54px'
},
{
type: 'rect',
id: 'all',
backgroundColor: 'gray',
label: {
text: 'All',
color: 'white',
fontWeight: 'bold'
},
width: '80px',
height: '20px',
x: '345px',
y: '54px'
}
],
preview: {
adjustLayout: true,
height: '40px',
visible: true
},
csv: {
url: 'https://cdn.zingchart.com/resources/CRP0HM8L_data01.csv',
smartScales: false,
verticalLabels: true
}
};
zingchart.render({
id: 'myChart',
data: chartConfig,
cacheControl: '',
height: '100%',
width: '100%',
});
let zoomToDate = (months) => {
// get the array of dates from scale-x
let scaleXValues = zingchart.exec('myChart', 'getobjectinfo', {
object: 'scale',
name: 'scale-x'
});
// isolate the last date
let values = scaleXValues.values;
// save a reference to it for updating the chart
let lastDateStr = values[values.length - 1];
// convert it to a date for manipulation
let lastDate = new Date(lastDateStr);
// make a new date object and subtract the # of months
let newDate = new Date(lastDate);
newDate.setMonth(newDate.getMonth() - months);
let year = newDate.getFullYear().toString().substr(2);
// var newYear = year.substr(2);
let newDateStr = (newDate.getMonth() + 1) + '/' + (newDate.getDay()) + '/' + year;
zingchart.exec('myChart', 'zoomtovalues', {
xmax: lastDateStr,
xmin: newDateStr
});
}
zingchart.zoom = (p) => {
zingchart.exec('myChart', 'updateobject', {
type: 'label',
data: {
id: 'from-date',
text: p.kmin
}
});
zingchart.exec('myChart', 'updateobject', {
type: 'label',
data: {
id: 'to-date',
text: p.kmax
}
});
}
zingchart.shape_click = (p) => {
switch (p.shapeid) {
case '6-mos':
zoomToDate(6);
break;
case '1-year':
zoomToDate(12);
break;
case '1-5-years':
zoomToDate(18);
break;
case 'all':
zingchart.exec('myChart', 'viewall');
zingchart.exec('myChart', 'updateobject', {
type: 'label',
data: {
id: 'from-date',
text: '3/1/12'
}
});
zingchart.exec('myChart', 'updateobject', {
type: 'label',
data: {
id: 'to-date',
text: '6/3/14'
}
});
break;
}
};
</script>
</body>
</html>
let chartConfig = {
type: 'line',
backgroundColor: 'white',
marginBottom: '100px',
title: {
text: 'Data vs. Time'
},
legend: {
adjustLayout: true,
align: 'center',
marginTop: '15%',
backgroundColor: 'none',
borderWidth: '0px',
layout: 'h',
verticalAlign: 'top'
},
plot: {
exact: true,
lineWidth: '2px',
preview: true,
shadow: false
},
plotarea: {
adjustLayout: true,
margin: 'dynamic',
marginTop: '5%',
marginBottom: '20%',
width: '100%'
},
scaleX: {
format: '%v',
item: {
autoAlign: true,
maxChars: 10
},
label: {
text: 'TIME',
marginTop: '100px'
},
tick: {
lineColor: 'black',
lineWidth: '2px',
size: '8px'
},
zooming: true
},
scaleY: {
decimals: 0,
zooming: true
},
crosshairX: {
plotLabel: {
backgroundColor: '#fff',
borderColor: 'gray',
borderRadius: '5px',
borderWidth: '3px',
width: '100px'
}
},
labels: [
{
text: 'Zoom',
color: 'gray',
x: '15px',
y: '45px'
},
{
text: 'From: ',
color: 'black',
fontWeight: 'bold',
x: '400px',
y: '45px'
},
{
id: 'from-date',
text: '3/1/12',
color: 'black',
x: '440px',
y: '45px'
},
{
text: 'To: ',
color: 'black',
fontWeight: 'bold',
x: '490px',
y: '45px'
},
{
id: 'to-date',
text: '6/3/14',
color: 'black',
x: '520px',
y: '45px'
}
],
shapes: [
{
type: 'rect',
id: '6-mos',
backgroundColor: 'gray',
label: {
text: '6 Months',
color: 'white',
fontWeight: 'bold'
},
width: '80px',
height: '20px',
x: '90px',
y: '54px'
},
{
type: 'rect',
id: '1-year',
backgroundColor: 'gray',
label: {
text: '1 year',
color: 'white',
fontWeight: 'bold'
},
width: '80px',
height: '20px',
x: '175px',
y: '54px'
},
{
type: 'rect',
id: '1-5-years',
backgroundColor: 'gray',
label: {
text: '1.5 years',
color: 'white',
fontWeight: 'bold'
},
width: '80px',
height: '20px',
x: '260px',
y: '54px'
},
{
type: 'rect',
id: 'all',
backgroundColor: 'gray',
label: {
text: 'All',
color: 'white',
fontWeight: 'bold'
},
width: '80px',
height: '20px',
x: '345px',
y: '54px'
}
],
preview: {
adjustLayout: true,
height: '40px',
visible: true
},
csv: {
url: 'https://cdn.zingchart.com/resources/CRP0HM8L_data01.csv',
smartScales: false,
verticalLabels: true
}
};
zingchart.render({
id: 'myChart',
data: chartConfig,
cacheControl: '',
height: '100%',
width: '100%',
});
let zoomToDate = (months) => {
// get the array of dates from scale-x
let scaleXValues = zingchart.exec('myChart', 'getobjectinfo', {
object: 'scale',
name: 'scale-x'
});
// isolate the last date
let values = scaleXValues.values;
// save a reference to it for updating the chart
let lastDateStr = values[values.length - 1];
// convert it to a date for manipulation
let lastDate = new Date(lastDateStr);
// make a new date object and subtract the # of months
let newDate = new Date(lastDate);
newDate.setMonth(newDate.getMonth() - months);
let year = newDate.getFullYear().toString().substr(2);
// var newYear = year.substr(2);
let newDateStr = (newDate.getMonth() + 1) + '/' + (newDate.getDay()) + '/' + year;
zingchart.exec('myChart', 'zoomtovalues', {
xmax: lastDateStr,
xmin: newDateStr
});
}
zingchart.zoom = (p) => {
zingchart.exec('myChart', 'updateobject', {
type: 'label',
data: {
id: 'from-date',
text: p.kmin
}
});
zingchart.exec('myChart', 'updateobject', {
type: 'label',
data: {
id: 'to-date',
text: p.kmax
}
});
}
zingchart.shape_click = (p) => {
switch (p.shapeid) {
case '6-mos':
zoomToDate(6);
break;
case '1-year':
zoomToDate(12);
break;
case '1-5-years':
zoomToDate(18);
break;
case 'all':
zingchart.exec('myChart', 'viewall');
zingchart.exec('myChart', 'updateobject', {
type: 'label',
data: {
id: 'from-date',
text: '3/1/12'
}
});
zingchart.exec('myChart', 'updateobject', {
type: 'label',
data: {
id: 'to-date',
text: '6/3/14'
}
});
break;
}
};
