• Edit
  • Download
  • <!DOCTYPE html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        zingchart.loadModules('maps, maps-usa, maps-usa_ca', function(e) {
          zingchart.render({
            id: 'myChart',
            data: {
              shapes: [{ //USA
                  type: 'zingchart.maps',
                  options: {
                    name: 'usa',
                    bbox: [-125.393, 42.998, -113.125, 31.536],
                    ignore: ['CA'], //This item is ignored because it will be overlaid by the California map below.
    
                    style: {
                      controls: {
                        visible: false
                      }
                    },
                    zooming: false,
                    panning: false,
                    scrolling: false
                  }
                },
                { //California
                  type: 'zingchart.maps',
                  options: {
                    name: 'usa_ca',
                    bbox: [-125.393, 42.998, -113.125, 31.536],
    
                    zooming: false,
                    panning: false,
                    scrolling: false,
                    style: {
                      controls: {
                        visible: false
                      },
    
                      backgroundColor: '#C5CAE9',
                      hoverState: {
                        backgroundColor: '#7986CB'
                      }
                    }
                  }
                }
              ]
            },
            height: 400,
            width: 600
          });
        });
      </script>
    </body>
    
    </html>
    <html>
    <!DOCTYPE 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>
    <html>
    
          
    zingchart.loadModules('maps, maps-usa, maps-usa_ca', function(e) {
      zingchart.render({
        id: 'myChart',
        data: {
          shapes: [{ //USA
              type: 'zingchart.maps',
              options: {
                name: 'usa',
                bbox: [-125.393, 42.998, -113.125, 31.536],
                ignore: ['CA'], //This item is ignored because it will be overlaid by the California map below.
    
                style: {
                  controls: {
                    visible: false
                  }
                },
                zooming: false,
                panning: false,
                scrolling: false
              }
            },
            { //California
              type: 'zingchart.maps',
              options: {
                name: 'usa_ca',
                bbox: [-125.393, 42.998, -113.125, 31.536],
    
                zooming: false,
                panning: false,
                scrolling: false,
                style: {
                  controls: {
                    visible: false
                  },
    
                  backgroundColor: '#C5CAE9',
                  hoverState: {
                    backgroundColor: '#7986CB'
                  }
                }
              }
            }
          ]
        },
        height: 400,
        width: 600
      });
    });