Flexmonster Pivot Table & Charts seamlessly integrates with amCharts — a programming visualization library with super interactive charts.
Thanks to the Connector for amCharts, your visualizations will become even more interactive: as soon as you change the slice on the pivot or filter the data, your charts will immediately transform.
Creating dashboards with amCharts and the Flexmonster pivot grid is easy and enjoyable: you can choose from a wide range of modern and bright charts to effectively visualize your data and present it in the most favorable way.
Icons made by Freepik from www.flaticon.com
Simply configure the JS pivot grid with the data you need and instantly submit all the information to interactive charts to highlight the essential points and quickly identify all extremes.
const pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
height: 440,
licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
customizeCell: customizeCell,
report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/demos/amcharts-demo-data.json",
mapping: {
Date: {
type: "date",
},
Country: {
type: "string",
},
id: {
type: "string",
},
CountryCode: {
type: "property",
hierarchy: "Country",
},
Feta: {
type: "number",
},
Mozzarella: {
type: "number",
},
"Parmigiano-Reggiano": {
type: "number",
},
},
},
slice: {
rows: [
{
uniqueName: "Date.Month",
filter: {
exclude: ["date.month.[december]", "date.month.[november]", "date.month.[october]"],
},
},
{
uniqueName: "[Measures]",
},
],
columns: [
{
uniqueName: "Country",
},
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum",
grandTotalCaption: "Feta",
},
{
uniqueName: "Mozzarella",
aggregation: "sum",
grandTotalCaption: "Mozzarella",
},
{
uniqueName: "Parmigiano-Reggiano",
aggregation: "sum",
grandTotalCaption: "Parmigiano-Reggiano",
},
],
},
options: {
grid: {
showHeaders: false,
showGrandTotals: "rows",
},
showAggregationLabels: false,
},
},
reportcomplete: function () {
pivot.off("reportcomplete");
createStackedChart();
createPictorialChart();
createPieChart();
createMapChart();
},
});
let mapChartRoot, pieChartRoot, stackedChartRoot, pictorialChartRoot;
const chartColors = [
am5.color("#4CBF8B"),
am5.color("#FFCD4C"),
am5.color("#E8734C"),
am5.color("#9875E3"),
am5.color("#4C9EFF"),
am5.color("#8ACFC3"),
am5.color("#CD97E6"),
am5.color("#F1D34C"),
am5.color("#65D2E7"),
];
const cheeseColors = [am5.color("#FFE268"), am5.color("#FFCD4C"), am5.color("#FFB037")];
function createStackedChart() {
pivot.amcharts.getData({}, drawStackedChart, updateStackedChart);
}
function drawStackedChart(chartData, rawData) {
// Create chart instance
stackedChartRoot = am5.Root.new("amcharts-stacked-container");
//Set themes
stackedChartRoot.setThemes([am5themes_Animated.new(stackedChartRoot)]);
let stackedChart = stackedChartRoot.container.children.push(
am5xy.XYChart.new(stackedChartRoot, {})
);
stackedChart.get("colors").set("colors", chartColors);
// Craete Y-axis
var valueAxis = stackedChart.yAxes.push(
am5xy.ValueAxis.new(stackedChartRoot, {
renderer: am5xy.AxisRendererY.new(stackedChartRoot, {}),
tooltip: am5.Tooltip.new(stackedChartRoot, {
truncate: true,
maxWidth: 200,
tooltipText: "{category}",
}),
})
);
valueAxis.children.unshift(
am5.Label.new(stackedChartRoot, {
rotation: -90,
text: "Queries",
y: am5.p50,
centerX: am5.p50,
})
);
// Create X-Axis
var categoryAxis = stackedChart.xAxes.push(
am5xy.CategoryAxis.new(stackedChartRoot, {
renderer: am5xy.AxisRendererX.new(stackedChartRoot, {
minGridDistance: 20,
}),
categoryField: pivot.amcharts.getCategoryName(rawData),
tooltip: am5.Tooltip.new(stackedChartRoot, {
truncate: true,
maxWidth: 200,
tooltipText: "{category}",
}),
})
);
//Get xRendeder for axis configurations
let xRenderer = categoryAxis.get("renderer");
xRenderer.grid.template.setAll({
location: 0,
});
const maxWidth = 200;
xRenderer.labels.template.setAll({
truncate: true,
maxWidth: maxWidth,
tooltipText: "{category}",
});
categoryAxis.events.on("boundschanged", function (ev) {
let axis = ev.target;
let cellWidth =
axis.innerWidth() / (axis.getPrivate("endIndex") - axis.getPrivate("startIndex"));
if (cellWidth < maxWidth) {
xRenderer.labels.template.setAll({
rotation: -45,
horizontalCenter: "right",
verticalCenter: "middle",
});
} else {
xRenderer.labels.template.setAll({
rotation: 0,
horizontalCenter: "middle",
verticalCenter: "top",
});
}
});
categoryAxis.data.setAll(chartData.data);
for (let i = 0; i < pivot.amcharts.getNumberOfMeasures(rawData); i++) {
// Create series
let series = stackedChart.series.push(
am5xy.ColumnSeries.new(stackedChartRoot, {
xAxis: categoryAxis,
yAxis: valueAxis,
categoryXField: pivot.amcharts.getCategoryName(rawData),
valueYField: pivot.amcharts.getMeasureNameByIndex(rawData, i),
name: pivot.amcharts.getMeasureNameByIndex(rawData, i).split(" ").pop(),
stacked: true,
})
);
series.columns.template.setAll({
tooltipText: "{name}, {categoryX}: {valueY}",
});
series.data.setAll(chartData.data);
}
stackedChart.set("cursor", am5xy.XYCursor.new(stackedChartRoot, {}));
}
function updateStackedChart(chartData, rawData) {
stackedChartRoot.dispose();
drawStackedChart(chartData, rawData);
}
function createPictorialChart() {
pivot.amcharts.getData(
{
slice: {
rows: [
{
uniqueName: "Country",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Fetas",
formula: 'sum("Feta")',
caption: "value",
},
],
},
},
drawPictorialChart,
updatePictorialChart
);
}
function drawPictorialChart(chartData, rawData) {
let iconPathValue = iconPath();
// Create chart instance
pictorialChartRoot = am5.Root.new("amcharts-pictorial-container");
let pictorialChart = pictorialChartRoot.container.children.push(
am5percent.SlicedChart.new(pictorialChartRoot, {
layout: pictorialChartRoot.horizontalLayout,
})
);
//Set themes
pictorialChartRoot.setThemes([am5themes_Responsive.new(pictorialChartRoot)]);
//Create series
let series = pictorialChart.series.push(
am5percent.PictorialStackedSeries.new(pictorialChartRoot, {
name: "Series",
valueField: pivot.amcharts.getMeasureNameByIndex(rawData, 0),
orientation: "horizontal",
categoryField: pivot.amcharts.getCategoryName(rawData),
alignLabels: true,
svgPath: iconPathValue,
maxWidth: 500,
centerX: am5.percent(50),
x: am5.percent(50),
})
);
series.ticks.template.set("visible", false);
series.labels.template.set("visible", false);
series.get("colors").set("colors", cheeseColors);
series.data.setAll(chartData.data);
//Create legend
var legend = pictorialChart.children.push(
am5.Legend.new(pictorialChartRoot, {
centerY: am5.percent(50),
y: am5.percent(50),
layout: pictorialChartRoot.verticalLayout,
clickTarget: "none"
})
);
legend.markerRectangles.template.setAll({
cornerRadiusTL: 10,
cornerRadiusTR: 10,
cornerRadiusBL: 10,
cornerRadiusBR: 10,
});
legend.data.setAll(series.dataItems);
}
function updatePictorialChart(chartData, rawData) {
// Here you can add your own logic for updating the chart
}
function createPieChart() {
pivot.amcharts.getData(
{
slice: {
rows: [
{
uniqueName: "Date.Month",
filter: {
members: [
"date.month.[january]",
"date.month.[february]",
"date.month.[march]",
"date.month.[april]",
"date.month.[may]",
"date.month.[june]",
],
},
},
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum",
},
],
},
},
drawPieChart,
updatePieChart
);
}
function drawPieChart(chartData, rawData) {
pieChartRoot = am5.Root.new("amcharts-pie-container");
//Set themes
stackedChartRoot.setThemes([am5themes_Animated.new(stackedChartRoot)]);
let pieChart = pieChartRoot.container.children.push(
am5percent.PieChart.new(pieChartRoot, {
numberFormatter: am5.NumberFormatter.new(pieChartRoot, {
numberFormat: pivot.amcharts.getNumberFormatPattern(rawData.meta.formats[0]),
}),
})
);
// Create pie series
let series = pieChart.series.push(
am5percent.PieSeries.new(pieChartRoot, {
name: "Series",
y: am5.percent(-10),
valueField: pivot.amcharts.getMeasureNameByIndex(rawData, 0),
categoryField: pivot.amcharts.getCategoryName(rawData),
alignLabels: true,
})
);
series.get("colors").set("colors", chartColors);
series.labels.template.set("text", "{category}: {value}");
series.slices.template.adapters.add("radius", function (radius, target) {
let dataItem = target.dataItem;
let high = series.getPrivate("valueHigh");
if (dataItem) {
let value = target.dataItem.get("valueWorking", 0);
return (radius * value) / high;
}
return radius;
});
series.slices.template.setAll({
cornerRadius: 6,
stroke: am5.color("#fff"),
strokeWidth: 2,
strokeOpacity: 1,
});
// Fill the chart with the data from Flexmonster
series.data.setAll(chartData.data);
//Create legend
var legend = pieChart.children.push(
am5.Legend.new(pieChartRoot, {
centerX: am5.percent(50),
x: am5.percent(50),
y: am5.percent(95),
centerY: am5.percent(100)
})
);
const responsive = am5themes_Responsive.new(pieChartRoot);
responsive.addRule({
name: "Series",
relevant: function (width, height) {
return width <= 600;
},
applying: () => {
series.ticks.template.set("visible", false);
series.labels.template.set("visible", false);
},
removing: () => {
series.ticks.template.set("visible", true);
series.labels.template.set("visible", true);
},
});
pieChartRoot.setThemes([responsive]);
legend.data.setAll(series.dataItems);
}
function updatePieChart(chartData, rawData) {
// Here you can add your own logic for updating the chart
}
function createMapChart() {
pivot.amcharts.getData(
{
slice: {
rows: [
{
uniqueName: "id",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Fetas",
formula: 'sum("Feta")',
caption: "value",
},
],
},
},
drawMapChart,
updateMapChart
);
}
function drawMapChart(chartData, rawData) {
mapChartRoot = am5.Root.new("amcharts-map-container");
// Set themes
mapChartRoot.setThemes([am5themes_Animated.new(mapChartRoot)]);
// Create chart
let mapChart = mapChartRoot.container.children.push(
am5map.MapChart.new(mapChartRoot, {
panX: "rotateX",
panY: "none",
valueField: pivot.amcharts.getMeasureNameByIndex(rawData, 0),
homeZoomLevel: 9,
maxZoomLevel: 9,
minZoomLevel: 9,
wheelY: "none",
homeGeoPoint: {
longitude: 12.496366,
latitude: 42.399982,
},
})
);
// Create polygon series
let polygonSeries = mapChart.series.push(
am5map.MapPolygonSeries.new(mapChartRoot, {
geoJSON: am5geodata_worldHigh,
valueField: pivot.amcharts.getMeasureNameByIndex(rawData, 0),
calculateAggregates: true,
exclude: ["AQ"],
})
);
polygonSeries.mapPolygons.template.setAll({
tooltipText: "{name} {value}",
fill: am5.color("#D3D3D3"),
});
polygonSeries.mapPolygons.template.events.on("pointerover", function (ev) {
heatLegend.showValue(ev.target.dataItem.get("value"));
});
polygonSeries.events.on("datavalidated", () => {
mapChart.goHome();
});
polygonSeries.set("heatRules", [
{
target: polygonSeries.mapPolygons.template,
dataField: pivot.amcharts.getMeasureNameByIndex(rawData, 0),
min: am5.color("#F1D34C"),
max: am5.color("#4CBF8B"),
key: "fill",
},
]);
polygonSeries.data.setAll(chartData.data);
var heatLegend = mapChart.children.push(
am5.HeatLegend.new(mapChartRoot, {
target: polygonSeries.mapPolygons.template,
orientation: "horizontal",
width: am5.percent(100),
y: am5.percent(100),
centerY: am5.percent(100),
startColor: am5.color("#F1D34C"),
endColor: am5.color("#4CBF8B"),
paddingBottom: 20,
paddingTop: 20,
paddingLeft: 20,
paddingRight: 20,
})
);
polygonSeries.events.on("datavalidated", function () {
heatLegend.set("startValue", polygonSeries.getPrivate("valueLow"));
heatLegend.set("endValue", polygonSeries.getPrivate("valueHigh"));
});
}
function updateMapChart(chartData, rawData) {
// Here you can add your own logic for updating the chart
}
function customizeCell(cell, data) {
if (data.hierarchy && data.type == "header") {
if (data.hierarchy.caption == "Country" && data.member && data.member.properties) {
let name = data.member.properties.CountryCode;
let flag = `<i class="fm-icon ${data.expanded ? "fm-expanded-icon" : "fm-collapsed-icon"}"
title="${data.expanded ? "Click to collapse" : "Click to expand"}"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/i/flags/${name.toLowerCase()}.svg">`;
cell.text = `${flag}<span style="margin-left: 2px; line-height: 16px">${data.member.caption}</span>`;
cell.addClass("fm-custom-cell");
}
}
}
<div id="pivot-container"></div>
<div class="demo-box">
<div class="demo-title">Overall Cheese Interest by Month</div>
<div id="amcharts-stacked-container" class="chart-container"></div>
</div>
<div class="demo-box">
<div class="demo-title">Total Cheese Interest by Country</div>
<div id="amcharts-pictorial-container" class="chart-container"></div>
<div>
Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a>
from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</div>
</div>
<div class="demo-box">
<div class="demo-title">Feta Interest by Month</div>
<div id="amcharts-pie-container" class="chart-container"></div>
</div>
<div class="demo-box no-text-before no-text-after">
<div class="demo-title">Feta Interest by Country</div>
<div id="amcharts-map-container" class="chart-container"></div>
</div>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.chart-container {
height: 450px;
}
.demo-box {
background-color: #fafafa;
position: relative;
padding: 40px 30px 30px 30px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
margin-top: 40px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 24px;
}
.fm-custom-cell {
display: flex !important;
align-items: center !important;
font-size: 12px !important;
}
.fm-custom-cell .flag-icon {
width: 21px !important;
height: 16px !important;
margin-left: 0 !important;
margin-right: 2px !important;
}
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
top: -2px;
height: 16px;
}
Follow our step-by-step Integration with amCharts guide to quickly and easily start creating bright and exciting visualizations. You can also follow our video tutorial on how to integrate pivot grid with amCharts.