html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // create a data set

    var data = anychart.data.set([

      ["John", 10000],

      ["Jake", 12000],

      ["Peter", 13000],

      ["James", 10000],

      ["Mary", 9000]

    ]);

​

    // set the chart type

    var chart = anychart.line();

​

    // create a series, set the data and name

    var series = chart.column(data);

    series.name("Sales");

​

    // set the chart title

    chart.title("Events");

​

    // set the titles of the axes

    var xAxis = chart.xAxis();

    xAxis.title("Manager");

    var yAxis = chart.yAxis();

    yAxis.title("Sales, $");

​

    // create an event listener for hovering the chart

    chart.listen("mouseOver", function(e){

      // change the cursor style on hovering the chart

      document.body.style.cursor = "pointer";

    });

​

    // create an event listener for unhovering the chart

    chart.listen("mouseOut", function(e){

      // set the default cursor style on unhovering the chart

      document.body.style.cursor = "auto";

    });

    // create an event listener for hovering points

    chart.listen("pointsHover", function(e){

      // get the category the hovered points belong to

      var name = e.point.getStat("categoryName");

      // change the chart title on hovering points

      chart.title(name);

    });

​

    // create an event listener for selecting points

    chart.listen("pointsSelect", function(e){

      // get the value of the selected points

      var value = e.point.getStat("value");

      // change the chart title on selecting points

      chart.title("$" + value);

    });

​

    // create an event listener for double-clicking a point

    chart.listen("pointDblClick", function(e){

      // get the category the double-clicked point belongs to

      var name = e.point.getStat("categoryName");

      // get the value of the double-clicked point

      var value = e.point.getStat("value");

      // change the chart title on double-clicking a point

      chart.title(name + ": $" + value);

    });

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});