amcharts Getting started with amcharts Creating a chart

Example

The chart consists out of HTML container and the JavaScript code that instantiates a chart in it.

HTML

We use a <div> element as chart container.

<div id="chartdiv" style="height: 300px;"></div>

JavaScript

To instantiate the chart we use AmCharts.makeChart() function. The first parameter is an id of the container to place chart in, the second an object with chart config.

At the very least it must contain type parameter, which holds chart type.

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 1114
  }, {
    "country": "India",
    "visits": 984
  }],
  "graphs": [{
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "categoryField": "country"
});