html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

anychart.onDocumentReady(function () {

​

    // set stage

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

​

    layer = stage.layer();

    // set data

    var data_1 = [

      {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();

});

​

var ifScaled = false;

​

// zoom in and out

function zoom() {

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

  if (ifScaled) {

    ifScaled = false;

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

    zoomButton.innerHTML = "+";

  } else {

    zoomButton.innerHTML = "-";

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

    ifScaled = true;

  }

  stage.suspend();

  stage.resume();

};

​

// move left

function left() {

  stage.suspend();

  layer.translate(-5, 0);

  stage.resume();

};

​

// move right

function right() {

  stage.suspend();

  layer.translate(5, 0);

  stage.resume();

};

​

// turn clockwise

function clockwise() {

  stage.suspend();

  layer.rotate(90, 325, 250);

  stage.resume();

};

​

// turn counterclockwise

function counterclockwise() {

  stage.suspend();

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

  stage.resume();

};