html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

  var json = {

    // chart settings

    "chart": {

      // chart type

      "type": "column",

      // chart title

      "title": "JSON Visual Settings",

      // series settings

      "series": [{

// series data

"data": [

  {"x": "P1", "value": "128.14"},

  {"x": "P2", "value": "112.61"},

  {"x": "P3", "value": "163.21"},

  {"x": "P4", "value": "229.98"},

  {"x": "P5", "value": "90.54"},

  {"x": "P6", "value": "104.19"},

  {"x": "P7", "value": "150.67"},

  {"x": "P8", "value": "120.43"},

  {"x": "P9", "value": "143.76"},

  {"x": "P10", "value": "191.34"},

  {"x": "P11", "value": "134.17"},

  {"x": "P12", "value": "145.72"},

  {"x": "P13", "value": "222.56"},

  {"x": "P14", "value": "187.12"},

  {"x": "P15", "value": "154.32"},

  {"x": "P16", "value": "133.08"}

],

​

// series fill color

"fill":"gold",

// series border color

"stroke": "gray",

// border color on mouse over

"hoverStroke": "darkred",

// hatch fill settings

"hatchFill": {

  // hatch fill type

  "type": "diagonalbrick",

  // hatch fill color

  "color": "gray"

},

// settings of the hatch fill on mouse over

"hoverHatchFill":{

  // hatch fill type

  "type": "diagonalbrick",

  // hatch fill color

  "color": "darkred"

}

​

      }],

      // chart container

      "container": "container"

    }

  };

  var chart = anychart.fromJson(json);

  chart.draw();

});