<!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: 150px; width: 100%; height: 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"]; // 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: 'pie', globals: { fontSize: '14px' }, title: { text: "'pieTransform' attribute (fold=20)", fontSize: '24px' }, plot: { 'pie-transform': 'fold=20' }, series: [{ text: 'Day 1', values: [23], backgroundColor: '#ff4081' }, { text: 'Day 2', // plot values values: [20], backgroundColor: '#e040fb' }, { text: 'Day 3', values: [25], backgroundColor: '#448aff' }, { text: 'Day 4', values: [25], backgroundColor: '#ff5252' }, { text: 'Day 5', values: [25], backgroundColor: '#ff6e40' }, { text: 'Day 6', values: [25], backgroundColor: '#69f0ae' }, { text: 'Day 7', values: [25], backgroundColor: '#7c4dff' } ] }; // render chart zingchart.render({ id: 'myChart', data: chartConfig, height: '100%', width: '100%', }); }); </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: 150px; width: 100%; height: 100%; } .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: 'pie', globals: { fontSize: '14px' }, title: { text: "'pieTransform' attribute (fold=20)", fontSize: '24px' }, plot: { 'pie-transform': 'fold=20' }, series: [{ text: 'Day 1', values: [23], backgroundColor: '#ff4081' }, { text: 'Day 2', // plot values values: [20], backgroundColor: '#e040fb' }, { text: 'Day 3', values: [25], backgroundColor: '#448aff' }, { text: 'Day 4', values: [25], backgroundColor: '#ff5252' }, { text: 'Day 5', values: [25], backgroundColor: '#ff6e40' }, { text: 'Day 6', values: [25], backgroundColor: '#69f0ae' }, { text: 'Day 7', values: [25], backgroundColor: '#7c4dff' } ] }; // render chart zingchart.render({ id: 'myChart', data: chartConfig, height: '100%', width: '100%', }); });