• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.  
    33.   <script>
    34.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // must load maps and first map we are going to render
    35.     zingchart.loadModules('maps,maps-usa');
    36.  
    37.     var arrayOfColors = ['#EF9A9A #E57373', '#F48FB1 #F06292', '#B39DDB #9575CD', '#90CAF9 #64B5F6', '#80DEEA #4DD0E1', '#80CBC4 #4DB6AC', '#A5D6A7 #81C784', '#E6EE9C #DCE775', '#FFE082 #FFD54F', '#FFAB91 #FF8A65'];
    38.     var colorIndex = 0;
    39.     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"];
    40.  
    41.     /* 
    42.      *  need this function to render the first map load with random colors
    43.      */
    44.     var objectStates = function(arrayOfStates) {
    45.       var objectOfStates = {};
    46.       for (var i = 0; i < arrayOfStates.length; i++) {
    47.         var itemId = arrayOfStates[i].toUpperCase();
    48.         colorIndexCheck();
    49.         objectOfStates[itemId] = {
    50.           'background-color': arrayOfColors[colorIndex++]
    51.         }
    52.       }
    53.  
    54.       return objectOfStates;
    55.     }(listOfStates);
    56.  
    57.     console.log('---- object form of states ----', objectStates);
    58.  
    59.     // initial config for first chart
    60.     var myConfig = {
    61.       shapes: [{
    62.         type: 'zingchart.maps',
    63.         options: {
    64.           name: 'usa',
    65.  
    66.           zooming: false,
    67.           panning: false,
    68.           scrolling: false,
    69.  
    70.           style: {
    71.             controls: {
    72.               visible: false
    73.             },
    74.             fillType: 'radial',
    75.             cursor: 'pointer',
    76.             hoverState: {
    77.               alpha: 0.3,
    78.               backgroundColor: 'white',
    79.             },
    80.             items: objectStates, //include specific shape regions with unique styles
    81.             tooltip: {
    82.               alpha: 0.8,
    83.               backgroundColor: 'white',
    84.               borderColor: 'white',
    85.               borderRadius: 3,
    86.               fontColor: 'black',
    87.               fontFamily: 'Georgia',
    88.               fontSize: 12,
    89.               textAlpha: 1
    90.             }
    91.           }
    92.         }
    93.       }]
    94.     };
    95.  
    96.     zingchart.render({
    97.       id: 'myChart',
    98.       data: myConfig,
    99.       height: '100%',
    100.       width: '100%'
    101.     });
    102.  
    103.  
    104.     // use this function to assign random colors 
    105.     zingchart.bind('myChart', 'dataparse', function(e, oGraph) {
    106.       console.log(arguments)
    107.  
    108.       // if graphset exists
    109.       if (oGraph && oGraph.graphset[0]) {
    110.         // if shapes exist
    111.         if (oGraph.graphset[0].shapes) {
    112.           oGraph.graphset[0].shapes = oGraph.graphset[0].shapes.map(function(curVal) {
    113.             if (curVal && curVal['map-item']) {
    114.               colorIndexCheck();
    115.               curVal['background-color'] = arrayOfColors[colorIndex++];
    116.             }
    117.  
    118.             return curVal;
    119.           });
    120.         }
    121.       }
    122.  
    123.       return oGraph;
    124.     });
    125.  
    126.     //drilldown chart configuration
    127.     var drilldownConfig = {
    128.       shapes: [{ //Drilldown maps.
    129.           type: 'zingchart.maps',
    130.           options: {
    131.             name: '',
    132.  
    133.             zooming: false,
    134.             panning: false,
    135.             scrolling: false,
    136.  
    137.             style: {
    138.               controls: {
    139.                 visible: false
    140.               },
    141.               backgroundColor: 'pink',
    142.               hoverState: {
    143.                 alpha: 0.3,
    144.                 backgroundColor: 'white',
    145.               },
    146.               tooltip: {
    147.                 alpha: 0.8,
    148.                 backgroundColor: 'white',
    149.                 borderColor: 'white',
    150.                 borderRadius: 3,
    151.                 fontColor: 'black',
    152.                 fontFamily: 'Georgia',
    153.                 fontSize: 12,
    154.                 textAlpha: 1
    155.               }
    156.             }
    157.           }
    158.         },
    159.         { //Button to go back to main map.
    160.           id: 'back_button',
    161.           type: 'rectangle',
    162.           height: 25,
    163.           width: 40,
    164.           x: 20,
    165.           y: 20,
    166.  
    167.           backgroundColor: '#C4C4C4',
    168.           borderRadius: 3,
    169.           cursor: 'hand',
    170.           hoverState: {
    171.             alpha: 0.3,
    172.             backgroundColor: 'white'
    173.           },
    174.           label: {
    175.             text: 'Back',
    176.           }
    177.         }
    178.       ]
    179.     };
    180.  
    181.     // stringify the maps to load them into page using loadModules()
    182.     var stringifyMapList = listOfStates.reduce(function(acc, curVal, index) {
    183.       if (index === 1)
    184.         acc = 'maps-usa_' + acc;
    185.       return acc + ',' + 'maps-usa_' + curVal;
    186.     });
    187.     console.log('---stringified map modules ----', stringifyMapList);
    188.  
    189.     // for maps that exist in our library. Pre-load them later on
    190.     zingchart.loadModules(stringifyMapList);
    191.  
    192.     /*
    193.      * shape click is when we render a new chart or load the original chart
    194.      */
    195.     zingchart.bind('myChart', 'shape_click', function(e) {
    196.       var newMapId = 'usa_' + String(e.shapeid).toLowerCase();
    197.       var shapeId = e.shapeid;
    198.  
    199.       // if shape is our back button and not the map
    200.       if (shapeId == 'back_button') {
    201.         // since we are using setdata, reload will reload the original chartJSON
    202.         zingchart.exec('myChart', 'reload');
    203.         return;
    204.       }
    205.  
    206.       if (hasDrilldownData(newMapId)) {
    207.         drilldownConfig.shapes[0].options.name = newMapId;
    208.         zingchart.exec('myChart', 'setdata', {
    209.           data: drilldownConfig
    210.         });
    211.       }
    212.     });
    213.  
    214.     // used in the shape_click event to determine if we should drilldown
    215.     function hasDrilldownData(newMapId) {
    216.       var drillDownCountries = listOfStates.map(function(curVal) {
    217.         return 'usa_' + curVal;
    218.       });
    219.       for (var i = 0; i < drillDownCountries.length; i++) {
    220.         if (newMapId === drillDownCountries[i])
    221.           return true;
    222.       }
    223.  
    224.       return false;
    225.     }
    226.  
    227.     // update colorindex for assigning random colors
    228.     function colorIndexCheck() {
    229.       if (colorIndex >= arrayOfColors.length) {
    230.         colorIndex = 0;
    231.       }
    232.     }
    233.   </script>
    234. </body>
    235.  
    236. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13.  
    14. </body>
    15.  
    16. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. // must load maps and first map we are going to render
    2. zingchart.loadModules('maps,maps-usa');
    3.  
    4. var arrayOfColors = ['#EF9A9A #E57373', '#F48FB1 #F06292', '#B39DDB #9575CD', '#90CAF9 #64B5F6', '#80DEEA #4DD0E1', '#80CBC4 #4DB6AC', '#A5D6A7 #81C784', '#E6EE9C #DCE775', '#FFE082 #FFD54F', '#FFAB91 #FF8A65'];
    5. var colorIndex = 0;
    6. 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"];
    7.  
    8. /* 
    9.  *  need this function to render the first map load with random colors
    10.  */
    11. var objectStates = function(arrayOfStates) {
    12.   var objectOfStates = {};
    13.   for (var i = 0; i < arrayOfStates.length; i++) {
    14.     var itemId = arrayOfStates[i].toUpperCase();
    15.     colorIndexCheck();
    16.     objectOfStates[itemId] = {
    17.       'background-color': arrayOfColors[colorIndex++]
    18.     }
    19.   }
    20.  
    21.   return objectOfStates;
    22. }(listOfStates);
    23.  
    24. console.log('---- object form of states ----', objectStates);
    25.  
    26. // initial config for first chart
    27. var myConfig = {
    28.   shapes: [{
    29.     type: 'zingchart.maps',
    30.     options: {
    31.       name: 'usa',
    32.  
    33.       zooming: false,
    34.       panning: false,
    35.       scrolling: false,
    36.  
    37.       style: {
    38.         controls: {
    39.           visible: false
    40.         },
    41.         fillType: 'radial',
    42.         cursor: 'pointer',
    43.         hoverState: {
    44.           alpha: 0.3,
    45.           backgroundColor: 'white',
    46.         },
    47.         items: objectStates, //include specific shape regions with unique styles
    48.         tooltip: {
    49.           alpha: 0.8,
    50.           backgroundColor: 'white',
    51.           borderColor: 'white',
    52.           borderRadius: 3,
    53.           fontColor: 'black',
    54.           fontFamily: 'Georgia',
    55.           fontSize: 12,
    56.           textAlpha: 1
    57.         }
    58.       }
    59.     }
    60.   }]
    61. };
    62.  
    63. zingchart.render({
    64.   id: 'myChart',
    65.   data: myConfig,
    66.   height: '100%',
    67.   width: '100%'
    68. });
    69.  
    70.  
    71. // use this function to assign random colors 
    72. zingchart.bind('myChart', 'dataparse', function(e, oGraph) {
    73.   console.log(arguments)
    74.  
    75.   // if graphset exists
    76.   if (oGraph && oGraph.graphset[0]) {
    77.     // if shapes exist
    78.     if (oGraph.graphset[0].shapes) {
    79.       oGraph.graphset[0].shapes = oGraph.graphset[0].shapes.map(function(curVal) {
    80.         if (curVal && curVal['map-item']) {
    81.           colorIndexCheck();
    82.           curVal['background-color'] = arrayOfColors[colorIndex++];
    83.         }
    84.  
    85.         return curVal;
    86.       });
    87.     }
    88.   }
    89.  
    90.   return oGraph;
    91. });
    92.  
    93. //drilldown chart configuration
    94. var drilldownConfig = {
    95.   shapes: [{ //Drilldown maps.
    96.       type: 'zingchart.maps',
    97.       options: {
    98.         name: '',
    99.  
    100.         zooming: false,
    101.         panning: false,
    102.         scrolling: false,
    103.  
    104.         style: {
    105.           controls: {
    106.             visible: false
    107.           },
    108.           backgroundColor: 'pink',
    109.           hoverState: {
    110.             alpha: 0.3,
    111.             backgroundColor: 'white',
    112.           },
    113.           tooltip: {
    114.             alpha: 0.8,
    115.             backgroundColor: 'white',
    116.             borderColor: 'white',
    117.             borderRadius: 3,
    118.             fontColor: 'black',
    119.             fontFamily: 'Georgia',
    120.             fontSize: 12,
    121.             textAlpha: 1
    122.           }
    123.         }
    124.       }
    125.     },
    126.     { //Button to go back to main map.
    127.       id: 'back_button',
    128.       type: 'rectangle',
    129.       height: 25,
    130.       width: 40,
    131.       x: 20,
    132.       y: 20,
    133.  
    134.       backgroundColor: '#C4C4C4',
    135.       borderRadius: 3,
    136.       cursor: 'hand',
    137.       hoverState: {
    138.         alpha: 0.3,
    139.         backgroundColor: 'white'
    140.       },
    141.       label: {
    142.         text: 'Back',
    143.       }
    144.     }
    145.   ]
    146. };
    147.  
    148. // stringify the maps to load them into page using loadModules()
    149. var stringifyMapList = listOfStates.reduce(function(acc, curVal, index) {
    150.   if (index === 1)
    151.     acc = 'maps-usa_' + acc;
    152.   return acc + ',' + 'maps-usa_' + curVal;
    153. });
    154. console.log('---stringified map modules ----', stringifyMapList);
    155.  
    156. // for maps that exist in our library. Pre-load them later on
    157. zingchart.loadModules(stringifyMapList);
    158.  
    159. /*
    160.  * shape click is when we render a new chart or load the original chart
    161.  */
    162. zingchart.bind('myChart', 'shape_click', function(e) {
    163.   var newMapId = 'usa_' + String(e.shapeid).toLowerCase();
    164.   var shapeId = e.shapeid;
    165.  
    166.   // if shape is our back button and not the map
    167.   if (shapeId == 'back_button') {
    168.     // since we are using setdata, reload will reload the original chartJSON
    169.     zingchart.exec('myChart', 'reload');
    170.     return;
    171.   }
    172.  
    173.   if (hasDrilldownData(newMapId)) {
    174.     drilldownConfig.shapes[0].options.name = newMapId;
    175.     zingchart.exec('myChart', 'setdata', {
    176.       data: drilldownConfig
    177.     });
    178.   }
    179. });
    180.  
    181. // used in the shape_click event to determine if we should drilldown
    182. function hasDrilldownData(newMapId) {
    183.   var drillDownCountries = listOfStates.map(function(curVal) {
    184.     return 'usa_' + curVal;
    185.   });
    186.   for (var i = 0; i < drillDownCountries.length; i++) {
    187.     if (newMapId === drillDownCountries[i])
    188.       return true;
    189.   }
    190.  
    191.   return false;
    192. }
    193.  
    194. // update colorindex for assigning random colors
    195. function colorIndexCheck() {
    196.   if (colorIndex >= arrayOfColors.length) {
    197.     colorIndex = 0;
    198.   }
    199. }