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