html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // set stage

    var stage = anychart.graphics.create("container");

​

    var layer = stage.layer();

    // set data

    var data_1 = anychart.data.set([

        {x: "Ice-Cream", value: 5000, fill:"#00FFFF"},

        {x: "Sweets", value: 10000, fill:"#0DD9E6"},

        {x: "Chocolates", value: 19000, fill:"#1AB2CC"},

        {x: "Hot chocolate", value: 16000, fill:"#268CB2"},

        {x: "Cookies", value: 9000, fill:"#336699"}

    ]);

​

    // chart type

    var chart_1 = anychart.column();

    chart_1.width(550);

    chart_1.height(420);

    chart_1.title("Sales");

    chart_1.padding(40, 0, 0, 75);

    var series_1 = chart_1.column(data_1);

    series_1.stroke(null);

​

    // draw

    chart_1.container(layer);

    chart_1.draw();

​

    //buttons

    var container = document.getElementById("container");

    var b1 = document.createElement("button");

    container.appendChild(b1);

    b1.innerHTML = "+";

    b1.style.padding = 0;

​

    b1.style.position = "absolute";

    b1.style.left = "320px";

    b1.style.top = "455px";

    b1.style.width = "30px";

    b1.style.height = "30px";

​

    var ifScaled = false;

​

    b1.onclick = function() {

        if (ifScaled) {

            ifScaled = false;

            layer.scale(0.8333, 0.8333, 0.9, 0.9);

            b1.innerHTML = "+";

        } else {

            b1.innerHTML = "-";

            layer.scale(1.2, 1.2, 0.9, 0.9);

            ifScaled = true;

        }

        stage.suspend();

        stage.resume();

    };

​

​

    // turn right

    var b2 = document.createElement("button");

    container.appendChild(b2);

​

    b2.innerHTML = "Clockwise";

    b2.style.padding = 0;

​

    b2.style.position = "absolute";

    b2.style.left = "355px";

    b2.style.top = "455px";

    b2.style.width = "100px";

    b2.style.height = "30px";

    b2.onclick = function() {

        stage.suspend();

        layer.rotate(90, 325, 250);

        stage.resume();

    };

​

​

    // turn left

    var b3 = document.createElement("button");

    container.appendChild(b3);

    b3.innerHTML = "Counterclockwise";

​

    b3.style.padding = 0;

​

    b3.style.position = "absolute";

    b3.style.left = "195px";

    b3.style.top = "455px";

    b3.style.width = "120px";

    b3.style.height = "30px";

    b3.onclick = function() {

        stage.suspend();

        layer.rotate(-90, 325, 250);

        stage.resume();

    };

​

    // move to the right

    var b4 = document.createElement("button");

    b4.innerHTML = "Right";

​

    container.appendChild(b4);

    b4.style.position = "absolute";

    b4.style.left = "460px";

    b4.style.top = "455px";

    b4.style.width = "60px";

    b4.style.height = "30px";

    b4.style.padding = 0;

​

    b4.onclick = function() {

        stage.suspend();

        layer.translate(5, 0);

        stage.resume();

    };

​

​

    // move to the left

    var b5 = document.createElement("button");

    b5.innerHTML = "Left";

​

    container.appendChild(b5);

​

    b5.style.position = "absolute";

    b5.style.left = "130px";

    b5.style.top = "455px";

    b5.style.width = "60px";

    b5.style.height = "30px";

    b5.style.padding = 0;

​

    b5.onclick = function() {

        stage.suspend();

        layer.translate(-5, 0);

        stage.resume();

    };

});