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