html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create data

  var data = [

    {x: 10, value: 40, size: 7},

    {x: 40, value: 70, size: 14},

    {x: 60, value: 25, size: 9},

    {x: 70, value: 50, size: 18},

    {x: 85, value: 80, size: 2}

  ];

​

  // create a chart

  var chart = anychart.scatter();

​

  // adjust scale min/max

  chart.xScale().minimum(0).maximum(90);

  chart.yScale().minimum(0).maximum(90);

​

  // divide scale by three ticks

  chart.xScale().ticks().interval(30);

  chart.yScale().ticks().interval(30);

​

  // create a bubble series and set the data

  var series = chart.bubble(data);

​

  // enable major grids

  chart.xGrid().enabled(true).stroke('3 blue');

  chart.yGrid().enabled(true).stroke('3 blue');

​

  // create labels

  chart.label(0).text('division 1').offsetX(50).offsetY(50);

  chart.label(2).text('division 2').offsetX('37%').offsetY(50);

  chart.label(3).text('division 3').offsetX('69%').offsetY(50);

​

  chart.label(4).text('division 4').offsetX(50).offsetY('37%');

  chart.label(5).text('division 5').offsetX('37%').offsetY('37%');

  chart.label(6).text('division 6').offsetX('69%').offsetY('37%');

​

  chart.label(7).text('division 7').offsetX(50).offsetY('67%');

  chart.label(8).text('division 8').offsetX('37%').offsetY('67%');

  chart.label(9).text('division 9').offsetX('69%').offsetY('67%');

​

  // set the chart title

  chart.title("Quadrant-like Scatter Bubble Chart");    

​

  // set the container id

  chart.container("container").draw();

});