• Edit
  • Download
    1. <!DOCTYPE html>
    2. <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.     html,
    10.     body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       margin: auto;
    19.       min-height: 150px;
    20.       _width: 640px;
    21.       _height: 160px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart" class="chart--container">
    32.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    36.     let chartConfig = {
    37.       globals: {
    38.         fontFamily: 'Lucida Sans Unicode'
    39.       },
    40.       layout: '1x2',
    41.       graphset: [{
    42.           type: 'scorecard',
    43.           border: '1px solid #ccc',
    44.           options: {
    45.             value: {
    46.               text: '1,450',
    47.             },
    48.             icon: {
    49.               backgroundColor: '#8eba31 #8dcd41',
    50.               backgroundImage: 'https://storage.googleapis.com/zingchart-com.appspot.com/gallery/up-arrow.png',
    51.               backgroundScale: 0.2
    52.             },
    53.             title: {
    54.               text: 'Up',
    55.               size: '20px',
    56.             },
    57.             bars: [{}]
    58.           },
    59.           plotarea: {
    60.             margin: '10px'
    61.           }
    62.         },
    63.         {
    64.           type: 'scorecard',
    65.           borderTop: '1px solid #ccc',
    66.           borderRight: '1px solid #ccc',
    67.           borderBottom: '1px solid #ccc',
    68.           options: {
    69.             value: {
    70.               text: '5,042',
    71.             },
    72.             icon: {
    73.               backgroundColor: '#eb4034',
    74.               backgroundImage: 'https://storage.googleapis.com/zingchart-com.appspot.com/gallery/down-arrow.png',
    75.               backgroundScale: 0.2,
    76.               borderColor: '#6fb023'
    77.             },
    78.             bars: [{}],
    79.             title: {
    80.               text: 'Down',
    81.             }
    82.           },
    83.           plotarea: {
    84.             margin: '10px'
    85.           }
    86.         }
    87.       ]
    88.     };
    89.  
    90.     zingchart.render({
    91.       id: 'myChart',
    92.       data: chartConfig,
    93.       height: '80px',
    94.       width: '320px',
    95.       modules: 'scorecard'
    96.     });
    97.   </script>
    98. </body>
    99.  
    100. </html>
    1. <!DOCTYPE html>
    2. <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>
    11.   <div id="myChart" class="chart--container">
    12.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    13.   </div>
    14. </body>
    15.  
    16. </html>
    1. html,
    2. body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   margin: auto;
    11.   min-height: 150px;
    12.   _width: 640px;
    13.   _height: 160px;
    14. }
    15.  
    16. .zc-ref {
    17.   display: none;
    18. }
    1. let chartConfig = {
    2.   globals: {
    3.     fontFamily: 'Lucida Sans Unicode'
    4.   },
    5.   layout: '1x2',
    6.   graphset: [{
    7.       type: 'scorecard',
    8.       border: '1px solid #ccc',
    9.       options: {
    10.         value: {
    11.           text: '1,450',
    12.         },
    13.         icon: {
    14.           backgroundColor: '#8eba31 #8dcd41',
    15.           backgroundImage: 'https://storage.googleapis.com/zingchart-com.appspot.com/gallery/up-arrow.png',
    16.           backgroundScale: 0.2
    17.         },
    18.         title: {
    19.           text: 'Up',
    20.           size: '20px',
    21.         },
    22.         bars: [{}]
    23.       },
    24.       plotarea: {
    25.         margin: '10px'
    26.       }
    27.     },
    28.     {
    29.       type: 'scorecard',
    30.       borderTop: '1px solid #ccc',
    31.       borderRight: '1px solid #ccc',
    32.       borderBottom: '1px solid #ccc',
    33.       options: {
    34.         value: {
    35.           text: '5,042',
    36.         },
    37.         icon: {
    38.           backgroundColor: '#eb4034',
    39.           backgroundImage: 'https://storage.googleapis.com/zingchart-com.appspot.com/gallery/down-arrow.png',
    40.           backgroundScale: 0.2,
    41.           borderColor: '#6fb023'
    42.         },
    43.         bars: [{}],
    44.         title: {
    45.           text: 'Down',
    46.         }
    47.       },
    48.       plotarea: {
    49.         margin: '10px'
    50.       }
    51.     }
    52.   ]
    53. };
    54.  
    55. zingchart.render({
    56.   id: 'myChart',
    57.   data: chartConfig,
    58.   height: '80px',
    59.   width: '320px',
    60.   modules: 'scorecard'
    61. });