• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            zing-grid[loading] {
                height: 400px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // must load maps and first map we are going to render
            zingchart.loadModules('maps,maps-world-countries');
    
            // initial config for first chart
            var myConfig = {
                shapes: [{
                    type: 'zingchart.maps',
                    options: {
                        name: 'world.countries',
                        style: { //stlye all countries 
                            controls: {
                                placement: 'bl'
                            },
                            backgroundColor: '#cccccc',
                            label: {
                                visible: false
                            },
                            hoverState: {
                                alpha: .32,
                            },
                            items: { //include specific shape regions with unique styles
                                USA: {
                                    backgroundColor: '#0D47A1',
                                    cursor: 'pointer',
                                    label: {
                                        visible: true,
                                        fontColor: '#ffffff'
                                    },
                                    tooltip: {
                                        text: 'Click on USA to drilldown into states'
                                    }
                                },
                                BRA: {
                                    backgroundColor: '#4CAF50',
                                    cursor: 'pointer',
                                    label: {
                                        visible: true,
                                        fontColor: '#ffffff'
                                    },
                                    tooltip: {
                                        text: 'Click on Brazil to drilldown into states'
                                    }
                                },
                                IND: {
                                    backgroundColor: '#FF6F00',
                                    cursor: 'pointer',
                                    label: {
                                        visible: true,
                                        fontColor: '#ffffff'
                                    },
                                    tooltip: {
                                        text: 'Click on India to drilldown into states'
                                    }
                                }
    
                            }
                        }
                    }
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: 400,
                width: '100%'
            });
    
            //drilldown chart configuration
            var drilldownConfig = {
                shapes: [{
                        type: 'zingchart.maps',
                        options: {
                            name: '',
                            style: {
                                controls: {
                                    placement: 'bl'
                                }
                            }
                        }
                    },
                    {
                        x: 100,
                        y: 20,
                        type: 'rectangle',
                        height: 25,
                        width: 155,
                        backgroundColor: '#C4C4C4',
                        padding: 5,
                        cursor: 'hand',
                        id: 'back_button',
                        label: {
                            text: 'Back To World Countries'
                        },
                        hoverState: {
                            borderWidth: 1,
                            borderColor: '#000'
                        }
                    }
                ]
            };
    
            // for maps that exist in our library. Pre-load them later on
            zingchart.loadModules('maps-usa, maps-bra, maps-ind');
            zingchart.bind('myChart', 'shape_click', function(e) {
                var newMapId = String(e.shapeid).toLowerCase();
    
                // if shape is our back button and not the map
                if (newMapId == 'back_button') {
                    console.log('here')
                    // since we are using setdata, reload will reload the original chartJSON
                    zingchart.exec('myChart', 'reload');
                    return;
                }
    
                if (hasDrilldownData(newMapId)) {
                    drilldownConfig.shapes[0].options.name = newMapId;
                    zingchart.exec('myChart', 'setdata', {
                        data: drilldownConfig
                    });
                }
            });
    
            // used in the shape_click event to determine if we should drilldown
            function hasDrilldownData(newMapId) {
                var drillDownCountries = ['usa', 'bra', 'ind'];
                for (var i = 0; i < drillDownCountries.length; i++) {
                    if (newMapId === drillDownCountries[i])
                        return true;
                }
    
                return false;
            }
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id='myChart'></div>
    	</body>
    </html>
    
          
    // must load maps and first map we are going to render
    zingchart.loadModules('maps,maps-world-countries');
    
    // initial config for first chart
    var myConfig = {
        shapes:[
            {
                type:'zingchart.maps',
                options:{
                  name:'world.countries',
                  style:{ //stlye all countries 
                    controls: {
                      placement: 'bl'
                    },
                    backgroundColor: '#cccccc',
                    label:{ 
                      visible: false
                    },
                    hoverState: {
                      alpha:.32,
                    },
                    items:{ //include specific shape regions with unique styles
                      USA:{
                        backgroundColor:'#0D47A1',
                        cursor:'pointer',
                        label:{
                          visible: true,
                          fontColor: '#ffffff'
                        },
                        tooltip: {
                          text: 'Click on USA to drilldown into states'
                        }
                      },
                      BRA:{
                        backgroundColor: '#4CAF50',
                        cursor:'pointer',
                        label:{
                          visible: true,
                          fontColor: '#ffffff'
                        },
                        tooltip: {
                          text: 'Click on Brazil to drilldown into states'
                        }
                      },
                      IND:{
                        backgroundColor: '#FF6F00',
                        cursor:'pointer',
                        label:{
                          visible: true,
                          fontColor: '#ffffff'
                        },
                        tooltip: {
                          text: 'Click on India to drilldown into states'
                        }
                      }
                      
                    }
                  }
                }
            }
        ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 400, 
    	width: '100%' 
    });
    
    //drilldown chart configuration
    var drilldownConfig = {
      shapes:[
          {
              type:'zingchart.maps',
              options:{
                name:'',
                style: {
                  controls: {
                    placement: 'bl'
                  }
                }
              }
          }, 
          {
            x:100,
            y:20,
            type:'rectangle',
            height: 25,
            width: 155,
            backgroundColor:'#C4C4C4',
            padding:5,
            cursor:'hand',
            id: 'back_button',
            label: {
              text: 'Back To World Countries'
            },
            hoverState: {
              borderWidth: 1,
              borderColor: '#000'
            }
          }
        ]
    };
    
    // for maps that exist in our library. Pre-load them later on
    zingchart.loadModules('maps-usa, maps-bra, maps-ind');
    zingchart.bind('myChart', 'shape_click', function(e) {
      var newMapId = String(e.shapeid).toLowerCase();
    
      // if shape is our back button and not the map
      if (newMapId == 'back_button') {
        console.log('here')
        // since we are using setdata, reload will reload the original chartJSON
        zingchart.exec('myChart', 'reload');
        return;
      }
      
      if (hasDrilldownData(newMapId)) {
        drilldownConfig.shapes[0].options.name =  newMapId;
        zingchart.exec('myChart', 'setdata', {
          data: drilldownConfig
        });
      }
    });
    
    // used in the shape_click event to determine if we should drilldown
    function hasDrilldownData(newMapId) {
      var drillDownCountries = ['usa', 'bra', 'ind'];
      for (var i = 0; i < drillDownCountries.length; i++) {
        if (newMapId === drillDownCountries[i])
          return true;
      }
      
      return false;
    }