• 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.                 tooltip: {
    26.                   text: '%data-region',
    27.                 },
    28.                 label: {
    29.                   visible: false
    30.                 },
    31.  
    32.                 //Northern California:
    33.                 group: 1,
    34.                 'data-region': 'Northern California',
    35.  
    36.                 items: {
    37.  
    38.                   //Southern California:
    39.                   SP: {
    40.                     group: 2,
    41.                     'data-region': 'Southern California'
    42.                   },
    43.                   KE: {
    44.                     group: 2,
    45.                     'data-region': 'Southern California'
    46.                   },
    47.                   SR: {
    48.                     group: 2,
    49.                     'data-region': 'Southern California'
    50.                   },
    51.                   VE: {
    52.                     group: 2,
    53.                     'data-region': 'Southern California'
    54.                   },
    55.                   LO: {
    56.                     group: 2,
    57.                     'data-region': 'Southern California'
    58.                   },
    59.                   SB: {
    60.                     group: 2,
    61.                     'data-region': 'Southern California'
    62.                   },
    63.                   OR: {
    64.                     group: 2,
    65.                     'data-region': 'Southern California'
    66.                   },
    67.                   RI: {
    68.                     group: 2,
    69.                     'data-region': 'Southern California'
    70.                   },
    71.                   SD: {
    72.                     group: 2,
    73.                     'data-region': 'Southern California'
    74.                   },
    75.                   IM: {
    76.                     group: 2,
    77.                     'data-region': 'Southern California'
    78.                   },
    79.                 }
    80.               }
    81.             }
    82.           }]
    83.         },
    84.         height: 400,
    85.         width: '100%'
    86.       });
    87.  
    88.     });
    89.   </script>
    90. </body>
    91.  
    92. </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.             tooltip: {
    11.               text: '%data-region',
    12.             },
    13.             label: {
    14.               visible: false
    15.             },
    16.  
    17.             //Northern California:
    18.             group: 1,
    19.             'data-region': 'Northern California',
    20.  
    21.             items: {
    22.  
    23.               //Southern California:
    24.               SP: {
    25.                 group: 2,
    26.                 'data-region': 'Southern California'
    27.               },
    28.               KE: {
    29.                 group: 2,
    30.                 'data-region': 'Southern California'
    31.               },
    32.               SR: {
    33.                 group: 2,
    34.                 'data-region': 'Southern California'
    35.               },
    36.               VE: {
    37.                 group: 2,
    38.                 'data-region': 'Southern California'
    39.               },
    40.               LO: {
    41.                 group: 2,
    42.                 'data-region': 'Southern California'
    43.               },
    44.               SB: {
    45.                 group: 2,
    46.                 'data-region': 'Southern California'
    47.               },
    48.               OR: {
    49.                 group: 2,
    50.                 'data-region': 'Southern California'
    51.               },
    52.               RI: {
    53.                 group: 2,
    54.                 'data-region': 'Southern California'
    55.               },
    56.               SD: {
    57.                 group: 2,
    58.                 'data-region': 'Southern California'
    59.               },
    60.               IM: {
    61.                 group: 2,
    62.                 'data-region': 'Southern California'
    63.               },
    64.             }
    65.           }
    66.         }
    67.       }]
    68.     },
    69.     height: 400,
    70.     width: '100%'
    71.   });
    72.  
    73. });