• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     html,
    10.     body {
    11.       height: 100%;
    12.       width: 100%;
    13.       margin: 0;
    14.       padding: 0;
    15.     }
    16.  
    17.     .chart--container {
    18.       height: 100%;
    19.       width: 100%;
    20.       min-height: 150px;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body>
    30.   <!-- CHART CONTAINER -->
    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"]; // 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.       const myConfig = {
    43.         type: 'funnel',
    44.         globals: {
    45.           fontFamily: 'Georgia'
    46.         },
    47.         title: {
    48.           text: 'A Simple Funnel Chart'
    49.         },
    50.         scaleY: {
    51.           placement: 'opposite',
    52.           labels: ['Site Visits', 'Trial Downloads', 'Quote Requests', 'Sales'],
    53.           item: {
    54.             fontColor: '#999999',
    55.           }
    56.         },
    57.         plot: {
    58.           valueBox: {
    59.             text: '%v visitors',
    60.             placement: 'left-out', //auto/in, top, bottom, left, right, leftout, or rightout
    61.             fontColor: 'gray',
    62.             fontSize: 12,
    63.             fontWeight: 'normal'
    64.           },
    65.         },
    66.         series: [{
    67.             values: [90],
    68.             text: 'Site Visits',
    69.             backgroundColor: '#ff5252'
    70.           },
    71.           {
    72.             values: [60],
    73.             text: 'Trial Downloads',
    74.             backgroundColor: '#ffab40'
    75.           },
    76.           {
    77.             values: [30],
    78.             text: 'Quote Requests',
    79.             backgroundColor: '#eeff41'
    80.           },
    81.           {
    82.             values: [7],
    83.             text: 'Sales',
    84.             backgroundColor: '#b2ff59'
    85.           }
    86.         ]
    87.       };
    88.  
    89.       // render chart with width and height to
    90.       // fill the parent container CSS dimensions
    91.       zingchart.render({
    92.         id: 'myChart',
    93.         data: myConfig,
    94.         height: '100%',
    95.         width: '100%'
    96.       });
    97.     });
    98.   </script>
    99. </body>
    100.  
    101. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    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.   const myConfig = {
    9.     type: 'funnel',
    10.     globals: {
    11.       fontFamily: 'Georgia'
    12.     },
    13.     title: {
    14.       text: 'A Simple Funnel Chart'
    15.     },
    16.     scaleY: {
    17.       placement: 'opposite',
    18.       labels: ['Site Visits', 'Trial Downloads', 'Quote Requests', 'Sales'],
    19.       item: {
    20.         fontColor: '#999999',
    21.       }
    22.     },
    23.     plot: {
    24.       valueBox: {
    25.         text: '%v visitors',
    26.         placement: 'left-out', //auto/in, top, bottom, left, right, leftout, or rightout
    27.         fontColor: 'gray',
    28.         fontSize: 12,
    29.         fontWeight: 'normal'
    30.       },
    31.     },
    32.     series: [{
    33.         values: [90],
    34.         text: 'Site Visits',
    35.         backgroundColor: '#ff5252'
    36.       },
    37.       {
    38.         values: [60],
    39.         text: 'Trial Downloads',
    40.         backgroundColor: '#ffab40'
    41.       },
    42.       {
    43.         values: [30],
    44.         text: 'Quote Requests',
    45.         backgroundColor: '#eeff41'
    46.       },
    47.       {
    48.         values: [7],
    49.         text: 'Sales',
    50.         backgroundColor: '#b2ff59'
    51.       }
    52.     ]
    53.   };
    54.  
    55.   // render chart with width and height to
    56.   // fill the parent container CSS dimensions
    57.   zingchart.render({
    58.     id: 'myChart',
    59.     data: myConfig,
    60.     height: '100%',
    61.     width: '100%'
    62.   });
    63. });