• 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.                   topState: {
    42.                     backgroundColor: 'red',
    43.                     offsetX: 10,
    44.                     offsetY: 10
    45.                   }
    46.                 },
    47.  
    48.                 //Northern California:
    49.                 group: 1,
    50.                 'data-region': 'Northern California',
    51.                 backgroundColor: '#C5E1A5',
    52.                 hoverState: {
    53.                   backgroundColor: '#AED581'
    54.                 },
    55.  
    56.                 items: {
    57.  
    58.                   //Southern California:
    59.                   SP: {
    60.                     group: 2,
    61.                     'data-region': 'Southern California',
    62.                     backgroundColor: '#FFE082',
    63.                     hoverState: {
    64.                       backgroundColor: '#FFD54F'
    65.                     }
    66.                   },
    67.                   KE: {
    68.                     group: 2,
    69.                     'data-region': 'Southern California',
    70.                     backgroundColor: '#FFE082',
    71.                     hoverState: {
    72.                       backgroundColor: '#FFD54F'
    73.                     }
    74.                   },
    75.                   SR: {
    76.                     group: 2,
    77.                     'data-region': 'Southern California',
    78.                     backgroundColor: '#FFE082',
    79.                     hoverState: {
    80.                       backgroundColor: '#FFD54F'
    81.                     }
    82.                   },
    83.                   VE: {
    84.                     group: 2,
    85.                     'data-region': 'Southern California',
    86.                     backgroundColor: '#FFE082',
    87.                     hoverState: {
    88.                       backgroundColor: '#FFD54F'
    89.                     }
    90.                   },
    91.                   LO: {
    92.                     group: 2,
    93.                     'data-region': 'Southern California',
    94.                     backgroundColor: '#FFE082',
    95.                     hoverState: {
    96.                       backgroundColor: '#FFD54F'
    97.                     }
    98.                   },
    99.                   SB: {
    100.                     group: 2,
    101.                     'data-region': 'Southern California',
    102.                     backgroundColor: '#FFE082',
    103.                     hoverState: {
    104.                       backgroundColor: '#FFD54F'
    105.                     }
    106.                   },
    107.                   OR: {
    108.                     group: 2,
    109.                     'data-region': 'Southern California',
    110.                     backgroundColor: '#FFE082',
    111.                     hoverState: {
    112.                       backgroundColor: '#FFD54F'
    113.                     }
    114.                   },
    115.                   RI: {
    116.                     group: 2,
    117.                     'data-region': 'Southern California',
    118.                     backgroundColor: '#FFE082',
    119.                     hoverState: {
    120.                       backgroundColor: '#FFD54F'
    121.                     }
    122.                   },
    123.                   SD: {
    124.                     group: 2,
    125.                     'data-region': 'Southern California',
    126.                     backgroundColor: '#FFE082',
    127.                     hoverState: {
    128.                       backgroundColor: '#FFD54F'
    129.                     }
    130.                   },
    131.                   IM: {
    132.                     group: 2,
    133.                     'data-region': 'Southern California',
    134.                     backgroundColor: '#FFE082',
    135.                     hoverState: {
    136.                       backgroundColor: '#FFD54F'
    137.                     }
    138.                   },
    139.                 }
    140.               }
    141.             }
    142.           }]
    143.         },
    144.         height: 400,
    145.         width: '100%'
    146.       });
    147.  
    148.     });
    149.   </script>
    150. </body>
    151.  
    152. </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.               topState: {
    27.                 backgroundColor: 'red',
    28.                 offsetX: 10,
    29.                 offsetY: 10
    30.               }
    31.             },
    32.  
    33.             //Northern California:
    34.             group: 1,
    35.             'data-region': 'Northern California',
    36.             backgroundColor: '#C5E1A5',
    37.             hoverState: {
    38.               backgroundColor: '#AED581'
    39.             },
    40.  
    41.             items: {
    42.  
    43.               //Southern California:
    44.               SP: {
    45.                 group: 2,
    46.                 'data-region': 'Southern California',
    47.                 backgroundColor: '#FFE082',
    48.                 hoverState: {
    49.                   backgroundColor: '#FFD54F'
    50.                 }
    51.               },
    52.               KE: {
    53.                 group: 2,
    54.                 'data-region': 'Southern California',
    55.                 backgroundColor: '#FFE082',
    56.                 hoverState: {
    57.                   backgroundColor: '#FFD54F'
    58.                 }
    59.               },
    60.               SR: {
    61.                 group: 2,
    62.                 'data-region': 'Southern California',
    63.                 backgroundColor: '#FFE082',
    64.                 hoverState: {
    65.                   backgroundColor: '#FFD54F'
    66.                 }
    67.               },
    68.               VE: {
    69.                 group: 2,
    70.                 'data-region': 'Southern California',
    71.                 backgroundColor: '#FFE082',
    72.                 hoverState: {
    73.                   backgroundColor: '#FFD54F'
    74.                 }
    75.               },
    76.               LO: {
    77.                 group: 2,
    78.                 'data-region': 'Southern California',
    79.                 backgroundColor: '#FFE082',
    80.                 hoverState: {
    81.                   backgroundColor: '#FFD54F'
    82.                 }
    83.               },
    84.               SB: {
    85.                 group: 2,
    86.                 'data-region': 'Southern California',
    87.                 backgroundColor: '#FFE082',
    88.                 hoverState: {
    89.                   backgroundColor: '#FFD54F'
    90.                 }
    91.               },
    92.               OR: {
    93.                 group: 2,
    94.                 'data-region': 'Southern California',
    95.                 backgroundColor: '#FFE082',
    96.                 hoverState: {
    97.                   backgroundColor: '#FFD54F'
    98.                 }
    99.               },
    100.               RI: {
    101.                 group: 2,
    102.                 'data-region': 'Southern California',
    103.                 backgroundColor: '#FFE082',
    104.                 hoverState: {
    105.                   backgroundColor: '#FFD54F'
    106.                 }
    107.               },
    108.               SD: {
    109.                 group: 2,
    110.                 'data-region': 'Southern California',
    111.                 backgroundColor: '#FFE082',
    112.                 hoverState: {
    113.                   backgroundColor: '#FFD54F'
    114.                 }
    115.               },
    116.               IM: {
    117.                 group: 2,
    118.                 'data-region': 'Southern California',
    119.                 backgroundColor: '#FFE082',
    120.                 hoverState: {
    121.                   backgroundColor: '#FFD54F'
    122.                 }
    123.               },
    124.             }
    125.           }
    126.         }
    127.       }]
    128.     },
    129.     height: 400,
    130.     width: '100%'
    131.   });
    132.  
    133. });