• 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;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </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;
      }
    }