Rendering Charts in PDFs

import {PdfDocument, WaitForType, CssMediaType} from "@ironsoftware/ironpdf";

(async () => {
    const htmlWithJs = `<!DOCTYPE html>
    <html>
        <head>
            <meta charset='utf-8' />
            <title>C3 Bar Chart</title>
        </head>
        <body>
            <div id='chart' style='width: 950px;'></div>
            <script src='https://d3js.org/d3.v4.js'></script>
            <!-- Load c3.css -->
            <link href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css' rel='stylesheet'>
            <!-- Load d3.js and c3.js -->
            <script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js'></script>
            <script>
                Function.prototype.bind = Function.prototype.bind || function (thisp) {
                    var fn = this;
                    return function() {
                        return fn.apply(thisp, arguments);
                    };
                };
                var chart = c3.generate({
                    bindto: '#chart',
                    data: {
                        columns: [
                            ['data1', 30, 200, 100, 400, 150, 250],
                            ['data2', 50, 20, 10, 40, 15, 25]
                        ]
                    }
                });
                // Set delay
                setTimeout(function() {
                    window.ironpdf.notifyRender();
                }, 1000);
            </script>
        </body>
    </html>`;

    // Configure rendering options
    const options = {
        enableJavaScript: true,
        waitFor: {
            type: WaitForType.JavaScript,
            maxWaitTime: 1000, // 1000 milliseconds delay
        },
        cssMediaType: CssMediaType.Screen,
    };

    // Render HTML content to a PDF
    const pdf = await PdfDocument.fromHtml(htmlWithJs, { renderOptions: options })

    await pdf.saveAs("js-chart.pdf");
})();

Rendering Charts in PDFs

When loading charts using JavaScript, it's important to allow sufficient time for JavaScript execution. Below is an example demonstrating how to configure this process:

// Configuration for chart loading and JavaScript execution timing
const chartConfig = {
    enableJavaScript: true, // Allows JavaScript execution

    // Wait for JavaScript execution before rendering
    waitFor: {
        type: 'JavaScript', // Type of wait condition
        // This specific configuration waits for the window.ironpdf.notifyRender function
        // to be called in the script or until the maximum wait time is reached
        until: 'window.ironpdf.notifyRender is called' 
    },

    // CSS media option ensures that the view and layout
    // of the HTML content adheres to the screen settings
    cssMedia: 'screen'
};

// Function to simulate chart rendering after JavaScript execution
function renderChart() {
    console.log('Rendering chart with configuration:', chartConfig);
    // Simulated rendering process here
}

// Simulate calling the notifyRender function in the actual implementation
window.ironpdf = {
    notifyRender: () => {
        console.log('notifyRender function called');
        // Call the renderChart function to simulate chart rendering
        renderChart();
    }
};

// Simulated JavaScript execution that eventually results in notifyRender being called
setTimeout(() => {
    window.ironpdf.notifyRender();
}, 2000); // Simulate a delay before the notifyRender function is called

// Configuration for chart loading and JavaScript execution timing
const chartConfig = {
    enableJavaScript: true, // Allows JavaScript execution

    // Wait for JavaScript execution before rendering
    waitFor: {
        type: 'JavaScript', // Type of wait condition
        // This specific configuration waits for the window.ironpdf.notifyRender function
        // to be called in the script or until the maximum wait time is reached
        until: 'window.ironpdf.notifyRender is called' 
    },

    // CSS media option ensures that the view and layout
    // of the HTML content adheres to the screen settings
    cssMedia: 'screen'
};

// Function to simulate chart rendering after JavaScript execution
function renderChart() {
    console.log('Rendering chart with configuration:', chartConfig);
    // Simulated rendering process here
}

// Simulate calling the notifyRender function in the actual implementation
window.ironpdf = {
    notifyRender: () => {
        console.log('notifyRender function called');
        // Call the renderChart function to simulate chart rendering
        renderChart();
    }
};

// Simulated JavaScript execution that eventually results in notifyRender being called
setTimeout(() => {
    window.ironpdf.notifyRender();
}, 2000); // Simulate a delay before the notifyRender function is called

JAVASCRIPT

In the code above, we've enabled JavaScript execution using the enableJavaScript property. The waitFor property is used to delay the rendering process and wait for the JavaScript to execute. This specific configuration, using WaitForType.JavaScript, will wait until the window.ironpdf.notifyRender function is called in the script or until the maximum wait time is reached.

Additionally, the CSS media option will ensure that the view and layout of the HTML content adheres to the screen settings.