<!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: 'pie', gui: { contextMenu: { button: { visible: false } }, }, globals: { fontSize: '14px' }, title: { text: 'Disabling the Context Menu', fontSize: '24px' }, subtitle: { text: 'If you right-click to access the context menu, it will not show.', fontWeight: 'normal' }, legend: { draggable: true }, // plot represents general series, or plots, styling plot: { // animation docs here: // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect animation: { effect: 'ANIMATION_EXPAND_BOTTOM', method: 'ANIMATION_STRONG_EASE_OUT', sequence: 'ANIMATION_BY_PLOT', speed: 275 } }, series: [{ values: [11.38], text: "Internet Explorer", backgroundColor: '#50ADF5', }, { values: [56.94], text: "Chrome", backgroundColor: '#FF7965' }, { values: [14.52], text: 'Firefox', backgroundColor: '#FFCB45' }, { text: 'Safari', values: [9.69], backgroundColor: '#6877e5' }, { text: 'Other', values: [7.48], backgroundColor: '#6FB07F' } ] }; zingchart.bind('myChart', 'contextmenu', function(p) { return false; }); // render chart 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: 'pie', gui: { contextMenu: { button: { visible: false } }, }, globals: { fontSize: '14px' }, title: { text: 'Disabling the Context Menu', fontSize: '24px' }, subtitle: { text: 'If you right-click to access the context menu, it will not show.', fontWeight: 'normal' }, legend: { draggable: true }, // plot represents general series, or plots, styling plot: { // animation docs here: // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect animation: { effect: 'ANIMATION_EXPAND_BOTTOM', method: 'ANIMATION_STRONG_EASE_OUT', sequence: 'ANIMATION_BY_PLOT', speed: 275 } }, series: [{ values: [11.38], text: "Internet Explorer", backgroundColor: '#50ADF5', }, { values: [56.94], text: "Chrome", backgroundColor: '#FF7965' }, { values: [14.52], text: 'Firefox', backgroundColor: '#FFCB45' }, { text: 'Safari', values: [9.69], backgroundColor: '#6877e5' }, { text: 'Other', values: [7.48], backgroundColor: '#6FB07F' } ] }; zingchart.bind('myChart', 'contextmenu', function(p) { return false; }); // render chart zingchart.render({ id: 'myChart', data: chartConfig, height: '100%', width: '100%', }); });