Imagine opening a technical document packed with dense paragraphs and endless tables of numbers. Overwhelming, right?

Now imagine the same content — but this time, with vibrant graphs and dynamic charts that instantly tell the story behind the data.

Visuals don’t just beautify documents. They make understanding effortless.

As AEM Guides users, we have the power to transform complexity into clarity. And the best part? Adobe Experience Manager (AEM) Guides gives us the flexibility to integrate stunning visual representations into both PDF outputs and Sites experiences.

Industry use cases for graphs within product documentation

Integrating charts in technical documentation (techdocs, functional/technical manuals, brochures, etc.) adds a strong visual impact. Here are some of the practical industry examples:

Manufacturing: Show production rates and machine uptime/downtime analytics.

Healthcare and pharmaceuticals: Visualize clinical trial results, medication efficacy, or treatment comparisons.

Automotive: Represent vehicle performance stats and maintenance intervals.

Software and Technology: Showcase system performance metrics, application error rates, or API response times.

Finance: Graphs for loan trends, risk assessments, or insurance claims analysis.

In this post, we will explore how to integrate graphs inside Adobe Experience Manager (AEM) Guides for both PDF and Sites outputs.

We will walk through the complete process — from selecting the proper chart library, importing it into AEM Guides, implementing custom JavaScript, and ensuring adequate rendering for different outputs.

Whether you are working on structured content for PDFs or dynamic content for web experiences, this blog will help you achieve seamless graph integration.

Overview: Graph Integration in AEM Guides

Adobe Guides supports graph/chart integrations by including JavaScript libraries in templates and authored sections. However, there are some important considerations to keep in mind:

• Supported Libraries: Only vanilla JavaScript (ES5 compatible) libraries are currently supported. Libraries that use ES6+ features (like arrow functions, classes, let, const) may not work properly, especially when generating PDFs.
• Use Case Demonstrated: For this tutorial, we will integrate a simple Polar Area Chart and Line Chart using a vanilla JavaScript chart library to demonstrate the steps. The JavaScript example provided while demonstrating PDF generation can also be applied similarly for Sites output. Therefore, in the Sites section, only the integration steps are detailed, as the core JavaScript implementation remains the same.

Part 1: Graph Integration for PDF Output

Let's first see how to integrate a graph that should be rendered when generating PDFs from AEM Guides.

Step 1: Select the Chart Library

• Choose a JavaScript chart library compatible with ES5.
• In this demonstration, we use a simple Polar Area Chart library written in vanilla JavaScript.

Note: Ensure the library does not rely on modern JavaScript features beyond ES5.

Step 2: Import the Library into Templates

In AEM Guides:

• Go to the Template Editor section.
• Open the specific Template where you want to integrate the graph.
• Use the Import Section to upload and include the JavaScript chart library.

Step 3: Create an Output Class

Next, you need to create an Output Class:

• Navigate to the Output Class section.
• Create a new class (for example: .chart-container).
• Assign this class name where you are authoring your graph/chart in the AEM Guides content (in the Author mode).

Step 4: Implement Custom JavaScript

• Create a separate JavaScript file dedicated to handling the chart functionality.
• Target the container where the chart should appear — specifically using the .chart-container class that was set in the previous steps.
• Initialize and render the chart dynamically inside that container by creating a <canvas> element, preparing the chart configuration, and rendering it using a chart library (like Chart.js).
• Support both static and dynamic data sources:
  • Static data: You can directly define datasets within the JavaScript file (for example, hardcoding the labels and values).
  • Dynamic data: You can fetch the chart data from various endpoints such as:
    • AEM Content Fragments via GraphQL APIs
    • AEM Assets or DAM JSON files
    • External REST APIs from third-party services
    • Custom servlets or backend endpoints developed within AEM
• Depending on the use case, the fetch URLs and data processing logic can be customized to feed the chart dynamically at runtime.

The example below is the JS snippet for the polar chart and Line Chart respectively:

JavaScript Example: Static Chart Initialization
window.addEventListener('DOMContentLoaded', function () {
window.pdfLayout.onBeforePagination(function () {

// Create a canvas element
var parent = document.querySelector(".chart-container");
var canvas = document.createElement("canvas");
canvas.classList.add("eligible-categories-bar");

// Avoid duplicate canvas creation
if (document.querySelector(".chart-container canvas.eligible-categories-bar")) {
  return;
}

parent.appendChild(canvas);

var ctx = canvas.getContext('2d');

var mixedChart = new Chart(ctx, {
  type: 'bar', // Define the type of the chart
  data: {
    labels: ["2020", "2021", "2022", "2024"], // X-axis labels
    datasets: [
      {
        label: 'Assets Evaluation', // Dataset label
        data: [12, 19, 3, 5], // Dataset values
        backgroundColor: '#FFD700', // Bar color
        borderColor: '#FFD700', // Border color
        borderWidth: 1 // Border width
      },
      {
        label: 'Selection Process', // Second dataset label
        data: [15, 9, 7, 8], // Second dataset values
        backgroundColor: '#01EA57',
        borderColor: '#01EA57',
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true // Y-axis starts from 0
        }
      }]
    },
    barPercentage: 0.4, // Adjusts width of bars
    categoryPercentage: 0.5 // Adjusts space between groups
  }
});

});
});

