• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
        }
    
        .chart--container {
          min-height: 150px;
          width: 100%;
          height: 100%;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartData = [{
            values: [
              [1, 15, 8],
              [2, 4, 2],
              [5, 10, 1],
              [6, 3, 3],
              [3, 6, 2],
              [7, 15, 1],
              [8, 2, 4],
              [1, 6, 6],
              [2, 12, 3],
              [4, 4, 4],
              [5, 1, 5],
              [6, 0, 1],
              [8, 16, 2]
            ],
            hoverMarker: {
              backgroundColor: '#d2d9af #b2bf77',
              borderColor: '#a1ae64',
              borderWidth: '1px'
            },
            marker: {
              backgroundColor: '#b2bf77 #829550',
              borderColor: '#728440',
              borderWidth: '1px',
              fillType: 'linear',
              shadow: true
            }
          },
          {
            values: [
              [3, 5, 1],
              [2, 17, 2],
              [8, 8, 3],
              [4, 6, 2],
              [7, 3, 5],
              [2, 12, 1],
              [1, 0, 3],
              [6, 2, 2],
              [4, 12, 7],
              [6, 14, 2],
              [2, 6, 2]
            ],
            hoverMarker: {
              backgroundColor: '#c3c2e3 #9d9ad1',
              borderColor: '#8a87c2',
              borderWidth: '1px'
            },
            marker: {
              backgroundColor: '#9d9ad1 #615faa',
              borderColor: '#514f99',
              borderWidth: '1px',
              fillType: 'linear',
              shadow: true
            }
          },
          {
            values: [
              [3, 6, 5],
              [6, 8, 8],
              [8, 12, 5],
              [3, 2, 3],
              [5, 5, 2],
              [7, 10, 2],
              [2, 1, 1],
              [7, 4, 1],
              [6, 17, 4],
              [1, 9, 3],
              [5, 14, 1]
            ],
            hoverMarker: {
              backgroundColor: '#f9f0c8 #ecd466',
              borderColor: '#d5bc4c',
              borderWidth: '1px'
            },
            marker: {
              backgroundColor: '#ecd466 #e0b140',
              borderColor: '#cb9f34',
              borderWidth: '1px',
              fillType: 'linear',
              shadow: true
            }
          }
        ];
    
        let chartConfig = {
          type: 'bubble',
          title: {
            text: 'Bubble Legend',
          },
          bubbleLegend: {
            layout: 'v',
            marker: {},
            connector: {},
            item: {}
          },
          plotarea: {
            margin: '90px 150px 50px 50px',
            alpha: 0.3,
            backgroundColor: '#fff'
          },
          scaleY: {
            values: '0:20:5'
          },
          tooltip: {
            text: 'Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2',
            textAlign: 'left'
          },
          series: chartData
        };
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig
        });
    
    
        zingchart.loadModules('bubble-legend', function() {
          zingchart.render({
            id: 'myChart',
            data: chartConfig,
            modules: 'bubble-legend'
          });
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
    </body>
    
    </html>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    let chartData = [{
        values: [
          [1, 15, 8],
          [2, 4, 2],
          [5, 10, 1],
          [6, 3, 3],
          [3, 6, 2],
          [7, 15, 1],
          [8, 2, 4],
          [1, 6, 6],
          [2, 12, 3],
          [4, 4, 4],
          [5, 1, 5],
          [6, 0, 1],
          [8, 16, 2]
        ],
        hoverMarker: {
          backgroundColor: '#d2d9af #b2bf77',
          borderColor: '#a1ae64',
          borderWidth: '1px'
        },
        marker: {
          backgroundColor: '#b2bf77 #829550',
          borderColor: '#728440',
          borderWidth: '1px',
          fillType: 'linear',
          shadow: true
        }
      },
      {
        values: [
          [3, 5, 1],
          [2, 17, 2],
          [8, 8, 3],
          [4, 6, 2],
          [7, 3, 5],
          [2, 12, 1],
          [1, 0, 3],
          [6, 2, 2],
          [4, 12, 7],
          [6, 14, 2],
          [2, 6, 2]
        ],
        hoverMarker: {
          backgroundColor: '#c3c2e3 #9d9ad1',
          borderColor: '#8a87c2',
          borderWidth: '1px'
        },
        marker: {
          backgroundColor: '#9d9ad1 #615faa',
          borderColor: '#514f99',
          borderWidth: '1px',
          fillType: 'linear',
          shadow: true
        }
      },
      {
        values: [
          [3, 6, 5],
          [6, 8, 8],
          [8, 12, 5],
          [3, 2, 3],
          [5, 5, 2],
          [7, 10, 2],
          [2, 1, 1],
          [7, 4, 1],
          [6, 17, 4],
          [1, 9, 3],
          [5, 14, 1]
        ],
        hoverMarker: {
          backgroundColor: '#f9f0c8 #ecd466',
          borderColor: '#d5bc4c',
          borderWidth: '1px'
        },
        marker: {
          backgroundColor: '#ecd466 #e0b140',
          borderColor: '#cb9f34',
          borderWidth: '1px',
          fillType: 'linear',
          shadow: true
        }
      }
    ];
    
    let chartConfig = {
      type: 'bubble',
      title: {
        text: 'Bubble Legend',
      },
      bubbleLegend: {
        layout: 'v',
        marker: {},
        connector: {},
        item: {}
      },
      plotarea: {
        margin: '90px 150px 50px 50px',
        alpha: 0.3,
        backgroundColor: '#fff'
      },
      scaleY: {
        values: '0:20:5'
      },
      tooltip: {
        text: 'Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2',
        textAlign: 'left'
      },
      series: chartData
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig
    });
    
    
    zingchart.loadModules('bubble-legend', function() {
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        modules: 'bubble-legend'
      });
    });