html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // create stage for all charts

  var stage = acgraph.create("container");

​

  var pie = anychart.pie([

{"name":" Iron Hills - Dwarves", "value": 513, fill: {color:"Rgb(70,100,70)"}},

{"name":"Mirkwood - Elves", "value": 1015, fill: {color:"Rgb(77,180,77)"}},

{"name":"Esgaroth - Men", "value": 2709, fill: {color:"Rgb(77,150,77)"}},

{"name":"Orcs", "value": 6232, fill: {color:"Rgb(190,30,27)"}},

{"name":"Wargs", "value": 4707, fill: {color:"Rgb(190,30,47)"}},

    ]);

​

    // set chart title text settings

  pie.title().text("The Main Armed Forces").padding(0).height(0).margin(0).fontSize(10);

​

  // disabling legend title and title separator

  pie.legend().enabled(false);

  pie.bounds(0, 0, "20%", "50%");

  pie.container(stage);

  pie.margin(-10, -10, -10, -10);

  pie.draw();

    var column = anychart.column();

​

    // set title

    column.title().text("The Forces Of Light").padding(2).margin(5);

​

    // set axes titles

    column.xAxis().title().text("Military Unit").fontSize(10).padding(0).height(2);

    column.yAxis().title().text("Amount").fontSize(10).padding(0).height(0).margin(0);

​

    // set scale minimum

    column.yScale().minimum(0);

​

    // set data

    var series = column.column([

{"x": "Men of Esgaroth", value: 2709, stroke:{color:"#CD7F32", thickness:"2"}},

{"x": "Eagles", value: 1067, stroke:{color:"#157DEC", thickness:"2"}},

{"x": "Elves", value: 1015, stroke:{color:"#008000", thickness:"2"}},

{"x": "Dwarves Of The Iron Hills", value: "500", stroke:{color:"#808080", thickness:"2"}},

{"x": "Thirteen Lions of Erebor", value: 13, stroke:{color:"#C0C0C0", thickness:"2"}},

{"x": "Beorn", value: 1, marker:{type:"star5", fill:"gold", size: 6, enabled: true}},

{"x": "Gandalf the Grey", fill:{color:"#726E6D"}, value: 1, marker:{type:"star5", fill:"#FDD017", size: 9, enabled: true}, hoverMarker: {size: 12}},

{"x":"Bilbo Baggins", value: 1, marker:{type:"star5", fill:"#EAC117", size: 6, enabled: true}}

    ]);

    column.xAxis().staggerMode(true);

    column.yScale(anychart.scales.log());

    column.bounds("0%", "50%", "100%", "50%");

    column.container(stage);

    column.margin(-10, -10, -10, -10);

    column.draw();

    var scatterChart  = anychart.scatterChart();

​

    // set title

    scatterChart.title().text("Key Points Of The Battle").padding(0).margin(0);

​

    // draw axes and set titles

    scatterChart.xAxis().title().text("The Battle Duration (Minutes)").fontSize(10).padding(0).height(0);

    scatterChart.yAxis().title().text("Enemies Amount").fontSize(10).padding(0).height(0).margin(0);

​

    // draw grid

    scatterChart.grid().layout("horizontal");

​

    // draw minor grid and adjust

    scatterChart.minorGrid()

.evenFill("none")

.oddFill("none")

.stroke("black 0.075")

.layout("vertical");

​

    // data

    data = anychart.data.set([

{x: "147", value: 10005, point:"Appearance Of The Eagles"},

{x: "170", value: 9000, point:"Thorin Makes Blade Rush"},

{x: "236", value: 5011, point:"Gandalf's Mighty Fireball"},

{x: "277", value: 237, point:"Thranduil's Powerful Attack"}

    ]);

    var view = data.mapAs();

    // set data

    var scatterSeries = scatterChart.line(data);

    scatterSeries.tooltip().enabled(false);

    scatterSeries.labels().enabled(true).fontSize(9).format(function(){

return view.get(

    this.index, "point"

  )});

​

    // set color

    scatterSeries.fill("#C6D1A5");

    scatterChart.bounds("20%", "0%", "80%", "50%");

    scatterChart.container(stage);

    scatterChart.margin(-10, -15, -10, -15);

    scatterChart.draw();

​

});