How to create an Interactive Map Dashboard with Flexmonster and amCharts: A Step-by-Step Tutorial

Raw data can often feel like a maze—difficult to navigate and even harder to analyze to get useful information. That's where interactive dashboard come in. They turn all that complicated data into simple visuals that are easy to look at and explore, making it much quicker to notice some trends and patterns.

In this tutorial, we’ll guide you through creating an interactive map dashboard using Flexmonster Pivot Table and amCharts. 

Why Build Interactive Dashboards?

Dashboards have come a long way from static reports. Today, they’re interactive tools that help you understand data better, uncover patterns, and make informed decisions. Imagine replacing endless rows of data with an engaging visual interface that makes your data tell its story. 

In this tutorial, we use an interesting dataset: exploring the popularity of baby names across states in different years. Using Flexmonster’s data manipulation capabilities and amCharts’ dynamic visualization features, we’ll create a dashboard that not only presents the data but makes it interactive and intuitive to explore. We’ll be able to compare trends state-by-state or instantly identify which names defined a generation—all with just a few clicks.

Our Tech team continues to share useful information with you in our YouTube series Tips & Tricks. Today, by the end of this tutorial, you'll have a dynamic visualization showcasing the popularity of names across U.S. states. 

So, let’s start!

Step 1: Setting Up Flexmonster

The first step is to set up Flexmonster Pivot Table to fetch and display the data. For simplicity, we’ll use CDN. Flexmonster offers various integration options depending on your project needs—check out our documentation for more details.

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="fm-container"></div>

  const pivot = new Flexmonster({
    container: "fm-container",
    componentFolder: "https://cdn.flexmonster.com/",
    licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
    height: 550,
    report: {
      dataSource: {
        type: "api",
        url: "https://olap.flexmonster.com:9500",
        index: "StateNames",
      },

Step 2: Customizing the Pivot Table

Next, let’s improve the readability of our pivot table by replacing state codes (e.g., AL) with full state names (e.g., Alabama). Flexmonster’s customizeCell API makes this easy.

const stateMap = {
  AL: "Alabama",
  AK: "Alaska",
};
 if (
    data.type === "header" &&
    data.hierarchy &&
    data.hierarchy.uniqueName === "State"
  ) {
    cell.text = cell.text.replace(data.label, stateMap[data.label])
  }

After our pivot grid is ready, we can move on to charts. 

Step 3: Setting up amCharts

Now it’s time to integrate amCharts to visualize our data. We are following instructions from amChart documentation on the map chart. To do this, we need four files:

1. amCharts core for essential functionality.
2. amCharts maps for the U.S. map.
3. Geodata (usaLow.js) for the state shapes.
4. Animated.js for smooth transitions and animations.

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/usaLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

In your HTML, create a container to hold the map.

<div id="amchart-container"></div>

Step 4 Binding Flexmonster and amCharts

Use the getData() method to extract data from FM, and then process this data and create amChart chart in the drawChart() callback handler.

function createChart() {
  pivot.getData({}, drawChart, updateChart)
} 
function drawChart(rawData) {
  const data = prepareDataFunction(rawData)

  am5.ready(function () {
    root = am5.Root.new("amchart-container")
    root.setThemes([am5themes_Animated.new(root)])

    let chart = root.container.children.push(
      am5map.MapChart.new(root, {
        panX: "rotateX",
        panY: "none",
        projection: am5map.geoAlbersUsa(),
        layout: root.horizontalLayout,
      }),
    )

    var polygonSeries = chart.series.push(
      am5map.MapPolygonSeries.new(root, {
        geoJSON: am5geodata_usaLow,
        valueField: "value",
        calculateAggregates: true,
      }),
    )
   // other amCharts configurations
}

The updateChart()  handler in getData() tracks if the slice or number formatting was changed in Flexmonster, so we can use it to update the chart accordingly. So, whenever you make a change in the pivot table (e.g. filtering the years), the chart should automatically update to reflect the new data.

function updateChart(rawData) {
  root.dispose()
  drawChart(rawData)
}

Step 5: Preparing Data for amCharts

Here, you can see the format in which Flexmonster returns the data.

We need to create a function prepareDataFunction() to convert raw data into the format amCharts requires ( in our case adding state prefixes and extracting top names).

function prepareDataFunction(rawData) {
  const result = [];
  const stateRecords = {};

  rawData.data.forEach((item) => {
    if (item.r1) {
      if (!stateRecords[item.r0]) {
        stateRecords[item.r0] = {
          id: `US-${item.r0}`,
          topName: item.r1,
          value: item.v0,
          value2: null,
        };
        result.push(stateRecords[item.r0]);
 } else if (!stateRecords[item.r0].secondName) {
        stateRecords[item.r0].secondName = item.r1
        stateRecords[item.r0].value2 = item.v0
      }
    }
  })
  return result;
}

This function formats the data appropriately for amCharts, ensuring it includes the state ID and name counts.

Step 6: Adding Final Touches

Finally, we’ll need to add tooltips to see the information about states directly on the map.

When all functional configuration is over, we can play with the chart's visual aesthetics, adding a heatmap for better interactivity. Also don’t forget to include some basic HTML elements like a title, labels, or a legend to provide context for your dashboard.

Try our JSFiddle demo and play around with the setup! See the code in action and experiment with different configurations. 

For a step-by-step guide, watch our video tutorial to see the full process, detailed instructions, and the final result.

Conclusion

By combining the power of Flexmonster and amCharts, we created a dynamic report that goes beyond simply displaying data—it reveals trends, patterns, and insights. 

While this tutorial focused on integrating our pivot table with amCharts, Flexmosnter offers a wide range of integration options with popular charting libraries like Google Charts and Highcharts. So, this tutorial provides a foundation to get you started. With further exploration, you can build customized dashboards tailored to your specific data, analysis needs, and branding, while our pivot table handles and aggregates your data.

Also, take a look at our dashboard demo to see what more you can build with Flexmosnter Pivot Table and Charts.