• Edit
  • Download
    1. <!DOCTYPE html>
    2.  
    3. <head>
    4.   <meta charset="utf-8">
    5.   <title>ZingSoft Demo</title>
    6.  
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style></style>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13.   <script>
    14.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    15.     zingchart.loadModules('maps, maps-usa, maps-usa_ca', function(e) {
    16.       zingchart.render({
    17.         id: 'myChart',
    18.         data: {
    19.           shapes: [{ //USA
    20.               type: 'zingchart.maps',
    21.               options: {
    22.                 name: 'usa',
    23.                 bbox: [-125.393, 42.998, -113.125, 31.536],
    24.                 ignore: ['CA'], //This item is ignored because it will be overlaid by the California map below.
    25.  
    26.                 style: {
    27.                   controls: {
    28.                     visible: false
    29.                   }
    30.                 },
    31.                 zooming: false,
    32.                 panning: false,
    33.                 scrolling: false
    34.               }
    35.             },
    36.             { //California
    37.               type: 'zingchart.maps',
    38.               options: {
    39.                 name: 'usa_ca',
    40.                 bbox: [-125.393, 42.998, -113.125, 31.536],
    41.  
    42.                 zooming: false,
    43.                 panning: false,
    44.                 scrolling: false,
    45.                 style: {
    46.                   controls: {
    47.                     visible: false
    48.                   },
    49.  
    50.                   backgroundColor: '#C5CAE9',
    51.                   hoverState: {
    52.                     backgroundColor: '#7986CB'
    53.                   }
    54.                 }
    55.               }
    56.             }
    57.           ]
    58.         },
    59.         height: 400,
    60.         width: 600
    61.       });
    62.     });
    63.   </script>
    64. </body>
    65.  
    66. </html>
    67. <html>
    1. <!DOCTYPE html>
    2.  
    3. <head>
    4.   <meta charset="utf-8">
    5.   <title>ZingSoft Demo</title>
    6.  
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <div id='myChart'></div>
    12. </body>
    13.  
    14. </html>
    15. <html>
    1.  
    1. zingchart.loadModules('maps, maps-usa, maps-usa_ca', function(e) {
    2.   zingchart.render({
    3.     id: 'myChart',
    4.     data: {
    5.       shapes: [{ //USA
    6.           type: 'zingchart.maps',
    7.           options: {
    8.             name: 'usa',
    9.             bbox: [-125.393, 42.998, -113.125, 31.536],
    10.             ignore: ['CA'], //This item is ignored because it will be overlaid by the California map below.
    11.  
    12.             style: {
    13.               controls: {
    14.                 visible: false
    15.               }
    16.             },
    17.             zooming: false,
    18.             panning: false,
    19.             scrolling: false
    20.           }
    21.         },
    22.         { //California
    23.           type: 'zingchart.maps',
    24.           options: {
    25.             name: 'usa_ca',
    26.             bbox: [-125.393, 42.998, -113.125, 31.536],
    27.  
    28.             zooming: false,
    29.             panning: false,
    30.             scrolling: false,
    31.             style: {
    32.               controls: {
    33.                 visible: false
    34.               },
    35.  
    36.               backgroundColor: '#C5CAE9',
    37.               hoverState: {
    38.                 backgroundColor: '#7986CB'
    39.               }
    40.             }
    41.           }
    42.         }
    43.       ]
    44.     },
    45.     height: 400,
    46.     width: 600
    47.   });
    48. });