• 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>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // must load maps and first map we are going to render
        zingchart.loadModules('maps,maps-usa');
    
        var arrayOfColors = ['#EF9A9A #E57373', '#F48FB1 #F06292', '#B39DDB #9575CD', '#90CAF9 #64B5F6', '#80DEEA #4DD0E1', '#80CBC4 #4DB6AC', '#A5D6A7 #81C784', '#E6EE9C #DCE775', '#FFE082 #FFD54F', '#FFAB91 #FF8A65'];
        var colorIndex = 0;
        var listOfStates = ["al", "ak", "az", "ar", "ca", "co", "ct", "de", "dc", "fl", "ga", "hi", "id", "il", "in", "ia", "ks", "ky", "la", "me", "md", "ma", "mi", "mn", "ms", "mo", "mt", "ne", "nv", "nh", "nj", "nm", "ny", "nc", "nd", "oh", "ok", "or", "pa", "ri", "sc", "sd", "tn", "tx", "ut", "vt", "va", "wa", "wv", "wi", "wy"];
    
        /* 
         *  need this function to render the first map load with random colors
         */
        var objectStates = function(arrayOfStates) {
          var objectOfStates = {};
          for (var i = 0; i < arrayOfStates.length; i++) {
            var itemId = arrayOfStates[i].toUpperCase();
            colorIndexCheck();
            objectOfStates[itemId] = {
              'background-color': arrayOfColors[colorIndex++]
            }
          }
    
          return objectOfStates;
        }(listOfStates);
    
        console.log('---- object form of states ----', objectStates);
    
        // initial config for first chart
        var myConfig = {
          shapes: [{
            type: 'zingchart.maps',
            options: {
              name: 'usa',
    
              zooming: false,
              panning: false,
              scrolling: false,
    
              style: {
                controls: {
                  visible: false
                },
                fillType: 'radial',
                cursor: 'pointer',
                hoverState: {
                  alpha: 0.3,
                  backgroundColor: 'white',
                },
                items: objectStates, //include specific shape regions with unique styles
                tooltip: {
                  alpha: 0.8,
                  backgroundColor: 'white',
                  borderColor: 'white',
                  borderRadius: 3,
                  fontColor: 'black',
                  fontFamily: 'Georgia',
                  fontSize: 12,
                  textAlpha: 1
                }
              }
            }
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: '100%',
          width: '100%'
        });
    
    
        // use this function to assign random colors 
        zingchart.bind('myChart', 'dataparse', function(e, oGraph) {
          console.log(arguments)
    
          // if graphset exists
          if (oGraph && oGraph.graphset[0]) {
            // if shapes exist
            if (oGraph.graphset[0].shapes) {
              oGraph.graphset[0].shapes = oGraph.graphset[0].shapes.map(function(curVal) {
                if (curVal && curVal['map-item']) {
                  colorIndexCheck();
                  curVal['background-color'] = arrayOfColors[colorIndex++];
                }
    
                return curVal;
              });
            }
          }
    
          return oGraph;
        });
    
        //drilldown chart configuration
        var drilldownConfig = {
          shapes: [{ //Drilldown maps.
              type: 'zingchart.maps',
              options: {
                name: '',
    
                zooming: false,
                panning: false,
                scrolling: false,
    
                style: {
                  controls: {
                    visible: false
                  },
                  backgroundColor: 'pink',
                  hoverState: {
                    alpha: 0.3,
                    backgroundColor: 'white',
                  },
                  tooltip: {
                    alpha: 0.8,
                    backgroundColor: 'white',
                    borderColor: 'white',
                    borderRadius: 3,
                    fontColor: 'black',
                    fontFamily: 'Georgia',
                    fontSize: 12,
                    textAlpha: 1
                  }
                }
              }
            },
            { //Button to go back to main map.
              id: 'back_button',
              type: 'rectangle',
              height: 25,
              width: 40,
              x: 20,
              y: 20,
    
              backgroundColor: '#C4C4C4',
              borderRadius: 3,
              cursor: 'hand',
              hoverState: {
                alpha: 0.3,
                backgroundColor: 'white'
              },
              label: {
                text: 'Back',
              }
            }
          ]
        };
    
        // stringify the maps to load them into page using loadModules()
        var stringifyMapList = listOfStates.reduce(function(acc, curVal, index) {
          if (index === 1)
            acc = 'maps-usa_' + acc;
          return acc + ',' + 'maps-usa_' + curVal;
        });
        console.log('---stringified map modules ----', stringifyMapList);
    
        // for maps that exist in our library. Pre-load them later on
        zingchart.loadModules(stringifyMapList);
    
        /*
         * shape click is when we render a new chart or load the original chart
         */
        zingchart.bind('myChart', 'shape_click', function(e) {
          var newMapId = 'usa_' + String(e.shapeid).toLowerCase();
          var shapeId = e.shapeid;
    
          // if shape is our back button and not the map
          if (shapeId == 'back_button') {
            // 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 = listOfStates.map(function(curVal) {
            return 'usa_' + curVal;
          });
          for (var i = 0; i < drillDownCountries.length; i++) {
            if (newMapId === drillDownCountries[i])
              return true;
          }
    
          return false;
        }
    
        // update colorindex for assigning random colors
        function colorIndexCheck() {
          if (colorIndex >= arrayOfColors.length) {
            colorIndex = 0;
          }
        }
      </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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    
    	</body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    #myChart {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    .zc-ref {
    	display:none;
    }
    // must load maps and first map we are going to render
    zingchart.loadModules('maps,maps-usa');
    
    var arrayOfColors = ['#EF9A9A #E57373', '#F48FB1 #F06292','#B39DDB #9575CD', '#90CAF9 #64B5F6','#80DEEA #4DD0E1', '#80CBC4 #4DB6AC', '#A5D6A7 #81C784','#E6EE9C #DCE775','#FFE082 #FFD54F','#FFAB91 #FF8A65'];
    var colorIndex = 0;
    var listOfStates = ["al", "ak", "az", "ar", "ca", "co", "ct", "de", "dc", "fl", "ga", "hi", "id", "il", "in", "ia", "ks", "ky", "la", "me", "md", "ma", "mi", "mn", "ms", "mo", "mt", "ne", "nv", "nh", "nj", "nm", "ny", "nc", "nd", "oh", "ok", "or", "pa", "ri", "sc", "sd", "tn", "tx", "ut", "vt", "va", "wa", "wv", "wi", "wy"];
    
    /* 
     *  need this function to render the first map load with random colors
     */
    var objectStates = function(arrayOfStates) {
      var objectOfStates = {};
      for(var i=0; i<arrayOfStates.length;i++) {
        var itemId = arrayOfStates[i].toUpperCase();
         colorIndexCheck();
        objectOfStates[itemId] = {
          'background-color': arrayOfColors[colorIndex++]
        }
      }
      
      return objectOfStates;
    }(listOfStates);
    
    console.log('---- object form of states ----', objectStates);
    
    // initial config for first chart
    var myConfig = {
      shapes: [
        {
          type: 'zingchart.maps',
          options: {
            name: 'usa',
    
            zooming: false,
            panning: false,
            scrolling: false,
            
            style: {
              controls: {
                visible: false
              },
              fillType: 'radial',
              cursor: 'pointer',
              hoverState: {
                alpha: 0.3,
                backgroundColor: 'white',
              },
              items: objectStates, //include specific shape regions with unique styles
              tooltip: {
                alpha: 0.8,
    	          backgroundColor: 'white',
    	          borderColor: 'white',
    	          borderRadius: 3,
                fontColor: 'black',
                fontFamily: 'Georgia',
                fontSize: 12,
                textAlpha: 1
              }
            }
          }
        }
      ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: '100%', 
    	width: '100%' 
    });
    
    
    // use this function to assign random colors 
    zingchart.bind('myChart','dataparse', function(e, oGraph) {
      console.log(arguments)
      
      // if graphset exists
      if (oGraph && oGraph.graphset[0]) {
        // if shapes exist
        if (oGraph.graphset[0].shapes) {
          oGraph.graphset[0].shapes = oGraph.graphset[0].shapes.map(function(curVal) {
            if (curVal && curVal['map-item']) {
              colorIndexCheck();
              curVal['background-color'] = arrayOfColors[colorIndex++];
            }
            
            return curVal;
          });
        }
      }
    
      return oGraph;
    });
    
    //drilldown chart configuration
    var drilldownConfig = {
      shapes:[
        { //Drilldown maps.
          type:'zingchart.maps',
          options:{
            name:'',
            
            zooming: false,
            panning: false,
            scrolling: false,
            
            style: {
              controls: {
                visible: false
              },
              backgroundColor: 'pink',
              hoverState: {
                alpha: 0.3,
                backgroundColor: 'white',
              },
              tooltip: {
                alpha: 0.8,
    	          backgroundColor: 'white',
    	          borderColor: 'white',
    	          borderRadius: 3,
                fontColor: 'black',
                fontFamily: 'Georgia',
                fontSize: 12,
                textAlpha: 1
              }
            }
          }
        }, 
        { //Button to go back to main map.
          id: 'back_button',
          type: 'rectangle',
          height: 25,
          width: 40,      
          x: 20,
          y: 20,
          
          backgroundColor:'#C4C4C4',
          borderRadius: 3,
          cursor:'hand',
          hoverState: {
            alpha: 0.3,
            backgroundColor: 'white'
          },
          label: {
            text: 'Back',
          }
        }
      ]
    };
    
    // stringify the maps to load them into page using loadModules()
    var stringifyMapList = listOfStates.reduce(function(acc, curVal, index) {
      if (index === 1)
        acc = 'maps-usa_' + acc;
      return acc + ',' + 'maps-usa_' + curVal;
    });
    console.log('---stringified map modules ----', stringifyMapList);
    
    // for maps that exist in our library. Pre-load them later on
    zingchart.loadModules(stringifyMapList);
    
    /*
     * shape click is when we render a new chart or load the original chart
     */
    zingchart.bind('myChart', 'shape_click', function(e) {
      var newMapId = 'usa_' + String(e.shapeid).toLowerCase();
      var shapeId = e.shapeid;
      
      // if shape is our back button and not the map
      if (shapeId == 'back_button') {
        // 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 = listOfStates.map(function(curVal) {
        return 'usa_' + curVal;
      });
      for (var i = 0; i < drillDownCountries.length; i++) {
        if (newMapId === drillDownCountries[i])
          return true;
      }
      
      return false;
    }
    
    // update colorindex for assigning random colors
    function colorIndexCheck() {
      if (colorIndex >= arrayOfColors.length) {
        colorIndex = 0;
      }
    }