• 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></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;
    }