• 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></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // must load maps and first map we are going to render
    16.     zingchart.loadModules('maps,maps-world-countries');
    17.  
    18.     // initial config for first chart
    19.     var myConfig = {
    20.       shapes: [{
    21.         type: 'zingchart.maps',
    22.         options: {
    23.           name: 'world.countries',
    24.           style: { //stlye all countries 
    25.             controls: {
    26.               placement: 'bl'
    27.             },
    28.             backgroundColor: '#cccccc',
    29.             label: {
    30.               visible: false
    31.             },
    32.             hoverState: {
    33.               alpha: .32,
    34.             },
    35.             items: { //include specific shape regions with unique styles
    36.               USA: {
    37.                 backgroundColor: '#0D47A1',
    38.                 cursor: 'pointer',
    39.                 label: {
    40.                   visible: true,
    41.                   fontColor: '#ffffff'
    42.                 },
    43.                 tooltip: {
    44.                   text: 'Click on USA to drilldown into states'
    45.                 }
    46.               },
    47.               BRA: {
    48.                 backgroundColor: '#4CAF50',
    49.                 cursor: 'pointer',
    50.                 label: {
    51.                   visible: true,
    52.                   fontColor: '#ffffff'
    53.                 },
    54.                 tooltip: {
    55.                   text: 'Click on Brazil to drilldown into states'
    56.                 }
    57.               },
    58.               IND: {
    59.                 backgroundColor: '#FF6F00',
    60.                 cursor: 'pointer',
    61.                 label: {
    62.                   visible: true,
    63.                   fontColor: '#ffffff'
    64.                 },
    65.                 tooltip: {
    66.                   text: 'Click on India to drilldown into states'
    67.                 }
    68.               }
    69.  
    70.             }
    71.           }
    72.         }
    73.       }]
    74.     };
    75.  
    76.     zingchart.render({
    77.       id: 'myChart',
    78.       data: myConfig,
    79.       height: 400,
    80.       width: '100%'
    81.     });
    82.  
    83.     //drilldown chart configuration
    84.     var drilldownConfig = {
    85.       shapes: [{
    86.           type: 'zingchart.maps',
    87.           options: {
    88.             name: '',
    89.             style: {
    90.               controls: {
    91.                 placement: 'bl'
    92.               }
    93.             }
    94.           }
    95.         },
    96.         {
    97.           x: 100,
    98.           y: 20,
    99.           type: 'rectangle',
    100.           height: 25,
    101.           width: 155,
    102.           backgroundColor: '#C4C4C4',
    103.           padding: 5,
    104.           cursor: 'hand',
    105.           id: 'back_button',
    106.           label: {
    107.             text: 'Back To World Countries'
    108.           },
    109.           hoverState: {
    110.             borderWidth: 1,
    111.             borderColor: '#000'
    112.           }
    113.         }
    114.       ]
    115.     };
    116.  
    117.     // for maps that exist in our library. Pre-load them later on
    118.     zingchart.loadModules('maps-usa, maps-bra, maps-ind');
    119.     zingchart.bind('myChart', 'shape_click', function(e) {
    120.       var newMapId = String(e.shapeid).toLowerCase();
    121.  
    122.       // if shape is our back button and not the map
    123.       if (newMapId == 'back_button') {
    124.         console.log('here')
    125.         // since we are using setdata, reload will reload the original chartJSON
    126.         zingchart.exec('myChart', 'reload');
    127.         return;
    128.       }
    129.  
    130.       if (hasDrilldownData(newMapId)) {
    131.         drilldownConfig.shapes[0].options.name = newMapId;
    132.         zingchart.exec('myChart', 'setdata', {
    133.           data: drilldownConfig
    134.         });
    135.       }
    136.     });
    137.  
    138.     // used in the shape_click event to determine if we should drilldown
    139.     function hasDrilldownData(newMapId) {
    140.       var drillDownCountries = ['usa', 'bra', 'ind'];
    141.       for (var i = 0; i < drillDownCountries.length; i++) {
    142.         if (newMapId === drillDownCountries[i])
    143.           return true;
    144.       }
    145.  
    146.       return false;
    147.     }
    148.   </script>
    149. </body>
    150.  
    151. </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.  
    1. // must load maps and first map we are going to render
    2. zingchart.loadModules('maps,maps-world-countries');
    3.  
    4. // initial config for first chart
    5. var myConfig = {
    6.   shapes: [{
    7.     type: 'zingchart.maps',
    8.     options: {
    9.       name: 'world.countries',
    10.       style: { //stlye all countries 
    11.         controls: {
    12.           placement: 'bl'
    13.         },
    14.         backgroundColor: '#cccccc',
    15.         label: {
    16.           visible: false
    17.         },
    18.         hoverState: {
    19.           alpha: .32,
    20.         },
    21.         items: { //include specific shape regions with unique styles
    22.           USA: {
    23.             backgroundColor: '#0D47A1',
    24.             cursor: 'pointer',
    25.             label: {
    26.               visible: true,
    27.               fontColor: '#ffffff'
    28.             },
    29.             tooltip: {
    30.               text: 'Click on USA to drilldown into states'
    31.             }
    32.           },
    33.           BRA: {
    34.             backgroundColor: '#4CAF50',
    35.             cursor: 'pointer',
    36.             label: {
    37.               visible: true,
    38.               fontColor: '#ffffff'
    39.             },
    40.             tooltip: {
    41.               text: 'Click on Brazil to drilldown into states'
    42.             }
    43.           },
    44.           IND: {
    45.             backgroundColor: '#FF6F00',
    46.             cursor: 'pointer',
    47.             label: {
    48.               visible: true,
    49.               fontColor: '#ffffff'
    50.             },
    51.             tooltip: {
    52.               text: 'Click on India to drilldown into states'
    53.             }
    54.           }
    55.  
    56.         }
    57.       }
    58.     }
    59.   }]
    60. };
    61.  
    62. zingchart.render({
    63.   id: 'myChart',
    64.   data: myConfig,
    65.   height: 400,
    66.   width: '100%'
    67. });
    68.  
    69. //drilldown chart configuration
    70. var drilldownConfig = {
    71.   shapes: [{
    72.       type: 'zingchart.maps',
    73.       options: {
    74.         name: '',
    75.         style: {
    76.           controls: {
    77.             placement: 'bl'
    78.           }
    79.         }
    80.       }
    81.     },
    82.     {
    83.       x: 100,
    84.       y: 20,
    85.       type: 'rectangle',
    86.       height: 25,
    87.       width: 155,
    88.       backgroundColor: '#C4C4C4',
    89.       padding: 5,
    90.       cursor: 'hand',
    91.       id: 'back_button',
    92.       label: {
    93.         text: 'Back To World Countries'
    94.       },
    95.       hoverState: {
    96.         borderWidth: 1,
    97.         borderColor: '#000'
    98.       }
    99.     }
    100.   ]
    101. };
    102.  
    103. // for maps that exist in our library. Pre-load them later on
    104. zingchart.loadModules('maps-usa, maps-bra, maps-ind');
    105. zingchart.bind('myChart', 'shape_click', function(e) {
    106.   var newMapId = String(e.shapeid).toLowerCase();
    107.  
    108.   // if shape is our back button and not the map
    109.   if (newMapId == 'back_button') {
    110.     console.log('here')
    111.     // since we are using setdata, reload will reload the original chartJSON
    112.     zingchart.exec('myChart', 'reload');
    113.     return;
    114.   }
    115.  
    116.   if (hasDrilldownData(newMapId)) {
    117.     drilldownConfig.shapes[0].options.name = newMapId;
    118.     zingchart.exec('myChart', 'setdata', {
    119.       data: drilldownConfig
    120.     });
    121.   }
    122. });
    123.  
    124. // used in the shape_click event to determine if we should drilldown
    125. function hasDrilldownData(newMapId) {
    126.   var drillDownCountries = ['usa', 'bra', 'ind'];
    127.   for (var i = 0; i < drillDownCountries.length; i++) {
    128.     if (newMapId === drillDownCountries[i])
    129.       return true;
    130.   }
    131.  
    132.   return false;
    133. }