html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create a chart

  var chart = anychart.cartesian();

​

  chart.title("Monthly Iranian crude oil production");

​

  // crosshair settings

  var crosshair = chart.crosshair();

  // enable crosshair

  crosshair.enabled(true);

  // set custom function for formatting x crossshair label

  var xCrossLabel = crosshair.xLabel();

  xCrossLabel.format(function() {

    // get label data

    var date = new Date(this.rawValue);

    // get month from date

    var month = date.toLocaleDateString("en-US", {month: "long"});

    // get day from date

    var day = date.toLocaleDateString("en-US", {day: "numeric"});

    // get year from date

    var year = date.toLocaleDateString("en-US", {year: "numeric"});

    // format label content

    return month + " " + day + ", " + year;

  });

  // set custom function for formatting y crossshair label

  var yCrossLabel = crosshair.yLabel();

  yCrossLabel.enabled(false);

​

  crosshair.yStroke(null);

​

  var xScale = anychart.scales.dateTime();

  chart.xScale(xScale);

  xScale.minimum(Date.UTC(2011, 0, 1));

  xScale.maximum(Date.UTC(2018, 1, 1));

  var xTicks = chart.xScale().ticks();

  xTicks.interval(0,4);

  var xLabels = chart.xAxis().labels();

  xLabels.format(function() {

    var date = new Date(this["tickValue"]);

    var options = {month: "short", year: "numeric"};

    return date.toLocaleDateString("en-US", options);

  });

​

  var yScale = chart.yScale();

  yScale.minimum(0);

​

  chart.xScroller(true);

  var xZoom = chart.xZoom();

  xZoom.setToValues(Date.UTC(2014, 0, 1), Date.UTC(2018, 1, 1));

