• 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></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     zingchart.loadModules('maps, maps-usa_ca', function(e) {
    17.       zingchart.render({
    18.         id: 'myChart',
    19.         data: {
    20.           shapes: [{
    21.             type: 'zingchart.maps',
    22.             options: {
    23.               name: 'usa_ca',
    24.               style: {
    25.                 label: {
    26.                   visible: false
    27.                 },
    28.                 tooltip: {
    29.                   text: '%data-region:<br>%text',
    30.  
    31.                   alpha: 0.7,
    32.                   backgroundColor: 'white',
    33.                   borderColor: '#00BCD4',
    34.                   fontColor: '#00BCD4',
    35.                   borderRadius: 1,
    36.                   fontFamily: 'Georgia',
    37.                   fontSize: 14,
    38.                   textAlign: 'center',
    39.                   textAlpha: 1,
    40.                 },
    41.  
    42.                 //Northern California:
    43.                 group: 1,
    44.                 'data-region': 'Northern California',
    45.                 backgroundColor: '#C5E1A5',
    46.                 hoverState: {
    47.                   backgroundColor: '#AED581'
    48.                 },
    49.  
    50.                 items: {
    51.  
    52.                   //Southern California:
    53.                   SP: {
    54.                     group: 2,
    55.                     'data-region': 'Southern California',
    56.                     backgroundColor: '#FFE082',
    57.                     hoverState: {
    58.                       backgroundColor: '#FFD54F'
    59.                     }
    60.                   },
    61.                   KE: {
    62.                     group: 2,
    63.                     'data-region': 'Southern California',
    64.                     backgroundColor: '#FFE082',
    65.                     hoverState: {
    66.                       backgroundColor: '#FFD54F'
    67.                     }
    68.                   },
    69.                   SR: {
    70.                     group: 2,
    71.                     'data-region': 'Southern California',
    72.                     backgroundColor: '#FFE082',
    73.                     hoverState: {
    74.                       backgroundColor: '#FFD54F'
    75.                     }
    76.                   },
    77.                   VE: {
    78.                     group: 2,
    79.                     'data-region': 'Southern California',
    80.                     backgroundColor: '#FFE082',
    81.                     hoverState: {
    82.                       backgroundColor: '#FFD54F'
    83.                     }
    84.                   },
    85.                   LO: {
    86.                     group: 2,
    87.                     'data-region': 'Southern California',
    88.                     backgroundColor: '#FFE082',
    89.                     hoverState: {
    90.                       backgroundColor: '#FFD54F'
    91.                     }
    92.                   },
    93.                   SB: {
    94.                     group: 2,
    95.                     'data-region': 'Southern California',
    96.                     backgroundColor: '#FFE082',
    97.                     hoverState: {
    98.                       backgroundColor: '#FFD54F'
    99.                     }
    100.                   },
    101.                   OR: {
    102.                     group: 2,
    103.                     'data-region': 'Southern California',
    104.                     backgroundColor: '#FFE082',
    105.                     hoverState: {
    106.                       backgroundColor: '#FFD54F'
    107.                     }
    108.                   },
    109.                   RI: {
    110.                     group: 2,
    111.                     'data-region': 'Southern California',
    112.                     backgroundColor: '#FFE082',
    113.                     hoverState: {
    114.                       backgroundColor: '#FFD54F'
    115.                     }
    116.                   },
    117.                   SD: {
    118.                     group: 2,
    119.                     'data-region': 'Southern California',
    120.                     backgroundColor: '#FFE082',
    121.                     hoverState: {
    122.                       backgroundColor: '#FFD54F'
    123.                     }
    124.                   },
    125.                   IM: {
    126.                     group: 2,
    127.                     'data-region': 'Southern California',
    128.                     backgroundColor: '#FFE082',
    129.                     hoverState: {
    130.                       backgroundColor: '#FFD54F'
    131.                     }
    132.                   },
    133.                 }
    134.               }
    135.             }
    136.           }]
    137.         },
    138.         height: 400,
    139.         width: '100%'
    140.       });
    141.  
    142.     });
    143.   </script>
    144. </body>
    145.  
    146. </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'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. zingchart.loadModules('maps, maps-usa_ca', function(e) {
    2.   zingchart.render({
    3.     id: 'myChart',
    4.     data: {
    5.       shapes: [{
    6.         type: 'zingchart.maps',
    7.         options: {
    8.           name: 'usa_ca',
    9.           style: {
    10.             label: {
    11.               visible: false
    12.             },
    13.             tooltip: {
    14.               text: '%data-region:<br>%text',
    15.  
    16.               alpha: 0.7,
    17.               backgroundColor: 'white',
    18.               borderColor: '#00BCD4',
    19.               fontColor: '#00BCD4',
    20.               borderRadius: 1,
    21.               fontFamily: 'Georgia',
    22.               fontSize: 14,
    23.               textAlign: 'center',
    24.               textAlpha: 1,
    25.             },
    26.  
    27.             //Northern California:
    28.             group: 1,
    29.             'data-region': 'Northern California',
    30.             backgroundColor: '#C5E1A5',
    31.             hoverState: {
    32.               backgroundColor: '#AED581'
    33.             },
    34.  
    35.             items: {
    36.  
    37.               //Southern California:
    38.               SP: {
    39.                 group: 2,
    40.                 'data-region': 'Southern California',
    41.                 backgroundColor: '#FFE082',
    42.                 hoverState: {
    43.                   backgroundColor: '#FFD54F'
    44.                 }
    45.               },
    46.               KE: {
    47.                 group: 2,
    48.                 'data-region': 'Southern California',
    49.                 backgroundColor: '#FFE082',
    50.                 hoverState: {
    51.                   backgroundColor: '#FFD54F'
    52.                 }
    53.               },
    54.               SR: {
    55.                 group: 2,
    56.                 'data-region': 'Southern California',
    57.                 backgroundColor: '#FFE082',
    58.                 hoverState: {
    59.                   backgroundColor: '#FFD54F'
    60.                 }
    61.               },
    62.               VE: {
    63.                 group: 2,
    64.                 'data-region': 'Southern California',
    65.                 backgroundColor: '#FFE082',
    66.                 hoverState: {
    67.                   backgroundColor: '#FFD54F'
    68.                 }
    69.               },
    70.               LO: {
    71.                 group: 2,
    72.                 'data-region': 'Southern California',
    73.                 backgroundColor: '#FFE082',
    74.                 hoverState: {
    75.                   backgroundColor: '#FFD54F'
    76.                 }
    77.               },
    78.               SB: {
    79.                 group: 2,
    80.                 'data-region': 'Southern California',
    81.                 backgroundColor: '#FFE082',
    82.                 hoverState: {
    83.                   backgroundColor: '#FFD54F'
    84.                 }
    85.               },
    86.               OR: {
    87.                 group: 2,
    88.                 'data-region': 'Southern California',
    89.                 backgroundColor: '#FFE082',
    90.                 hoverState: {
    91.                   backgroundColor: '#FFD54F'
    92.                 }
    93.               },
    94.               RI: {
    95.                 group: 2,
    96.                 'data-region': 'Southern California',
    97.                 backgroundColor: '#FFE082',
    98.                 hoverState: {
    99.                   backgroundColor: '#FFD54F'
    100.                 }
    101.               },
    102.               SD: {
    103.                 group: 2,
    104.                 'data-region': 'Southern California',
    105.                 backgroundColor: '#FFE082',
    106.                 hoverState: {
    107.                   backgroundColor: '#FFD54F'
    108.                 }
    109.               },
    110.               IM: {
    111.                 group: 2,
    112.                 'data-region': 'Southern California',
    113.                 backgroundColor: '#FFE082',
    114.                 hoverState: {
    115.                   backgroundColor: '#FFD54F'
    116.                 }
    117.               },
    118.             }
    119.           }
    120.         }
    121.       }]
    122.     },
    123.     height: 400,
    124.     width: '100%'
    125.   });
    126.  
    127. });