Skip to content
amCharts 5

Automating report generation using Selenium Webdriver

If you need to automate the generation of chart images or PDF, Selenium Webdriver might be the best option. It can handle different browsers even though this example only shows it using Firefox.

Setting up

Section titled “Setting up”
  • Install NodeJS
  • Install Firefox
  • Create a folder
  • Create a file called package.json in the new folder with the content shown below:
{
  "name": "amcharts-v5-selenium",
  "version": "1.0.0",
  "description": "Automate chart export",
  "devDependencies": {
    "geckodriver": "^3.2.0",
    "selenium-webdriver": "^4.8.1"
  }
}
  • Open a terminal and run npm i on the same folder to install the dependencies
Section titled “Exporting a chart from an external link”

You can export charts that exist on a current page.

Add a file called external-export.js for now. You can rename it as you wish. Add the code below in it:

const {
  Builder
} = require('selenium-webdriver');
const firefox = require('selenium-webdriver/firefox');
require('geckodriver');


(async () => {
  let url = 'https://www.amcharts.com/demos/exporting-chart-to-image/',
    options = new firefox.Options();


  // Set some conditions for the download manager
  options.setPreference('browser.helperApps.neverAsk.saveToDisk', 'application/pdf');
  options.setPreference('browser.download.folderList', 2);
  options.setPreference('browser.download.manager.showWhenStarting', false);
  options.setPreference('pdfjs.disabled', true);


  // Set the directory to save the exported file
  options.setPreference('browser.download.dir', __dirname);


  // Open the browser headless
  options.addArguments('-headless');


  let driver = await new Builder()
    .setFirefoxOptions(options)
    .forBrowser('firefox')
    .build();


  try {
    await driver.get(url);
    await driver.executeAsyncScript(() => {
      const callback = arguments[arguments.length - 1],
        exportChart = () => {
          exporting.events.on('exportfinished', () => {
            setTimeout(callback, 5000);
          });


          // Start the export
          exporting.download('pdf');
        },
        startExportWhenReady = () => {
          let timeout;
          root.events.on("frameended", waitForFinalFrameEnded);


          function waitForFinalFrameEnded() {
            if (timeout) {
              clearTimeout(timeout);
            }
            timeout = setTimeout(function() {
              root.events.off("frameended", waitForFinalFrameEnded);
              exportChart();
            }, 100);
          }
        };
      if (document.readyState === 'complete')
        startExportWhenReady();
      else
        document.addEventListener('DOMContentLoaded', startExportWhenReady);
    })
  } finally {
    await driver.quit();
  }
})()

Now run node external-export.js in the terminal.

The exported files will be in the folder you created

Exporting a chart from the same package

Section titled “Exporting a chart from the same package”

If you prefer to create charts without requiring external pre-existing pages, you can have them built into this solution. We will setup a server using HapiJS by first adding the following dependencies in the package.json file:

{
  "name": "amcharts-v5-selenium",
  "version": "1.0.0",
  "description": "Automate chart export",
  "devDependencies": {
    "@hapi/hapi": "^21.3.0",
    "@hapi/inert": "^7.1.0",
    "geckodriver": "^3.2.0",
    "selenium-webdriver": "^4.8.1"
  }
}

Run npm i again to install the new dependencies.

Add server.js file and the following code into it:

const Hapi = require('@hapi/hapi');
const Inert = require('@hapi/inert');
const exportChart = require('./internal-export');


const server = Hapi.server({
    host: 'localhost',
    port: 3000
});


server.route({
    method: 'GET',
    path: '/',
    handler: (request, h) => {
        return h.file('./public/index.html');
    }
});


server.route({
    method: 'GET',
    path: '/{fileName*}',
    handler: (request, h) => {
        return h.file('./public/' + request.params.fileName);
    }
});


const init = async () => {


    await server.register(Inert);
    await server.start();


    console.log(`Server running at: ${server.info.uri}`);
}


server.events.on('start', () => {


    // Start the export feature
    exportChart(server);


    console.log('Server started and the export module is loaded');
});


server.events.on('stop', () => {
    console.log('Server stopped');
});


init();

Adding files and folders

Section titled “Adding files and folders”

At this point you should have some of the files below. Please add the missing folders and files as shown and then the correspondent content:

/
├── package.json
├── server.js
├── internal-export.js
├── external-export.js
└── public/
  ├── index.html
  ├── styles/
  |   └── app.css
  └── scripts/
    └── chart.js

The index.html file

Section titled “The index.html file”
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>amCharts 5</title>
  <link rel="stylesheet" href="/styles/app.css">
</head>
<body>
    <div id="chartdiv"></div>
  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/plugins/exporting.js"></script>
  <script src="/scripts/chart.js"></script>
</body>
</html>

The app.css file