​

   // set series data

   var series = chart.line([

     {x: Date.UTC(2011, 0, 01), value: 3.7},

     {x: Date.UTC(2011, 1, 01), value: 3.7},

     {x: Date.UTC(2011, 2, 01), value: 3.7},

     {x: Date.UTC(2011, 3, 01), value: 3.6},

     {x: Date.UTC(2011, 4, 01), value: 3.6},

     {x: Date.UTC(2011, 5, 01), value: 3.5},

     {x: Date.UTC(2011, 6, 01), value: 3.4},

     {x: Date.UTC(2011, 7, 01), value: 3.4},

     {x: Date.UTC(2011, 8, 01), value: 3.5},

     {x: Date.UTC(2011, 9, 01), value: 3.3},

     {x: Date.UTC(2011, 10, 01), value: 3.3},

     {x: Date.UTC(2011, 11, 01), value: 3.2},

     {x: Date.UTC(2012, 0, 01), value: 3.2},

     {x: Date.UTC(2012, 1, 01), value: 3.2},

     {x: Date.UTC(2012, 2, 01), value: 3.1},

     {x: Date.UTC(2012, 3, 01), value: 3.1},

     {x: Date.UTC(2012, 4, 01), value: 3.1},

     {x: Date.UTC(2012, 5, 01), value: 3.0},

     {x: Date.UTC(2012, 6, 01), value: 3.0},

     {x: Date.UTC(2012, 7, 01), value: 2.9},

     {x: Date.UTC(2012, 8, 01), value: 2.9},

     {x: Date.UTC(2012, 9, 01), value: 2.8},

     {x: Date.UTC(2012, 10, 01), value: 2.7},

     {x: Date.UTC(2012, 11, 01), value: 2.7},

     {x: Date.UTC(2013, 0, 01), value: 2.6},

     {x: Date.UTC(2013, 1, 01), value: 2.6},

     {x: Date.UTC(2013, 2, 01), value: 2.7},

     {x: Date.UTC(2013, 3, 01), value: 2.7},

     {x: Date.UTC(2013, 4, 01), value: 2.7},

     {x: Date.UTC(2013, 5, 01), value: 2.7},

     {x: Date.UTC(2013, 6, 01), value: 2.7},

     {x: Date.UTC(2013, 7, 01), value: 2.7},

     {x: Date.UTC(2013, 8, 01), value: 2.7},

     {x: Date.UTC(2013, 9, 01), value: 2.7},

     {x: Date.UTC(2013, 10, 01), value: 2.7},

     {x: Date.UTC(2013, 11, 01), value: 2.7},

     {x: Date.UTC(2014, 0, 01), value: 2.7},

     {x: Date.UTC(2014, 1, 01), value: 2.75},

     {x: Date.UTC(2014, 2, 01), value: 2.8},

     {x: Date.UTC(2014, 3, 01), value: 2.85},

     {x: Date.UTC(2014, 4, 01), value: 2.9},

     {x: Date.UTC(2014, 5, 01), value: 2.9},

     {x: Date.UTC(2014, 6, 01), value: 2.9},

     {x: Date.UTC(2014, 7, 01), value: 2.9},

     {x: Date.UTC(2014, 8, 01), value: 2.9},

     {x: Date.UTC(2014, 9, 01), value: 2.9},

     {x: Date.UTC(2014, 10, 01), value: 2.9},

     {x: Date.UTC(2014, 11, 01), value: 2.9},

     {x: Date.UTC(2015, 0, 01), value: 2.9},

     {x: Date.UTC(2015, 1, 01), value: 2.9},

     {x: Date.UTC(2015, 2, 01), value: 2.9},

     {x: Date.UTC(2015, 3, 01), value: 2.9},

     {x: Date.UTC(2015, 4, 01), value: 2.9},

     {x: Date.UTC(2015, 5, 01), value: 2.9},

     {x: Date.UTC(2015, 6, 01), value: 2.9},

     {x: Date.UTC(2015, 7, 01), value: 2.9},

     {x: Date.UTC(2015, 8, 01), value: 2.9},

     {x: Date.UTC(2015, 9, 01), value: 2.9},

     {x: Date.UTC(2015, 10, 01), value: 2.9},

     {x: Date.UTC(2015, 11, 01), value: 2.9},

     {x: Date.UTC(2016, 0, 01), value: 2.9},

     {x: Date.UTC(2016, 1, 01), value: 2.9, valueError: "0.5%"},

     {x: Date.UTC(2016, 2, 01), value: 2.9, valueError: "0.5%"},

     {x: Date.UTC(2016, 3, 01), value: 2.95, valueError: "1%"},

     {x: Date.UTC(2016, 4, 01), value: 3.0, valueError: "1%"},

     {x: Date.UTC(2016, 5, 01), value: 3.0, valueError: "1%"},

     {x: Date.UTC(2016, 6, 01), value: 3.05, valueError: "1.5%"},

     {x: Date.UTC(2016, 7, 01), value: 3.1, valueError: "1.5%"},

     {x: Date.UTC(2016, 8, 01), value: 3.1, valueError: "1.5%"},

     {x: Date.UTC(2016, 9, 01), value: 3.1, valueError: "1.5%"},

     {x: Date.UTC(2016, 10, 01), value: 3.1, valueError: "2%"},

     {x: Date.UTC(2016, 11, 01), value: 3.2, valueError: "2%"},

     {x: Date.UTC(2017, 0, 01), value: 3.25, valueError: "2%"},

     {x: Date.UTC(2017, 1, 01), value: 3.3, valueError: "2.5%"},

     {x: Date.UTC(2017, 2, 01), value: 3.35, valueError: "2.5%"},

     {x: Date.UTC(2017, 3, 01), value: 3.375, valueError: "2.5%"},

     {x: Date.UTC(2017, 4, 01), value: 3.4, valueError: "3%"},

     {x: Date.UTC(2017, 5, 01), value: 3.425, valueError: "3.5%"},

     {x: Date.UTC(2017, 6, 01), value: 3.45, valueError: "3.5%"},

     {x: Date.UTC(2017, 7, 01), value: 3.475, valueError: "3.5%"},

     {x: Date.UTC(2017, 8, 01), value: 3.5, valueError: "4%"},

     {x: Date.UTC(2017, 9, 01), value: 3.525, valueError: "4%"},

     {x: Date.UTC(2017, 10, 01), value: 3.55, valueError: "5%"},

     {x: Date.UTC(2017, 11, 01), value: 3.575, valueError: "4.5%"},

     {x: Date.UTC(2018, 0, 01), value: 3.6, valueError: "5%"}

   ]);

​

  series.name("Crude oil forecast and range of uncertainty");

​

  series.tooltip().title(false).separator(false).format(function() {

    var value = this.value.toFixed(3);

    if (this.valueLowerError !==0)

      value = this.value.toFixed(3) + "\u00B1" + this.valueLowerError.toFixed(3);

    return "Date: " + new Date(this.x).toLocaleDateString("en-US", {month: "short", year: "numeric"}) + "\n" + value + " million barrels per day";

  });

​

  var hoverMarkers = series.hovered().markers();

  hoverMarkers.size(3);

​

  chart.interactivity("by-x");

​

  var nearFuture = chart.lineMarker();

  nearFuture.value(Date.UTC(2016, 1, 01));

  nearFuture.layout("vertical");

  nearFuture.scale(chart.xScale());

​

  var future = chart.lineMarker(1);

  future.value(Date.UTC(2017, 1, 01));

  future.axis(chart.xAxis());

​

  var text = chart.textMarker(0);

  text.value(Date.UTC(2016, 1, 01));

  text.axis(chart.xAxis());

  text.text("Near Future");

  text.align("top");

  text.anchor("left-top");

  text.offsetX(3);

  text.rotation(0);

​

  var futureText = chart.textMarker(1);

  futureText.value(Date.UTC(2017, 1, 01));

  futureText.axis(chart.xAxis());

  futureText.text("Future");

  futureText.align("top");

  futureText.anchor("left-top");

  futureText.offsetX(3);

  futureText.rotation(0);

​

  chart.legend(true);

​

  chart.margin().right(50);

​

  // draw chart

  chart.container("container");

  chart.draw();

});