• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-html,
    10.     .zc-body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       height: 100%;
    19.       width: 100%;
    20.       min-height: 530px;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body class="zc-body">
    30.   <!-- CHART CONTAINER -->
    31.   <div id="myChart" class="chart--container">
    32.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    36.     // because this Javascript is injected into the document head
    37.     window.addEventListener('load', () => {
    38.       // Javascript code to execute after DOM content
    39.  
    40.       // full ZingChart schema can be found here:
    41.       // https://www.zingchart.com/docs/api/json-configuration/
    42.       let chartConfig = {
    43.         type: 'pie',
    44.         gui: {
    45.           contextMenu: {
    46.             button: {
    47.               visible: false
    48.             }
    49.           },
    50.         },
    51.         globals: {
    52.           fontSize: '14px'
    53.         },
    54.         title: {
    55.           text: 'Disabling the Context Menu',
    56.           fontSize: '24px'
    57.         },
    58.         subtitle: {
    59.           text: 'If you right-click to access the context menu, it will not show.',
    60.           fontWeight: 'normal'
    61.         },
    62.         legend: {
    63.           draggable: true
    64.         },
    65.         // plot represents general series, or plots, styling
    66.         plot: {
    67.           // animation docs here:
    68.           // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    69.           animation: {
    70.             effect: 'ANIMATION_EXPAND_BOTTOM',
    71.             method: 'ANIMATION_STRONG_EASE_OUT',
    72.             sequence: 'ANIMATION_BY_PLOT',
    73.             speed: 275
    74.           }
    75.         },
    76.         series: [{
    77.             values: [11.38],
    78.             text: "Internet Explorer",
    79.             backgroundColor: '#50ADF5',
    80.           },
    81.           {
    82.             values: [56.94],
    83.             text: "Chrome",
    84.             backgroundColor: '#FF7965'
    85.           },
    86.           {
    87.             values: [14.52],
    88.             text: 'Firefox',
    89.             backgroundColor: '#FFCB45'
    90.           },
    91.           {
    92.             text: 'Safari',
    93.             values: [9.69],
    94.             backgroundColor: '#6877e5'
    95.           },
    96.           {
    97.             text: 'Other',
    98.             values: [7.48],
    99.             backgroundColor: '#6FB07F'
    100.           }
    101.         ]
    102.       };
    103.  
    104.       zingchart.bind('myChart', 'contextmenu', function(p) {
    105.         return false;
    106.       });
    107.  
    108.       // render chart
    109.       zingchart.render({
    110.         id: 'myChart',
    111.         data: chartConfig,
    112.         height: '100%',
    113.         width: '100%',
    114.       });
    115.     });
    116.   </script>
    117. </body>
    118.  
    119. </html>
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body class="zc-body">
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. .zc-html,
    2. .zc-body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 530px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.  
    6.   // full ZingChart schema can be found here:
    7.   // https://www.zingchart.com/docs/api/json-configuration/
    8.   let chartConfig = {
    9.     type: 'pie',
    10.     gui: {
    11.       contextMenu: {
    12.         button: {
    13.           visible: false
    14.         }
    15.       },
    16.     },
    17.     globals: {
    18.       fontSize: '14px'
    19.     },
    20.     title: {
    21.       text: 'Disabling the Context Menu',
    22.       fontSize: '24px'
    23.     },
    24.     subtitle: {
    25.       text: 'If you right-click to access the context menu, it will not show.',
    26.       fontWeight: 'normal'
    27.     },
    28.     legend: {
    29.       draggable: true
    30.     },
    31.     // plot represents general series, or plots, styling
    32.     plot: {
    33.       // animation docs here:
    34.       // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    35.       animation: {
    36.         effect: 'ANIMATION_EXPAND_BOTTOM',
    37.         method: 'ANIMATION_STRONG_EASE_OUT',
    38.         sequence: 'ANIMATION_BY_PLOT',
    39.         speed: 275
    40.       }
    41.     },
    42.     series: [{
    43.         values: [11.38],
    44.         text: "Internet Explorer",
    45.         backgroundColor: '#50ADF5',
    46.       },
    47.       {
    48.         values: [56.94],
    49.         text: "Chrome",
    50.         backgroundColor: '#FF7965'
    51.       },
    52.       {
    53.         values: [14.52],
    54.         text: 'Firefox',
    55.         backgroundColor: '#FFCB45'
    56.       },
    57.       {
    58.         text: 'Safari',
    59.         values: [9.69],
    60.         backgroundColor: '#6877e5'
    61.       },
    62.       {
    63.         text: 'Other',
    64.         values: [7.48],
    65.         backgroundColor: '#6FB07F'
    66.       }
    67.     ]
    68.   };
    69.  
    70.   zingchart.bind('myChart', 'contextmenu', function(p) {
    71.     return false;
    72.   });
    73.  
    74.   // render chart
    75.   zingchart.render({
    76.     id: 'myChart',
    77.     data: chartConfig,
    78.     height: '100%',
    79.     width: '100%',
    80.   });
    81. });