https://www.amcharts.com/docs/v4/concepts/json-config/
https://www.amcharts.com/docs/v4/concepts/svg-engine/non-chart-usage/
https://www.amcharts.com/docs/v4/concepts/data/
https://www.amcharts.com/docs/v4/concepts/series/
https://www.amcharts.com/docs/v4/concepts/states/
https://www.amcharts.com/docs/v4/concepts/legend/
https://www.amcharts.com/docs/v4/concepts/themes/
https://www.amcharts.com/docs/v4/concepts/data/loading-external-data/
https://www.amcharts.com/docs/v4/concepts/formatters/
https://www.amcharts.com/docs/v4/concepts/adapters/
Charts
Pie charts
XY charts
Themes
How can we use AM Charts from CDN?
<script src="//www.amcharts.com/lib/4/core.js"></script> <script src="//www.amcharts.com/lib/4/charts.js"></script> <script src=".../themes/animated.js"></script> <script> am4core.useTheme(am4themes_animated); </script> <script src=".../lang/lt_LT.js"></script> <script> chart.language.locale = am4lang_lt_LT; </script> <script src=".../geodata/worldLow.js"></script> <script> map.geodata = am4geodata_worldLow; </script>
The order of the files loaded is important. The core.js file must always be loaded first.
How can we download AM Charts?
What are the global objects?
- am4core: all of the amCharts 4's core classes and functions are accessible via am4core global object. Core classes and functions, are accessible directly, like am4core.create(), am4core.color(), new am4core.ColorSet(), etc.
- am4charts: Chart-related classes reside in am4charts global object. Mapping-related functionality in am4maps. Those are accessible via their relative global objects, e.g. am4charts.PieChart or am4maps.MapChart.
- am4maps: Chart-related classes reside in am4charts global object. Mapping-related functionality in am4maps. Those are accessible via their relative global objects, e.g. am4charts.PieChart or am4maps.MapChart.
- am4themes_[theme name]
- am4lang_[locale]
- am4geodata_[map name]
- Some classes are universal and thus are accessible via multiple chart-type sub-objects, like for instance am4charts.Legend, am4maps.Legend, etc.
What is the Object-based approach?
Using this approach you create a chart and configure it by creating a chart object first, then adding other objects like series and legend to it, as well as configuring all those objects calling their respective methods, and/or setting their properties. The function to create a chart instance is am4core.create(container, chart_type) . It takes two parameters:
- container - an id of a document container (such as <div> element) or a reference to it. The chart will be created within that container.
- chart_type - a class reference or a name of the class name representing the chart we are creating. For a Pie chart we might want to use am4charts.PieChart, or simply "PieChart".
// Including via class reference
var chart = am4core.create("chartdiv", am4charts.PieChart);
// But this would work just as well:
var chart = am4core.create("chartdiv", "PieChart");Note that an element with the id "chartdiv" must already exist in your document. The function will not create it.
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 900px; height 800px;"></div>
<script>
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);
// Create pie series
var series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";
// Add data
chart.data = [{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
}];
// And, for a good measure, let's add a legend
chart.legend = new am4charts.Legend();
</script>What are the pros and cons of Object-based approach?
Using this approach, you will be instantiating objects from various classes, including the chart itself.
- PROS: Code is more readable and thus less prone to bugs and typos. Some IDEs will provide code-insight, so that might be a plus as well.
- CONS: Chart config cannot be serialized. Meaning, you can't take the whole chart config and store it, say, in a database, or load dynamically via AJAX. This does not apply to data, which can still be loaded dynamically.
Once we have a chart object, we can start instantiating other objects that comprise the chart, such as Legend, Series, etc. Some singular elements, like Legend are instantiated using new notation and assigned to chart's legend property.
Others, like, say Series in a series-based chart (XY, Pie, Maps are all series-based), are created using chart's respective series property, and it's create() method.
// Adding a legend to a Pie chart
chart.legend = new am4charts.Legend();
// Adding a series to a Pie chart
// The following will automatically create an instance of `PieSeries`,
// attach it to `PieChart` and return the reference, so that we can
// configure it
let series = chart.series.create();
// Setting up data fields in Pie series
series.dataFields.value = "visits";
series.dataFields.category = "country";What is the JSON-based approach?
All of the above, can be expressed as a single JavaScript object. (or JSON)
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 900px; height 800px;"></div>
<script>
// Create chart instance in one go
var chart = am4core.createFromConfig({
// Create pie series
"series": [{
"type": "PieSeries",
"dataFields": {
"value": "litres",
"category": "country"
}
}],
// Add data
"data": [{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
}],
// And, for a good measure, let's add a legend
"legend": {}
}, "chartdiv", am4charts.PieChart);
</script>Notice, this time around we used different chart instantiation function: am4core.createFromConfig().
What are the pros and cons of using JSON-based approach?
Using this approach, the whole chart, including all elements and settings is provided as one single JSON object.
- PROS: JSON config is serializable and thus can be stored and transmitted.
- CONS: More prone to typos and bugs. A single syntax typo, can bring down the whole chart, since it's one large JS structure.
How many parameters does the createFromConfig method take?
- config: This is a JSON object containing various properties for this chart
- container: This can be a string representing the ID of the DOM element, or a DOM element that will contain this chart
- chart_type_class: A reference to a chart type class, e.g. am4charts.PieChart, am4charts.XYChart, am4maps.MapChart, etc. or it's name as string (without namespace): "PieChart", "XYChart", "MapChart".
The second and third parameters are optional. However, if you do not specify them, you must specify them in the first parameter.
am4core.createFromConfig() function will return a fully valid chart object, which you can then manipulate and change as with the object-based approach. You can update its or its children's properties, even add new elements.
