html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a chart

    var chart = anychart.marker();

​

    // create series, set the data and names

    chart.marker([[1,1],[1,1],[5,4],[10,1]]).name("Drug 1");

    chart.marker([[2,3],[1,5],[7,3],[13,6]]).name("Drug 2");

    chart.marker([[2,1],[1,2],[3,3],[8,1]]).name("Placebo");

​

    // enable major grids

    chart.xGrid(true);

    chart.yGrid(true);

​

    // enable minor grids

    chart.xMinorGrid(true);

    chart.yMinorGrid(true);

​

    // enable the legend

    var legend = chart.legend();

    legend.enabled(true);

​

    // set the position mode of the legend

    legend.positionMode("inside");

​

    // set the padding of the legend

    legend.padding(35);

​

    // configure the background of the legend

    legend.background().enabled(true);

    legend.background().fill("white");

    legend.background().stroke("3 #96a6a6");

​

    // enable the drag-and-drop mode of the legend

    legend.drag(true);

​

    /* listen to the dragStart event

    and configure the background of the chart */

    legend.listen("drag", function() {

      chart.background().fill("#96a6a6 0.2");

    });

​

    /* listen to the dragEnd event

    and reset the background of the chart */

    legend.listen("dragEnd", function() {

      chart.background().fill("white");

    });    

​

    // set the chart title

    chart.title().useHtml(true);

    chart.title("Events: Legend<br><br>" +

                "<span style='font-size:12; font-style:italic'>" +

                "Drag the Legend");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});