Highcharts Demo

Bubble size configuration

by amrutaJgtp

HTML

<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/highcharts-more.js"></script>

<div id="container1"></div>
<div>
  <label>Min lower limit:</label>
  <input id="minlowertextbox" />
  <label>Min upper limit:</label>
  <input id="minuppertextbox" />
  <br>
  <br>
  <label>Max lower limit:</label>
  <input id="maxlowertextbox" />
  <label>Max upper limit:</label>
  <input id="maxuppertextbox" />
</div>
<br>
<br>
<input id="textbox" />
<button id="button">OK</button>

JavaScript

$(function() {
  var chart = Highcharts.chart('container1', {

    "chart": {
      "inverted": false,
      "reflow": false,
      "zoomType": "xy",
      "options3d": {
        "enabled": false
      }
    },
    "title": {
      "text": null
    },
    "plotOptions": {
      "series": {
        "animation": {
          "duration": 700
        },
        "cursor": "pointer",
        "allowPointSelect": true,
        "showInLegend": true,
        "pointPadding": 0.1
      }
    },
    "legend": {
      "enabled": true,
      "item": {},
      "borderWidth": 0,
      "layout": "horizontal",
      "align": "center",
      "verticalAlign": "bottom",
      "margin": 0,
      "padding": 5,
      "symbolRadius": 0
    },
    "credits": {
      "enabled": false
    },
    "exporting": {
      "enabled": false
    },
    "xAxis": {
      "title": {
        "text": "Salary",
        "margin": 5
      },
      "opposite": false,
      "axisInternalName": "0",
      "lineWidth": 1,
      "lineColor": "rgba(174,174,174,1)",
      "tickmarkPlacement": "on",
      "gridLineWidth": 0,
      "gridLineColor": "#C0C0C0",
      "plotLines": [],
      "tickInterval": null
    },
    "yAxis": [{
      "title": {
        "text": "Number Of Records",
        "margin": 5
      },
      "opposite": false,
      "axisInternalName": "0",
      "lineWidth": 0,
      "lineColor": "rgba(174,174,174,1)",
      "allowDecimals": false,
      "reversed": false,
      "gridLineWidth": 0,
      "gridLineColor": "#C0C0C0",
      "maxPadding": 0,
      "minPadding": 0,
      "plotLines": [],
      "plotBands": []
    }],
    "scrollbar": {
      "enabled": false
    },
    "series": [{
      "type": "bubble",
      "minSize": "8%",
      "maxSize": "20%",
      "internalName": "NUMBER_OF_RECORDS",
      "yAxis": 0,
      "data": [{
        "eQCategoryValue": 9200,
        "x": 9200,
        "y": 1,
        z: 0
      }, {
        "eQCategoryValue": 30000,
        "x": 30000,
        "y": 1,
       ...