• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .chart--container {
    10.       height: 100%;
    11.       width: 100%;
    12.       min-height: 530px;
    13.     }
    14.  
    15.     .zc-ref {
    16.       display: none;
    17.     }
    18.   </style>
    19. </head>
    20. ​
    21.  
    22. <body class="zc-body">
    23.   ​
    24.   <div id="myChart" class="chart--container">
    25.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    26.   </div>
    27.  
    28.   <script>
    29.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
    30.     // -----------------------------
    31.     let myConfig = {
    32.       shapes: [{
    33.           type: 'zingchart.maps',
    34.           options: {
    35.             name: 'usa',
    36.             scrolling: false,
    37.             style: {
    38.               label: {
    39.                 visible: false
    40.               },
    41.               items: {
    42.                 CA: {
    43.                   backgroundColor: '#9e9e9e'
    44.                 }
    45.               }
    46.             }
    47.           }
    48.         },
    49.         {
    50.           type: 'circle', // shapeid is OPTIONAL but smart if you are targeting events to this shape
    51.           id: 'sd',
    52.           map: 'usa', // assigning to map name or id is necessary
    53.           backgroundColor: '#4dd0e1',
    54.           cursor: 'pointer',
    55.           size: 15,
    56.           target: '_blank', // just like HTMl we have 
    57.           url: 'https://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy', // is how you link url to shapestarget _blank
    58.           x: '-117.1611lon', // hook shape based on lon/lat
    59.           y: '32.7157lat', // hook shape based on lon/lat
    60.           tooltip: {
    61.             text: 'We\'re located right in San Diego!',
    62.             backgroundColor: '#ff9800',
    63.             borderColor: '#333',
    64.             borderRadius: 4,
    65.             fontSize: 16
    66.           }
    67.         }
    68.       ]
    69.     };
    70.  
    71.     // EVENTS
    72.     // -----------------------------
    73.     zingchart.bind(null, 'shape_click', function(e) {
    74.       if (e.shapeid === 'sd')
    75.         console.log(e)
    76.     });
    77.  
    78.     // RENDER CHARTS
    79.     // -----------------------------
    80.     zingchart.loadModules('maps, maps-usa', function() {
    81.       zingchart.render({
    82.         id: 'myChart',
    83.         data: myConfig,
    84.         height: '100%',
    85.         width: '100%'
    86.       });
    87.     });
    88.   </script>
    89. </body>
    90.  
    91. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   ​
    13.   <div id="myChart" class="chart--container">
    14.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    15.   </div>
    16.  
    17. </body>
    18.  
    19. </html>
    1. .chart--container {
    2.   height: 100%;
    3.   width: 100%;
    4.   min-height: 530px;
    5. }
    6.  
    7. .zc-ref {
    8.   display: none;
    9. }
    1. // CHART CONFIG
    2. // -----------------------------
    3. let myConfig = {
    4.   shapes: [{
    5.       type: 'zingchart.maps',
    6.       options: {
    7.         name: 'usa',
    8.         scrolling: false,
    9.         style: {
    10.           label: {
    11.             visible: false
    12.           },
    13.           items: {
    14.             CA: {
    15.               backgroundColor: '#9e9e9e'
    16.             }
    17.           }
    18.         }
    19.       }
    20.     },
    21.     {
    22.       type: 'circle', // shapeid is OPTIONAL but smart if you are targeting events to this shape
    23.       id: 'sd',
    24.       map: 'usa', // assigning to map name or id is necessary
    25.       backgroundColor: '#4dd0e1',
    26.       cursor: 'pointer',
    27.       size: 15,
    28.       target: '_blank', // just like HTMl we have 
    29.       url: 'https://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy', // is how you link url to shapestarget _blank
    30.       x: '-117.1611lon', // hook shape based on lon/lat
    31.       y: '32.7157lat', // hook shape based on lon/lat
    32.       tooltip: {
    33.         text: 'We\'re located right in San Diego!',
    34.         backgroundColor: '#ff9800',
    35.         borderColor: '#333',
    36.         borderRadius: 4,
    37.         fontSize: 16
    38.       }
    39.     }
    40.   ]
    41. };
    42.  
    43. // EVENTS
    44. // -----------------------------
    45. zingchart.bind(null, 'shape_click', function(e) {
    46.   if (e.shapeid === 'sd')
    47.     console.log(e)
    48. });
    49.  
    50. // RENDER CHARTS
    51. // -----------------------------
    52. zingchart.loadModules('maps, maps-usa', function() {
    53.   zingchart.render({
    54.     id: 'myChart',
    55.     data: myConfig,
    56.     height: '100%',
    57.     width: '100%'
    58.   });
    59. });