Section titled “The app.css file”
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


#chartdiv {
  width: 100%;
  height: 500px;
}

The chart.js file

Section titled “The chart.js file”
var root = am5.Root.new("chartdiv");


root.setThemes([
  am5themes_Animated.new(root)
]);


var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: false,
  panY: false,
  wheelX: "panX",
  wheelY: "zoomX",
  layout: root.verticalLayout
}));


var data = [{
  country: "USA",
  visits: 4025,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "China",
  visits: 1882,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Japan",
  visits: 1809,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Germany",
  visits: 1322,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "UK",
  visits: 1122,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "France",
  visits: 1114,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "India",
  visits: 984,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Spain",
  visits: 711,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Netherlands",
  visits: 665,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Russia",
  visits: 580,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "South Korea",
  visits: 443,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Canada",
  visits: 441,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Brazil",
  visits: 395,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Italy",
  visits: 386,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Australia",
  visits: 384,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Taiwan",
  visits: 338,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}, {
  country: "Poland",
  visits: 328,
  columnSettings: {
    fill: chart.get("colors").next()
  }
}]


var xRenderer = am5xy.AxisRendererX.new(root, {
  cellStartLocation: 0.1,
  cellEndLocation: 0.9,
  minGridDistance: 50
});


var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  categoryField: "country",
  renderer: xRenderer,
  tooltip: am5.Tooltip.new(root, {})
}));


xRenderer.grid.template.setAll({
  location: 1
});


xRenderer.labels.template.setAll({
  multiLocation: 0.5
})


xAxis.data.setAll(data);


var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {
    strokeOpacity: 0.1
  })
}));


var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "visits",
  categoryXField: "country"
}));


series.columns.template.setAll({
  tooltipText: "{categoryX}: {valueY}",
  width: am5.percent(90),
  tooltipY: 0,
  strokeOpacity: 0,
  templateField: "columnSettings"
});


series.data.setAll(data);


var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: am5plugins_exporting.ExportingMenu.new(root, {})
});


series.appear();
chart.appear(1000, 100);

The internal-export.js file

Section titled “The internal-export.js file”
const {
  Builder
} = require('selenium-webdriver');
const firefox = require('selenium-webdriver/firefox');
require('geckodriver');


module.exports = async (server) => {
  let url = 'http://localhost:3000';
  options = new firefox.Options();


  // Set some conditions for the download manager
  options.setPreference('browser.helperApps.neverAsk.saveToDisk', 'application/pdf');
  options.setPreference('browser.download.folderList', 2);
  options.setPreference('browser.download.manager.showWhenStarting', false);
  options.setPreference('pdfjs.disabled', true);


  // Set the directory to save the exported file
  options.setPreference('browser.download.dir', __dirname);


  // Open the browser headless
  options.addArguments('-headless');


  let driver = await new Builder()
    .setFirefoxOptions(options)
    .forBrowser('firefox')
    .build();


  try {
    await driver.get(url);
    await driver.executeAsyncScript(() => {
      const callback = arguments[arguments.length - 1],
        exportChart = () => {
          exporting.events.on('exportfinished', () => {
            setTimeout(callback, 5000);
          });
          // Start the export
          exporting.download('pdf');
        },


        startExportWhenReady = () => {
          let timeout;
          root.events.on("frameended", waitForFinalFrameEnded);


          function waitForFinalFrameEnded() {
            if (timeout) {
              clearTimeout(timeout);
            }
            timeout = setTimeout(function() {
              root.events.off("frameended", waitForFinalFrameEnded);
              exportChart();
            }, 100);
          }
        };
      if (document.readyState === 'complete')
        startExportWhenReady();
      else
        document.addEventListener('DOMContentLoaded', startExportWhenReady);
    })
  } finally {
    await driver.quit();
  }
}

Now run node server.js to start the server and to generate the chart.

Where to customize the export functionality

Section titled “Where to customize the export functionality”

You can customize the code calling the export functionality inside the driver.executeAsyncScript method as shown below:

await driver.executeAsyncScript(() => {
  const callback = arguments[arguments.length - 1],
    exportChart = () => {
      exporting.events.on('exportfinished', () => {
        setTimeout(callback, 5000);
      });


      // Start the export
      exporting.download('pdf');
    },
    startExportWhenReady = () => {
      let timeout;
      root.events.on("frameended", waitForFinalFrameEnded);


      function waitForFinalFrameEnded() {
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
          root.events.off("frameended", waitForFinalFrameEnded);
          exportChart();
        }, 100);
      }
    };
  if (document.readyState === 'complete')
    startExportWhenReady();
  else
    document.addEventListener('DOMContentLoaded', startExportWhenReady);
})

Download the example

Section titled “Download the example”

Download the whole example here and run npm i to load the dependencies.