<!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> .zc-html, .zc-body { margin: 0; padding: 0; width: 100%; height: 100%; } .chart--container { height: 100%; width: 100%; min-height: 530px; } .zc-ref { display: none; } </style> </head> <body class="zc-body"> <!-- CHART CONTAINER --> <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"]; // 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: { fontSize: '14px' }, legend: { cursor: 'hand', draggable: true }, labels: [{ text: 'Static label displaying dynamic plot information<br> plot0: %plot-0-value - %plot-0-data-custom-token <br> plot1: %plot-1-value', defaultValue: 'No Value ...' }], // plot represents general series, or plots, styling plot: { // hoverstate tooltip: { // % symbol represents a token to insert a value. Full list here: // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/ text: '%plot-text %kl was %v (°F)', padding: '10 15', borderRadius: '3px', // htmlMode renders text attribute as html so // ° is rendered htmlMode: true }, // animation docs here: // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect animation: { effect: 'ANIMATION_SLIDE_TOP', method: 'ANIMATION_BOUNCE_EASE_OUT', sequence: 'ANIMATION_NO_SEQUENCE', speed: 975 }, lineWidth: '3px', // line node styling marker: { borderWidth: '0px', size: '6px' } }, scaleX: { // set scale label label: { text: 'Days' }, // convert text on scale indices labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, scaleY: { // scale label with unicode character label: { text: 'Temperature (°F)' } }, crosshairX: { plotLabel: { padding: '10px 15px', borderRadius: '3px' } }, series: [{ text: 'Week 1', // plot values values: [23, 20, 27, 29, 25, 17, 15], lineColor: '#9c27b0', marker: { backgroundColor: '#ba68c8' }, dataCustomToken: ['F', 'R', 'I', 'D', 'A', 'Y'], }, { text: 'Week 2', // plot values values: [35, 42, null, 49, 35, 47, 35], lineColor: '#00bcd4', marker: { backgroundColor: '#4dd0e1' } } ] }; // render chart with width and height to // fill the parent container CSS dimensions zingchart.render({ id: 'myChart', data: chartConfig, height: '100%', width: '100%' }); }); </script> </body> </html>
<!DOCTYPE html> <html class="zc-html"> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body class="zc-body"> <!-- CHART CONTAINER --> <div id="myChart" class="chart--container"> <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a> </div> </body> </html>
.zc-html, .zc-body { margin: 0; padding: 0; width: 100%; height: 100%; } .chart--container { height: 100%; width: 100%; min-height: 530px; } .zc-ref { display: none; }
// 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: { fontSize: '14px' }, legend: { cursor: 'hand', draggable: true }, labels: [{ text: 'Static label displaying dynamic plot information<br> plot0: %plot-0-value - %plot-0-data-custom-token <br> plot1: %plot-1-value', defaultValue: 'No Value ...' }], // plot represents general series, or plots, styling plot: { // hoverstate tooltip: { // % symbol represents a token to insert a value. Full list here: // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/ text: '%plot-text %kl was %v (°F)', padding: '10 15', borderRadius: '3px', // htmlMode renders text attribute as html so // ° is rendered htmlMode: true }, // animation docs here: // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect animation: { effect: 'ANIMATION_SLIDE_TOP', method: 'ANIMATION_BOUNCE_EASE_OUT', sequence: 'ANIMATION_NO_SEQUENCE', speed: 975 }, lineWidth: '3px', // line node styling marker: { borderWidth: '0px', size: '6px' } }, scaleX: { // set scale label label: { text: 'Days' }, // convert text on scale indices labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, scaleY: { // scale label with unicode character label: { text: 'Temperature (°F)' } }, crosshairX: { plotLabel: { padding: '10px 15px', borderRadius: '3px' } }, series: [{ text: 'Week 1', // plot values values: [23, 20, 27, 29, 25, 17, 15], lineColor: '#9c27b0', marker: { backgroundColor: '#ba68c8' }, dataCustomToken: ['F', 'R', 'I', 'D', 'A', 'Y'], }, { text: 'Week 2', // plot values values: [35, 42, null, 49, 35, 47, 35], lineColor: '#00bcd4', marker: { backgroundColor: '#4dd0e1' } } ] }; // render chart with width and height to // fill the parent container CSS dimensions zingchart.render({ id: 'myChart', data: chartConfig, height: '100%', width: '100%' }); });