JavaScript Example: Static Integration for polar chart

JavaScript Example: Dynamic API Integration for Line chart

window.addEventListener('DOMContentLoaded', function () {
window.pdfLayout.onBeforePagination(function () {
// Prevent multiple chart creations
if (document.querySelector(".chart-container-dynamic .canvas-container")) {
return;
}
// Create a for Chart.js
var canvas = document.createElement("canvas");
canvas.className = "canvas-container";
var chartContainer = document.querySelector(".chart-container-dynamic");
if (!chartContainer) {
console.error("Chart container not found");
return;
}
chartContainer.appendChild(canvas);
var ctx = canvas.getContext("2d");
// Fetch and render Chart.js chart
fetch("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json")
.then(function (response) {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(function (data) {
var dataPoints = [];
// Convert to Chart.js format
for (var i = 0; i < data.length; i++) {
dataPoints.push({
x: data[i][0],
y: parseInt(data[i][1], 10)
});
}
// Render Chart.js chart
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'External Data',
data: dataPoints,
borderColor: '#04C2C7',
backgroundColor: '#04C2C7',
fill: false,
tension: 0.3
}]
},
options: {
responsive: true,
parsing: false,
scales: {
x: {
type: 'linear',
position: 'bottom',
title: {
display: true,
text: 'X'
}
},
y: {
title: {
display: true,
text: 'Y'
}
}
},
plugins: {
legend: {
display: true,
labels: {
font: {
size: 14,
family: 'Manrope, sans-serif'
},
color: '#2C343B'
}
}
},
layout: {
padding: {
top: 40,
bottom: 20,
left: 10,
right: 10
}
}
}
});
})
.catch(function (error) {
console.error("Fetching data failed:", error);
});
});
});

Step 5: Include JavaScript in Page Layout

Finally:

• Include both JavaScript files (the library and your implementation script) inside the Page Layout of the PDF output configuration.

This ensures that when the PDF is generated, both the library and your custom logic are loaded correctly.

Step 6: Enable JavaScript in PDF Generation Settings

When generating the PDF:

• Go to the Output Preset settings.
• Make sure the "Enable JavaScript" option is checked.

Without enabling this option, dynamic scripts won't execute while generating the PDF, and charts will not appear.

That’s it!

Now, when you generate the PDF, your chart will render properly inside the document. The polar chart data can be authored as needed, and upon PDF regeneration, the chart will reflect the updated information accordingly.

Part 2: Graph Integration for Sites Output

Now, let's see how you can integrate the same graph into AEM Sites output (for web).

Fortunately, the process is even simpler.

Step 1: Import Library in Clientlibs

In AEM Sites:

• Navigate to Client Libraries (clientlibs).
• Create or update a clientlib specific to your project.
• Add the charting library's JavaScript file inside the clientlib's JS folder.

Example structure:

/apps/your-site/clientlibs/yourclientlib/js/chart-library.js
/apps/your-site/clientlibs/yourclientlib/js/custom-graph-implementation.js

Ensure the clientlibs are properly included via categories in your page templates.

Step 2: Write Custom Implementation (for Sites Output)

Inside your custom JavaScript file (e.g., custom-graph-implementation.js):

• Target the same container class (e.g., .chart-container).
• Write the logic to render the graph when the page loads or when the DOM is ready (DOMContentLoaded or similar event).
• Support both static and dynamic data sources:
  • Static Data: Hardcoded inside the JS itself.
  • Dynamic Data: Fetched from external APIs, AEM Content Fragments (via GraphQL), AEM DAM JSON, or custom AEM servlets.

Important for Sites Output:

• By default, if you fetch data dynamically, it will be retrieved in real-time every time the page is rendered.
• However, if real-time fetching is not desired (for performance or consistency reasons), you can configure AEM to fetch the data once during publish time and cache it for all subsequent page loads.
• This way, the chart will behave like it’s loading static data even though it originally came from a dynamic source.

Example:

document.addEventListener('DOMContentLoaded', function() {
var chartContainer = document.querySelector('.chart-container');
if(chartContainer) {
drawPolarChart(chartContainer);
}
});

Step 3: Generate and Test

Once the clientlib is properly included:

• Publish or preview your page.
• You should see the chart render dynamically on your AEM Site page.

No special settings like "Enable JavaScript" are required here because Sites outputs naturally support dynamic JavaScript rendering.

Important Tips

• Testing: Always test your integration both in Preview Mode and after Publishing.
• Performance: Keep the chart library lightweight to avoid bloating the PDF or Site loading times.
• Fallback Handling: Consider adding fallback content if JavaScript is disabled or the chart fails to render.

Conclusion

Integrating graphs into AEM Guides is a powerful way to make your technical documents and Sites more interactive and visually appealing.

While PDF generation requires careful handling (due to JavaScript execution limitations), the site's output is relatively straightforward.

By following the structured approach discussed above — choosing the right library, correctly importing it, writing clean custom scripts, and configuring output settings — you can successfully bring dynamic, informative charts into your AEM-based documentation.

Happy graphing!