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("The Main Armed Forces");

​

    // disabling legend title and title separator

    pie.legend().enabled(false);

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

    pie.container(stage);

    pie.draw();

​

    var column = anychart.column();

​

    // set title

    column.title("The Forces Of Light");

​

    // set axes titles

    column.xAxis().title("Military Unit");

    column.yAxis().title("Amount");

​

    // 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.draw();

    var scatterChart  = anychart.scatterChart();

​

    // set title

    scatterChart.title("Key Events Of The Battle");

​

    // draw axes and set titles

    scatterChart.xAxis("The Battle Duration (Minutes)");

    scatterChart.yAxis("Enemies Amount");

​

    // draw grid

    scatterChart.yGrid(true);

​

    // draw minor grid and adjust

    scatterChart.yMinorGrid(true);

    scatterChart.yMinorGrid().stroke("black 0.075")

​

    // data

    data = [

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

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

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

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

    ];

    scatterChart.line(data);

    scatterChart.labels().enabled(true);

    scatterChart.labels().format("{%event}");

​

    // set color

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

    scatterChart.container(stage);

    scatterChart.draw();

​

});