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