• Edit
  • Download
    1. <!DOCTYPE html>
    2. <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.     html,
    10.     body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       min-height: 150px;
    19.       width: 100%;
    20.       height: 100%;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body>
    30.   <div id="myChart" class="chart--container">
    31.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    32.   </div>
    33.   <script>
    34.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    35.     let chartData = [{
    36.         values: [
    37.           [1, 15, 8],
    38.           [2, 4, 2],
    39.           [5, 10, 1],
    40.           [6, 3, 3],
    41.           [3, 6, 2],
    42.           [7, 15, 1],
    43.           [8, 2, 4],
    44.           [1, 6, 6],
    45.           [2, 12, 3],
    46.           [4, 4, 4],
    47.           [5, 1, 5],
    48.           [6, 0, 1],
    49.           [8, 16, 2]
    50.         ],
    51.         hoverMarker: {
    52.           backgroundColor: '#d2d9af #b2bf77',
    53.           borderColor: '#a1ae64',
    54.           borderWidth: '1px'
    55.         },
    56.         marker: {
    57.           backgroundColor: '#b2bf77 #829550',
    58.           borderColor: '#728440',
    59.           borderWidth: '1px',
    60.           fillType: 'linear',
    61.           shadow: true
    62.         }
    63.       },
    64.       {
    65.         values: [
    66.           [3, 5, 1],
    67.           [2, 17, 2],
    68.           [8, 8, 3],
    69.           [4, 6, 2],
    70.           [7, 3, 5],
    71.           [2, 12, 1],
    72.           [1, 0, 3],
    73.           [6, 2, 2],
    74.           [4, 12, 7],
    75.           [6, 14, 2],
    76.           [2, 6, 2]
    77.         ],
    78.         hoverMarker: {
    79.           backgroundColor: '#c3c2e3 #9d9ad1',
    80.           borderColor: '#8a87c2',
    81.           borderWidth: '1px'
    82.         },
    83.         marker: {
    84.           backgroundColor: '#9d9ad1 #615faa',
    85.           borderColor: '#514f99',
    86.           borderWidth: '1px',
    87.           fillType: 'linear',
    88.           shadow: true
    89.         }
    90.       },
    91.       {
    92.         values: [
    93.           [3, 6, 5],
    94.           [6, 8, 8],
    95.           [8, 12, 5],
    96.           [3, 2, 3],
    97.           [5, 5, 2],
    98.           [7, 10, 2],
    99.           [2, 1, 1],
    100.           [7, 4, 1],
    101.           [6, 17, 4],
    102.           [1, 9, 3],
    103.           [5, 14, 1]
    104.         ],
    105.         hoverMarker: {
    106.           backgroundColor: '#f9f0c8 #ecd466',
    107.           borderColor: '#d5bc4c',
    108.           borderWidth: '1px'
    109.         },
    110.         marker: {
    111.           backgroundColor: '#ecd466 #e0b140',
    112.           borderColor: '#cb9f34',
    113.           borderWidth: '1px',
    114.           fillType: 'linear',
    115.           shadow: true
    116.         }
    117.       }
    118.     ];
    119.  
    120.     let chartConfig = {
    121.       type: 'bubble',
    122.       title: {
    123.         text: 'Bubble Legend',
    124.       },
    125.       bubbleLegend: {
    126.         layout: 'v',
    127.         marker: {},
    128.         connector: {},
    129.         item: {}
    130.       },
    131.       plotarea: {
    132.         margin: '90px 150px 50px 50px',
    133.         alpha: 0.3,
    134.         backgroundColor: '#fff'
    135.       },
    136.       scaleY: {
    137.         values: '0:20:5'
    138.       },
    139.       tooltip: {
    140.         text: 'Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2',
    141.         textAlign: 'left'
    142.       },
    143.       series: chartData
    144.     };
    145.  
    146.     zingchart.render({
    147.       id: 'myChart',
    148.       data: chartConfig
    149.     });
    150.  
    151.  
    152.     zingchart.loadModules('bubble-legend', function() {
    153.       zingchart.render({
    154.         id: 'myChart',
    155.         data: chartConfig,
    156.         modules: 'bubble-legend'
    157.       });
    158.     });
    159.   </script>
    160. </body>
    161.  
    162. </html>
    1. <!DOCTYPE html>
    2. <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. <body>
    11.   <div id="myChart" class="chart--container">
    12.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    13.   </div>
    14. </body>
    15.  
    16. </html>
    1. html,
    2. body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   min-height: 150px;
    11.   width: 100%;
    12.   height: 100%;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. let chartData = [{
    2.     values: [
    3.       [1, 15, 8],
    4.       [2, 4, 2],
    5.       [5, 10, 1],
    6.       [6, 3, 3],
    7.       [3, 6, 2],
    8.       [7, 15, 1],
    9.       [8, 2, 4],
    10.       [1, 6, 6],
    11.       [2, 12, 3],
    12.       [4, 4, 4],
    13.       [5, 1, 5],
    14.       [6, 0, 1],
    15.       [8, 16, 2]
    16.     ],
    17.     hoverMarker: {
    18.       backgroundColor: '#d2d9af #b2bf77',
    19.       borderColor: '#a1ae64',
    20.       borderWidth: '1px'
    21.     },
    22.     marker: {
    23.       backgroundColor: '#b2bf77 #829550',
    24.       borderColor: '#728440',
    25.       borderWidth: '1px',
    26.       fillType: 'linear',
    27.       shadow: true
    28.     }
    29.   },
    30.   {
    31.     values: [
    32.       [3, 5, 1],
    33.       [2, 17, 2],
    34.       [8, 8, 3],
    35.       [4, 6, 2],
    36.       [7, 3, 5],
    37.       [2, 12, 1],
    38.       [1, 0, 3],
    39.       [6, 2, 2],
    40.       [4, 12, 7],
    41.       [6, 14, 2],
    42.       [2, 6, 2]
    43.     ],
    44.     hoverMarker: {
    45.       backgroundColor: '#c3c2e3 #9d9ad1',
    46.       borderColor: '#8a87c2',
    47.       borderWidth: '1px'
    48.     },
    49.     marker: {
    50.       backgroundColor: '#9d9ad1 #615faa',
    51.       borderColor: '#514f99',
    52.       borderWidth: '1px',
    53.       fillType: 'linear',
    54.       shadow: true
    55.     }
    56.   },
    57.   {
    58.     values: [
    59.       [3, 6, 5],
    60.       [6, 8, 8],
    61.       [8, 12, 5],
    62.       [3, 2, 3],
    63.       [5, 5, 2],
    64.       [7, 10, 2],
    65.       [2, 1, 1],
    66.       [7, 4, 1],
    67.       [6, 17, 4],
    68.       [1, 9, 3],
    69.       [5, 14, 1]
    70.     ],
    71.     hoverMarker: {
    72.       backgroundColor: '#f9f0c8 #ecd466',
    73.       borderColor: '#d5bc4c',
    74.       borderWidth: '1px'
    75.     },
    76.     marker: {
    77.       backgroundColor: '#ecd466 #e0b140',
    78.       borderColor: '#cb9f34',
    79.       borderWidth: '1px',
    80.       fillType: 'linear',
    81.       shadow: true
    82.     }
    83.   }
    84. ];
    85.  
    86. let chartConfig = {
    87.   type: 'bubble',
    88.   title: {
    89.     text: 'Bubble Legend',
    90.   },
    91.   bubbleLegend: {
    92.     layout: 'v',
    93.     marker: {},
    94.     connector: {},
    95.     item: {}
    96.   },
    97.   plotarea: {
    98.     margin: '90px 150px 50px 50px',
    99.     alpha: 0.3,
    100.     backgroundColor: '#fff'
    101.   },
    102.   scaleY: {
    103.     values: '0:20:5'
    104.   },
    105.   tooltip: {
    106.     text: 'Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2',
    107.     textAlign: 'left'
    108.   },
    109.   series: chartData
    110. };
    111.  
    112. zingchart.render({
    113.   id: 'myChart',
    114.   data: chartConfig
    115. });
    116.  
    117.  
    118. zingchart.loadModules('bubble-legend', function() {
    119.   zingchart.render({
    120.     id: 'myChart',
    121.     data: chartConfig,
    122.     modules: 'bubble-legend'
    123.   });
    124. });