• 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.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfig = {
    24.       "type": "funnel",
    25.       "scale-y": {
    26.         "placement": "opposite",
    27.         "labels": ["Site Visits", "Trial Downloads", "Quote Requests", "Sales", "Renewals"],
    28.         "item": {
    29.           "font-color": "#999999",
    30.           "font-family": "Georgia"
    31.         },
    32.         "guide": {
    33.           "line-color": "none",
    34.           "items": [{
    35.               "background-color": "#fff"
    36.             },
    37.             {
    38.               "background-color": "#e5faff"
    39.             },
    40.             {
    41.               "background-color": "#b3efff"
    42.             },
    43.             {
    44.               "background-color": "#66e0ff"
    45.             },
    46.             {
    47.               "background-color": "#00ccff"
    48.             }
    49.           ]
    50.         }
    51.       },
    52.       "plot": {
    53.         "min-exit": "10%"
    54.       },
    55.       "series": [{
    56.           "values": [101]
    57.         },
    58.         {
    59.           "values": [90]
    60.         },
    61.         {
    62.           "values": [60]
    63.         },
    64.         {
    65.           "values": [30]
    66.         },
    67.         {
    68.           "values": [15]
    69.         }
    70.       ]
    71.     };
    72.  
    73.     zingchart.render({
    74.       id: 'myChart',
    75.       data: myConfig,
    76.       height: "100%",
    77.       width: "100%"
    78.     });
    79.   </script>
    80. </body>
    81.  
    82. </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='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. var myConfig = {
    2.   "type": "funnel",
    3.   "scale-y": {
    4.     "placement": "opposite",
    5.     "labels": ["Site Visits", "Trial Downloads", "Quote Requests", "Sales", "Renewals"],
    6.     "item": {
    7.       "font-color": "#999999",
    8.       "font-family": "Georgia"
    9.     },
    10.     "guide": {
    11.       "line-color": "none",
    12.       "items": [{
    13.           "background-color": "#fff"
    14.         },
    15.         {
    16.           "background-color": "#e5faff"
    17.         },
    18.         {
    19.           "background-color": "#b3efff"
    20.         },
    21.         {
    22.           "background-color": "#66e0ff"
    23.         },
    24.         {
    25.           "background-color": "#00ccff"
    26.         }
    27.       ]
    28.     }
    29.   },
    30.   "plot": {
    31.     "min-exit": "10%"
    32.   },
    33.   "series": [{
    34.       "values": [101]
    35.     },
    36.     {
    37.       "values": [90]
    38.     },
    39.     {
    40.       "values": [60]
    41.     },
    42.     {
    43.       "values": [30]
    44.     },
    45.     {
    46.       "values": [15]
    47.     }
    48.   ]
    49. };
    50.  
    51. zingchart.render({
    52.   id: 'myChart',
    53.   data: myConfig,
    54.   height: "100%",
    55.   width: "100%"
    56. });