html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  var chart = anychart.line();

​

  chart.title("Extra Axes Units Comparison Sample");

​

  // setting xScale settings

  chart.xScale(anychart.scales.linear());

  var xScale = chart.xScale();

  xScale.minimum(1940);

  xScale.maximum(2010);

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

  xTicks.interval(5);

​

  // setting yScale settings

  var yScale = chart.yScale();

  yScale.minimum(0);

  yScale.maximum(12000000000000);

  var yScaleTicks = chart.yScale().ticks();

  yScaleTicks.interval(2000000000000);

​

  // adding and adjusting extra Y scale

  var extraYScale = anychart.scales.linear();

  extraYScale.minimum(0);

  extraYScale.maximum(140);

  var extraYScaleTicks = extraYScale.ticks();

  extraYScaleTicks.interval(20);

​

  // adding and adjusting extra Y axis

  var extraYAxis = chart.yAxis(1);

  extraYAxis.orientation("right");

  extraYAxis.scale(extraYScale);

​

  // setting yAxes titles

  var yAxis = chart.yAxis(0);

  yAxis.title("Debt");

  extraYAxis.title("GDP");

​

  // yAxes labels text adjusting

  var yLabels = chart.yAxis(0).labels();

  yLabels.format(function(){

    var value = (this.value/1000000000000);

    if (value > 0)

      value = (this.value/1000000000000) + " 000 bil.";

    return "$" + value;

  });

  var yLabels1 = chart.yAxis(1).labels();

  yLabels1.format(function(){

    return this.value + "%";

  });

​

  // disable x axis title

  var xAxis = chart.xAxis();

  xAxis.title(false);

​

  // enabling x axis stagger mode

  xAxis.staggerMode(true);

​

  // settings for labels of x axis

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

  xLabels.width(50);

  xLabels.hAlign("center");

​

  // disable minorGrid

  chart.minorGrid(null);

​

  // setting first series of data

  var firstSeries = anychart.data.set([

    [1940, 52.4],

    [1941, 50.5],

    [1942, 54.9],

    [1943, 79.2],

    [1944, 97.6],

    [1945, 117.5],

    [1946, 121.7],

    [1947, 109.6],

    [1948, 98.3],

    [1949, 93],

    [1950, 93.9],

    [1951, 79.5],

    [1952, 74.3],

    [1953, 71.2],

    [1954, 71.6],

    [1955, 69.4],

    [1956, 63.8],

    [1957, 60.4],

    [1958, 60.7],

    [1959, 58.4],

    [1960, 56],

    [1961, 55],

    [1962, 53.3],

    [1963, 51.7],

    [1964, 49.3],

    [1965, 46.9],

    [1966, 43.6],

    [1967, 41.8],

    [1968, 42.5],

    [1969, 38.5],

    [1970, 37.6],

    [1971, 37.7],

    [1972, 36.9],

    [1973, 35.6],

    [1974, 33.6],

    [1975, 34.7],

    [1976, 36.2],

    [1977, 35.8],

    [1978, 35],

    [1979, 33.1],

    [1980, 33.3],

    [1981, 32.5],

    [1982, 35.2],

    [1983, 39.9],

    [1984, 40.8],

    [1985, 43.9],

    [1986, 48.2],

    [1987, 50.5],

    [1988, 51.9],

    [1989, 53.1],

    [1990, 55.9],

    [1991, 60.7],

    [1992, 64.4],

    [1993, 66.3],

    [1994, 66.9],

    [1995, 67.2],

    [1996, 67.3],

    [1997, 65.6],

    [1998, 63.5],

    [1999, 61.4],

    [2000, 58],

    [2001, 57.4],

    [2002, 59.7],

    [2003, 62.4],

    [2004, 63.7],

    [2005, 65.7],

    [2006, 67.5],

    [2007, 68.7],

    [2008, 69.3],

    [2009, 69.8],

    [2010, 70]

  ]);

​

  // setting second series of data

  var secondSeries = anychart.data.set([

    [1940, 45500000000],

    [1941, 56500000000],

    [1942, 100000000000],

    [1943, 170000000000],

    [1944, 216500000000],

    [1945, 263535000000],

    [1946, 262600000000],

    [1947, 257900000000],

    [1948, 252563000000],

    [1949, 257037000000],

    [1950, 257357352351],

    [1951, 255221976815],

    [1952, 259105178785],

    [1953, 275168120129],

    [1954, 278749814391],

    [1955, 280768553189],

    [1956, 276627527996],

    [1957, 274897784291],

    [1958, 282922423583],

    [1959, 290797771718],

    [1960, 310000000000],

    [1961, 296168761214],

    [1962, 303470080489],

    [1963, 309346845059],

    [1964, 317940472718],

    [1965, 320904110042],

    [1966, 329319249366],

    [1967, 344663009745],

    [1968, 358028625002],

    [1969, 368225581254],

    [1970, 389158403690],

    [1971, 424130961959],

    [1972, 449298066119],

    [1973, 469898039554],

    [1974, 492665000000],

    [1975, 576649000000],

    [1976, 653544000000],

    [1977, 718943000000],

    [1978, 789207000000],

    [1979, 845116000000],

    [1980, 930210000000],

    [1981, 1028729000000],

    [1982, 1197073000000],

    [1983, 1410702000000],

    [1984, 1662966000000],

    [1985, 1945941616459],

    [1986, 2125302616658],

    [1987, 2350276890953],

    [1988, 2602337712041],

    [1989, 2857430960187],

    [1990, 3233313451777],

    [1991, 3665303351697],

    [1992, 4064620655521],

    [1993, 4411488883139],

    [1994, 4692749910013],

    [1995, 4973982900709],

    [1996, 5224810939135],

    [1997, 5413146011397],

    [1998, 5526193008897],

    [1999, 5605523901615],

    [2000, 5674178209887],

    [2001, 5807463412200],

    [2002, 6228235965597],

    [2003, 6783231062743],

    [2004, 7379052696330],

    [2005, 7932709661723],

    [2006, 8506973899215],

    { x: 2007, value: 9350102000000, fill: "#FFF", hoverFill: "#FFF", stroke: "#000", hoverStroke: "#000"},

    { x: 2008, value: 9948640000000, fill: "#FFF", hoverFill: "#FFF", stroke: "#000", hoverStroke: "#000"},

    { x: 2009, value: 10543521000000, fill: "#FFF", hoverFill: "#FFF", stroke: "#000", hoverStroke: "#000"},

    { x: 2010, value: 11137297000000, fill: "#FFF", hoverFill: "#FFF", stroke: "#000", hoverStroke: "#000"}

  ]);

​

  // adjusting data visualisation

  var lineSeries = chart.line(firstSeries);

  lineSeries.stroke("#00F");

  lineSeries.hoverStroke("#00F");

  lineSeries.yScale(extraYScale);

​

  var columnSeries = chart.column(secondSeries);

  columnSeries.fill(["#FF0000", "#880000"], -90);

  columnSeries.stroke("#000", 1);

  columnSeries.hoverStroke("#FFF", 1);

  columnSeries.hoverFill(["#FF0000", "#880000"], -90);

​

  var tooltip = chart.tooltip();

  tooltip.titleFormat(function(){

    return "Year: " + this.points[0].x;

  });

  tooltip.unionFormat(function(){

    var gdp = "GDP - " + this.points[0].value + "%";

    var debt = (this.points[1].value / 1000000000).toFixed(0);

    if (debt > 999)

      debt = ("" + debt/1000).replace(".", " ");

    return gdp + "\nDebt - $" + debt + " bil." ;

  });

​

  chart.container("container");

  chart.draw();

});