Watch out PowerBI, here’s Google Charts

Can we use Google Charts in Business Central? That’s the question I try to answer in this video.

https://youtu.be/uHufixhyv6A

In this video, Erik responds to a viewer request from Carl, who wanted to use Google Charts inside Business Central as a lightweight alternative to Power BI. Carl had been using various control add-in tricks from the channel but couldn’t get Google Charts to work. Erik walks through the entire process of integrating Google Charts into a Business Central page using a control add-in, starting from the sample code on Google’s developer site and ending with a dynamic pie chart displaying real customer sales data.

What Are Google Charts?

Google Charts is a free charting library available through Google’s developer platform. It provides a wide variety of interactive chart types — pie charts, bar charts, line charts, and many more — all rendered in the browser using JavaScript. The setup is remarkably simple: you include a loader script from gstatic.com, call google.charts.load() to load the visualization package, and then define a callback function that draws your chart into a <div> element.

Erik chose the pie chart as a starting example because, well, it’s a nice chart. The key insight is that the entire Google Charts setup requires just one external script, a small block of JavaScript, and a single <div> — which maps perfectly to how Business Central control add-ins work.

Setting Up the Control Add-in

A control add-in in Business Central works by assigning a portion of the screen to be an iframe — essentially a page within a page. Whatever happens inside that iframe is self-contained. This is ideal for Google Charts because the iframe already provides a <div> element (called controlAddIn) where we can render our chart.

Project Structure

Erik starts by creating a charts folder to keep all control add-in files organized. The control add-in requires several files:

  • addin.al — The AL definition of the control add-in
  • startup.js — The startup script that signals when the control is ready
  • script.js — The main script containing the chart logic

The Control Add-in Definition

The control add-in definition specifies the startup script, required scripts (including the Google Charts loader loaded from its full URL), and layout properties:

controladdin GoogleCharts
{
    StartupScript = 'charts/startup.js';
    Scripts = 'charts/script.js',
              'https://www.gstatic.com/charts/loader.js';
    HorizontalStretch = true;
    VerticalStretch = true;

    event ControlReady();
    procedure RunSomeCode(Data: JsonArray);
}

An important note about file paths: they are relative to the root of your project. If you rename the folder or move files around, you must update these paths accordingly. This is a common source of errors.

Since Google Charts uses a dynamic loader (google.charts.load() fetches additional JavaScript packages as needed), we can’t download and bundle all the JavaScript locally like Erik usually prefers. Instead, we reference the loader script with its full URL, which works perfectly fine.

The Startup Script

The startup script follows a standard pattern that Microsoft uses for control add-ins. The control add-in isn’t immediately available on the AL side — it takes a moment to initialize. The startup script signals readiness by invoking an extensibility method:

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('ControlReady', []);

This fires the ControlReady event on the AL side, letting your page code know it’s safe to start interacting with the control.

Adding the Control to a Page

One quirk of Business Central is that even though you define a “control add-in,” you insert it onto a page as a usercontrol. Erik initially forgot to add it to the page at all — which is why the Google loader script never appeared in the network tab. A classic rookie mistake!

Once added, reloading the page confirmed that loader.js was loading successfully from Google with a 200 status code.

Getting the Chart to Render

First Attempt: Copy-Pasting Google’s Sample

Erik grabbed the sample JavaScript from Google’s pie chart documentation and pasted it into script.js as a function called RunSomeCode. The first attempt failed with the error:

Uncaught in promise: container not found

The issue? Classic copy-paste error. Google’s sample code references a <div> with the id piechart, but in a Business Central control add-in, the available <div> is called controlAddIn. Changing the element reference from 'piechart' to 'controlAddIn' fixed the problem immediately.

Success!

On the third deployment, the pie chart rendered perfectly inside Business Central — complete with mouse-over tooltips and full interactivity. Google’s sample “My Daily Activities” chart appeared right on the page.

Feeding Real Data from Business Central

Rendering a static sample chart is nice, but the real value comes from displaying actual Business Central data. Erik set up the page to query customer records and pass the data as a JsonArray to the control add-in.

The AL Page Code

Here’s the complete page that queries customer sales data and passes it to the Google Charts control:

page 51100 TestGoogleChart
{
    PageType = Card;
    layout
    {
        area(Content)
        {
            usercontrol(Chart; GoogleCharts)
            {
                ApplicationArea = all;
                trigger ControlReady()
                var
                    Customer: Record Customer;
                    Data: JsonArray;
                    JsonA: JsonArray;
                begin
                    Customer.SetAutoCalcFields("Sales (LCY)");
                    JSonA.Add('Customer');
                    JsonA.Add('Sales');
                    Data.Add(JsonA);
                    if Customer.FindSet() then
                        repeat
                            clear(JsonA);
                            JsonA.Add(Customer.Name);
                            JsonA.Add(Customer."Sales (LCY)");
                            Data.Add(JsonA);
                        until Customer.Next() = 0;
                    CurrPage.Chart.RunSomeCode(Data);
                end;
            }
        }
    }
}

The data structure mirrors what Google Charts expects: an array of arrays where the first entry is the header row (['Customer', 'Sales']) and subsequent entries are data rows (['Customer Name', 12345.67]).

A key detail: you must call clear(JsonA) at the beginning of each loop iteration, otherwise you’ll keep appending to the same array and end up with ever-growing rows.

A Pleasant Surprise: JsonArray Serialization

Erik discovered something he didn’t expect — passing a JsonArray from AL to JavaScript through a control add-in procedure works seamlessly. Business Central automatically serializes the JsonArray into a proper JavaScript array. No manual JSON string conversion needed. As Erik put it: “Hey cool, Microsoft! I didn’t know that was nice.”

The JavaScript Side

On the JavaScript side, the RunSomeCode function receives the data array and uses it directly with the Google Charts API. Instead of hardcoded data, the function uses the passed-in parameter to construct the data table with google.visualization.arrayToDataTable():

function RunSomeCode(json) {
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(function () {
        var data = google.visualization.arrayToDataTable(json);
        var options = { title: 'Customer Sales' };
        var chart = new google.visualization.PieChart(
            document.getElementById('controlAddIn')
        );
        chart.draw(data, options);
    });
}

The Result

After deploying the final version, a fully interactive pie chart appeared on the Business Central page showing customer sales data — with proper labels, values, and hover tooltips. The chart updates based on actual data from the Customer table.

Summary

Integrating Google Charts into Business Central is straightforward once you understand the control add-in pattern. The key steps are:

  1. Create a control add-in definition that loads the Google Charts loader script from its full URL
  2. Use the controlAddIn div (not a custom div name) as the chart container
  3. Signal readiness from the startup script using InvokeExtensibilityMethod
  4. Pass data from AL as a JsonArray, which Business Central automatically serializes for JavaScript
  5. Use Google’s arrayToDataTable() to convert the passed data into a chart-ready format

This approach gives you a lean, fast way to create charts without the overhead of Power BI. And with the enormous variety of chart types available in the Google Charts library — from bar charts to geo charts to gauges — the possibilities extend well beyond simple pie charts.

Picture of hougaard

hougaard