<!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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.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>
.chart--container { min-height: 530px; width: 100%; height: 100%; } .zc-ref { display: none; }
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; } };