• 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.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.   </style>
    24. </head>
    25.  
    26. <body>
    27.   <div id="myChart"></div>
    28.   <script>
    29.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    30.     let chartConfig = {
    31.       type: 'ring',
    32.       title: {
    33.         text: 'Drilldown Pie'
    34.       },
    35.       plot: {
    36.         detach: false,
    37.         cursor: 'hand',
    38.         shadow: 8,
    39.         valueBox: {
    40.           placement: 'out'
    41.         }
    42.       },
    43.       tooltip: {
    44.         text: '%t: %v (%npv%)',
    45.         borderRadius: 5
    46.       },
    47.       series: [{
    48.           values: [69],
    49.           backgroundColor: '#F44336',
    50.           text: 'Visualization<br>Tools',
    51.           'data-id': 'vt'
    52.         },
    53.         {
    54.           values: [69],
    55.           backgroundColor: '#009688',
    56.           text: 'Site<br>Performance',
    57.           'data-id': 'sp'
    58.         },
    59.         {
    60.           values: [69],
    61.           backgroundColor: '#00BCD4',
    62.           text: 'Dev<br>Tools',
    63.           'data-id': 'dt'
    64.         },
    65.         {
    66.           values: [69],
    67.           backgroundColor: '#03A9F4',
    68.           text: 'Security<br>Tools',
    69.           'data-id': 'st'
    70.         },
    71.         {
    72.           values: [69],
    73.           backgroundColor: '#673AB7',
    74.           text: 'Data<br>Management',
    75.           'data-id': 'dm'
    76.         }
    77.       ],
    78.       shapes: [{
    79.         x: 25,
    80.         y: 20,
    81.         size: 10,
    82.         angle: -90,
    83.         type: 'triangle',
    84.         backgroundColor: '#C4C4C4',
    85.         padding: 5,
    86.         cursor: 'hand',
    87.         id: 'backwards',
    88.         hoverState: {
    89.           borderWidth: 1,
    90.           borderColor: '#000'
    91.         }
    92.       }]
    93.     }
    94.  
    95.     zingchart.render({
    96.       id: 'myChart',
    97.       data: chartConfig,
    98.       height: '100%',
    99.       width: '100%'
    100.     });
    101.  
    102.  
    103.  
    104.     /**
    105.      * Create associative array to manage drilldown config
    106.      */
    107.     let drilldownDataStructure = [];
    108.     drilldownDataStructure['vt'] = {
    109.       series: [{
    110.           values: [10],
    111.           backgroundColor: '#EF5350'
    112.         },
    113.         {
    114.           values: [25],
    115.           backgroundColor: '#E53935'
    116.         },
    117.         {
    118.           values: [34],
    119.           backgroundColor: '#C62828'
    120.         }
    121.       ]
    122.     };
    123.     drilldownDataStructure['sp'] = {
    124.       series: [{
    125.           values: [15],
    126.           backgroundColor: '#26A69A'
    127.         },
    128.         {
    129.           values: [5],
    130.           backgroundColor: '#80CBC4'
    131.         },
    132.         {
    133.           values: [35],
    134.           backgroundColor: '#00695C'
    135.         },
    136.         {
    137.           values: [20],
    138.           backgroundColor: '#00897B'
    139.         }
    140.       ]
    141.     };
    142.     drilldownDataStructure['dt'] = {
    143.       series: [{
    144.           values: [20],
    145.           backgroundColor: '#26C6DA'
    146.         },
    147.         {
    148.           values: [8],
    149.           backgroundColor: '#80DEEA'
    150.         },
    151.         {
    152.           values: [35],
    153.           backgroundColor: '#00838F'
    154.         },
    155.         {
    156.           values: [20],
    157.           backgroundColor: '#00ACC1'
    158.         }
    159.       ]
    160.     };
    161.     drilldownDataStructure['st'] = {
    162.       series: [{
    163.           values: [35],
    164.           backgroundColor: '#1565C0'
    165.         },
    166.         {
    167.           values: [15],
    168.           backgroundColor: '#42A5F5'
    169.         },
    170.         {
    171.           values: [25],
    172.           backgroundColor: '#1E88E5'
    173.         },
    174.         {
    175.           values: [10],
    176.           backgroundColor: '#90CAF9'
    177.         }
    178.       ]
    179.     };
    180.     drilldownDataStructure['dm'] = {
    181.       series: [{
    182.           values: [10],
    183.           backgroundColor: '#5E35B1'
    184.         },
    185.         {
    186.           values: [25],
    187.           backgroundColor: '#4527A0'
    188.         },
    189.         {
    190.           values: [35],
    191.           backgroundColor: '#7E57C2'
    192.         }
    193.       ]
    194.     };
    195.  
    196.  
    197.     /*
    198.      * Built in zingchart API event used to capture node click events.
    199.      * Starting from this scope you will handle drilldown functionality.
    200.      */
    201.     zingchart.node_click = function(p) {
    202.       // You could use this data to help construct drilldown graphs check it out...
    203.       if (drilldownDataStructure[p['data-id']]) {
    204.         zingchart.exec('myChart', 'setseriesdata', {
    205.           data: drilldownDataStructure[p['data-id']]['series']
    206.         });
    207.       }
    208.     }
    209.  
    210.     /*
    211.      * Handle history buttons. You can assign
    212.      * shapes id's and based on id you can go 
    213.      * 'forward' or 'backwards'. You could 
    214.      * also handle this with HTML and register
    215.      * click events to those DOM elements.
    216.      */
    217.     zingchart.shape_click = function(p) {
    218.       let shapeId = p.shapeid;
    219.  
    220.       switch (shapeId) {
    221.         case 'forwards':
    222.         case 'backwards':
    223.         case 'default':
    224.           zingchart.exec('myChart', 'destroy');
    225.           zingchart.render({
    226.             id: 'myChart',
    227.             data: chartConfig,
    228.             height: '100%',
    229.             width: '100%'
    230.           });
    231.           break;
    232.       }
    233.     }
    234.   </script>
    235. </body>
    236.  
    237. </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.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    1. let chartConfig = {
    2.   type: 'ring',
    3.   title: {
    4.     text: 'Drilldown Pie'
    5.   },
    6.   plot: {
    7.     detach: false,
    8.     cursor: 'hand',
    9.     shadow: 8,
    10.     valueBox: {
    11.       placement: 'out'
    12.     }
    13.   },
    14.   tooltip: {
    15.     text: '%t: %v (%npv%)',
    16.     borderRadius: 5
    17.   },
    18.   series: [{
    19.       values: [69],
    20.       backgroundColor: '#F44336',
    21.       text: 'Visualization<br>Tools',
    22.       'data-id': 'vt'
    23.     },
    24.     {
    25.       values: [69],
    26.       backgroundColor: '#009688',
    27.       text: 'Site<br>Performance',
    28.       'data-id': 'sp'
    29.     },
    30.     {
    31.       values: [69],
    32.       backgroundColor: '#00BCD4',
    33.       text: 'Dev<br>Tools',
    34.       'data-id': 'dt'
    35.     },
    36.     {
    37.       values: [69],
    38.       backgroundColor: '#03A9F4',
    39.       text: 'Security<br>Tools',
    40.       'data-id': 'st'
    41.     },
    42.     {
    43.       values: [69],
    44.       backgroundColor: '#673AB7',
    45.       text: 'Data<br>Management',
    46.       'data-id': 'dm'
    47.     }
    48.   ],
    49.   shapes: [{
    50.     x: 25,
    51.     y: 20,
    52.     size: 10,
    53.     angle: -90,
    54.     type: 'triangle',
    55.     backgroundColor: '#C4C4C4',
    56.     padding: 5,
    57.     cursor: 'hand',
    58.     id: 'backwards',
    59.     hoverState: {
    60.       borderWidth: 1,
    61.       borderColor: '#000'
    62.     }
    63.   }]
    64. }
    65.  
    66. zingchart.render({
    67.   id: 'myChart',
    68.   data: chartConfig,
    69.   height: '100%',
    70.   width: '100%'
    71. });
    72.  
    73.  
    74.  
    75. /**
    76.  * Create associative array to manage drilldown config
    77.  */
    78. let drilldownDataStructure = [];
    79. drilldownDataStructure['vt'] = {
    80.   series: [{
    81.       values: [10],
    82.       backgroundColor: '#EF5350'
    83.     },
    84.     {
    85.       values: [25],
    86.       backgroundColor: '#E53935'
    87.     },
    88.     {
    89.       values: [34],
    90.       backgroundColor: '#C62828'
    91.     }
    92.   ]
    93. };
    94. drilldownDataStructure['sp'] = {
    95.   series: [{
    96.       values: [15],
    97.       backgroundColor: '#26A69A'
    98.     },
    99.     {
    100.       values: [5],
    101.       backgroundColor: '#80CBC4'
    102.     },
    103.     {
    104.       values: [35],
    105.       backgroundColor: '#00695C'
    106.     },
    107.     {
    108.       values: [20],
    109.       backgroundColor: '#00897B'
    110.     }
    111.   ]
    112. };
    113. drilldownDataStructure['dt'] = {
    114.   series: [{
    115.       values: [20],
    116.       backgroundColor: '#26C6DA'
    117.     },
    118.     {
    119.       values: [8],
    120.       backgroundColor: '#80DEEA'
    121.     },
    122.     {
    123.       values: [35],
    124.       backgroundColor: '#00838F'
    125.     },
    126.     {
    127.       values: [20],
    128.       backgroundColor: '#00ACC1'
    129.     }
    130.   ]
    131. };
    132. drilldownDataStructure['st'] = {
    133.   series: [{
    134.       values: [35],
    135.       backgroundColor: '#1565C0'
    136.     },
    137.     {
    138.       values: [15],
    139.       backgroundColor: '#42A5F5'
    140.     },
    141.     {
    142.       values: [25],
    143.       backgroundColor: '#1E88E5'
    144.     },
    145.     {
    146.       values: [10],
    147.       backgroundColor: '#90CAF9'
    148.     }
    149.   ]
    150. };
    151. drilldownDataStructure['dm'] = {
    152.   series: [{
    153.       values: [10],
    154.       backgroundColor: '#5E35B1'
    155.     },
    156.     {
    157.       values: [25],
    158.       backgroundColor: '#4527A0'
    159.     },
    160.     {
    161.       values: [35],
    162.       backgroundColor: '#7E57C2'
    163.     }
    164.   ]
    165. };
    166.  
    167.  
    168. /*
    169.  * Built in zingchart API event used to capture node click events.
    170.  * Starting from this scope you will handle drilldown functionality.
    171.  */
    172. zingchart.node_click = function(p) {
    173.   // You could use this data to help construct drilldown graphs check it out...
    174.   if (drilldownDataStructure[p['data-id']]) {
    175.     zingchart.exec('myChart', 'setseriesdata', {
    176.       data: drilldownDataStructure[p['data-id']]['series']
    177.     });
    178.   }
    179. }
    180.  
    181. /*
    182.  * Handle history buttons. You can assign
    183.  * shapes id's and based on id you can go 
    184.  * 'forward' or 'backwards'. You could 
    185.  * also handle this with HTML and register
    186.  * click events to those DOM elements.
    187.  */
    188. zingchart.shape_click = function(p) {
    189.   let shapeId = p.shapeid;
    190.  
    191.   switch (shapeId) {
    192.     case 'forwards':
    193.     case 'backwards':
    194.     case 'default':
    195.       zingchart.exec('myChart', 'destroy');
    196.       zingchart.render({
    197.         id: 'myChart',
    198.         data: chartConfig,
    199.         height: '100%',
    200.         width: '100%'
    201.       });
    202.       break;
    203.   }
    204. }