html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create data

  var data1 = [

    {x: 2000, value: 1100, size: 3},

    {x: 2001, value: 800, size: 3},

    {x: 2002, value: 1100, size: 3},

    {x: 2003, value: 1500, size: 2},

    {x: 2004, value: 921, size: 4},

    {x: 2005, value: 1000, size: 3},

    {x: 2006, value: 1400, size: 2}

  ];

​

  var data2 = [

    {x: 2000, value: 900, size: 1},

    {x: 2001, value: 950, size: 4},

    {x: 2002, value: 800, size: 2},

    {x: 2003, value: 1000, size: 3},

    {x: 2004, value: 800, size: 3},

    {x: 2005, value: 750, size: 1},

    {x: 2006, value: 800, size: 2}

  ];

​

  // create a chart

  var chart = anychart.cartesian();

​

  // set the interactivity mode

  chart.interactivity().hoverMode("by-x");

​

  // create the first series and set the data

  var series1 = chart.bubble(data1);

​

  // configure the visual settings of the first series

  series1.normal().fill("#00cc99", 0.3);

  series1.hovered().fill("#00cc99", 0.1);

  series1.selected().fill("#00cc99", 0.5);

  series1.normal().stroke("#00cc99", 1, "10 5", "round");

  series1.hovered().stroke("#00cc99", 2, "10 5", "round");

  series1.selected().stroke("#00cc99", 4, "10 5", "round");

​

  // create the second series and set the data

  var series2 = chart.bubble(data2);

​

  // configure the visual settings of the second series

  series2.normal().fill("#0066cc", 0.3);

  series2.hovered().fill("#0066cc", 0.1);

  series2.selected().fill("#0066cc", 0.5);

  series2.normal().hatchFill("percent30", "#0066cc", 1, 15);

  series2.hovered().hatchFill("percent30", "#0066cc", 1, 15);

  series2.selected().hatchFill("percent30", "#0066cc", 1, 15);

  series2.normal().stroke("#0066cc");

  series2.hovered().stroke("#0066cc", 2);

  series2.selected().stroke("#0066cc", 4);

​

  // enable the legend

  chart.legend(true);

  // set the chart title

  chart.title("Bubble Chart: Appearance");

​

  // set the titles of the axes

  chart.xAxis().title("Year");

  chart.yAxis().title("Sales, $");

​

  // set the container id

  chart.container("container");

​

  // initiate drawing the chart

  chart.draw();

});