• 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.     }
    17.  
    18.     #dashboard {
    19.       display: flex;
    20.       flex-direction: row;
    21.       flex-wrap: wrap;
    22.     }
    23.  
    24.     .dashboard-item {
    25.       display: flex;
    26.       flex-grow: 1;
    27.       height: 100%;
    28.       min-height: 250px;
    29.       min-width: 250px;
    30.     }
    31.   </style>
    32. </head>
    33.  
    34. <body>
    35.   <div id="dashboard">
    36.     <div id="myChart1" class="dashboard-item"></div>
    37.     <div id="myChart2" class="dashboard-item"></div>
    38.     <div id="myChart3" class="dashboard-item"></div>
    39.   </div>
    40.  
    41.   <script>
    42.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    43.  
    44.     function generateConfig(chartType, bgColor) {
    45.       return {
    46.         type: chartType,
    47.         series: [{
    48.           values: [35, 42, 67, 89, 25, 34, 67, 85],
    49.           backgroundColor: bgColor
    50.         }]
    51.       }
    52.     }
    53.  
    54.     zingchart.render({
    55.       id: 'myChart1',
    56.       data: generateConfig('bar', '#4CAF50'),
    57.       height: '100%',
    58.       width: '100%'
    59.     });
    60.  
    61.     zingchart.render({
    62.       id: 'myChart2',
    63.       data: generateConfig('bar3d', '#3F51B5'),
    64.       height: '100%',
    65.       width: '100%'
    66.     });
    67.  
    68.     zingchart.render({
    69.       id: 'myChart3',
    70.       data: generateConfig('hbar', '#FF9800'),
    71.       height: '100%',
    72.       width: '100%'
    73.     });
    74.   </script>
    75. </body>
    76.  
    77. </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.   <div id="dashboard">
    13.     <div id="myChart1" class="dashboard-item"></div>
    14.     <div id="myChart2" class="dashboard-item"></div>
    15.     <div id="myChart3" class="dashboard-item"></div>
    16.   </div>
    17.  
    18. </body>
    19.  
    20. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #dashboard {
    10.   display: flex;
    11.   flex-direction: row;
    12.   flex-wrap: wrap;
    13. }
    14.  
    15. .dashboard-item {
    16.   display: flex;
    17.   flex-grow: 1;
    18.   height: 100%;
    19.   min-height: 250px;
    20.   min-width: 250px;
    21. }
    1. function generateConfig(chartType, bgColor) {
    2.   return {
    3.     type: chartType,
    4.     series: [{
    5.       values: [35, 42, 67, 89, 25, 34, 67, 85],
    6.       backgroundColor: bgColor
    7.     }]
    8.   }
    9. }
    10.  
    11. zingchart.render({
    12.   id: 'myChart1',
    13.   data: generateConfig('bar', '#4CAF50'),
    14.   height: '100%',
    15.   width: '100%'
    16. });
    17.  
    18. zingchart.render({
    19.   id: 'myChart2',
    20.   data: generateConfig('bar3d', '#3F51B5'),
    21.   height: '100%',
    22.   width: '100%'
    23. });
    24.  
    25. zingchart.render({
    26.   id: 'myChart3',
    27.   data: generateConfig('hbar', '#FF9800'),
    28.   height: '100%',
    29.   width: '100%'
    30. });