• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.       background-color: #fff;
    17.     }
    18.  
    19.     #myChart {
    20.       height: 100%;
    21.       width: 100%;
    22.       min-height: 150px;
    23.     }
    24.  
    25.     .zc-ref {
    26.       display: none;
    27.     }
    28.  
    29.     button {
    30.       padding: 10px;
    31.       margin: 10px;
    32.     }
    33.   </style>
    34. </head>
    35.  
    36. <body>
    37.   <button onClick="toggleChartType();">Toggle Chart Type</button>
    38.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    39.   <script>
    40.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    41.     zingchart.loadModules('toolbar3d');
    42.  
    43.     var currentChartType = 'bar3d';
    44.  
    45.     function toggleChartType() {
    46.       if (currentChartType === 'bar3d') currentChartType = 'area3d';
    47.       else if (currentChartType === 'area3d') currentChartType = 'line3d';
    48.       else currentChartType = 'bar3d';
    49.  
    50.       // use api to preserve zoom and set chart type
    51.       zingchart.exec('myChart', 'setcharttype', {
    52.         type: currentChartType,
    53.         'preserve-state': true
    54.       });
    55.     }
    56.  
    57.     // window:load event for Javascript to run after HTML
    58.     // because this Javascript is injected into the document head
    59.     window.addEventListener('load', () => {
    60.       // Javascript code to execute after DOM content
    61.  
    62.       var myConfig = {
    63.         type: 'bar3d',
    64.         "3d-aspect": {
    65.           "x-angle": 0,
    66.           "y-angle": 0,
    67.           "z-angle": 10,
    68.           'true3d': true // set to false to affect depth
    69.         },
    70.         series: [{
    71.           values: [35, 42, 67, 89, 25, 34, 67, 85]
    72.         }]
    73.       };
    74.  
    75.       zingchart.render({
    76.         id: 'myChart',
    77.         data: myConfig,
    78.         height: '500',
    79.         width: '725',
    80.         modules: 'toolbar3d'
    81.       });
    82.     });
    83.   </script>
    84. </body>
    85.  
    86. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <button onClick="toggleChartType();">Toggle Chart Type</button>
    13.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    14. </body>
    15.  
    16. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7.   background-color: #fff;
    8. }
    9.  
    10. #myChart {
    11.   height: 100%;
    12.   width: 100%;
    13.   min-height: 150px;
    14. }
    15.  
    16. .zc-ref {
    17.   display: none;
    18. }
    19.  
    20. button {
    21.   padding: 10px;
    22.   margin: 10px;
    23. }
    1. zingchart.loadModules('toolbar3d');
    2.  
    3. var currentChartType = 'bar3d';
    4.  
    5. function toggleChartType() {
    6.   if (currentChartType === 'bar3d') currentChartType = 'area3d';
    7.   else if (currentChartType === 'area3d') currentChartType = 'line3d';
    8.   else currentChartType = 'bar3d';
    9.  
    10.   // use api to preserve zoom and set chart type
    11.   zingchart.exec('myChart', 'setcharttype', {
    12.     type: currentChartType,
    13.     'preserve-state': true
    14.   });
    15. }
    16.  
    17. // window:load event for Javascript to run after HTML
    18. // because this Javascript is injected into the document head
    19. window.addEventListener('load', () => {
    20.   // Javascript code to execute after DOM content
    21.  
    22.   var myConfig = {
    23.     type: 'bar3d',
    24.     "3d-aspect": {
    25.       "x-angle": 0,
    26.       "y-angle": 0,
    27.       "z-angle": 10,
    28.       'true3d': true // set to false to affect depth
    29.     },
    30.     series: [{
    31.       values: [35, 42, 67, 89, 25, 34, 67, 85]
    32.     }]
    33.   };
    34.  
    35.   zingchart.render({
    36.     id: 'myChart',
    37.     data: myConfig,
    38.     height: '500',
    39.     width: '725',
    40.     modules: 'toolbar3d'
    41.   });
    42. });