How to Use SQL Data in a Google Chart


Data used to populate a Google Chart can be dynamically created from a SQL database.

Data can be retrieved from a SQL database using Xbasic. The code below retrieves order information from a SQL table and stores it client-side in the {dialog.object} object:

' Define SQL Query to fetch the data:
dim sql as c
sql = <<%sql%
SELECT Products.ProductName Product, SUM(Order_Details.Quantity) AS SumOfQuantity
FROM Products Products
	 INNER JOIN [Order Details] Order_Details
		 ON  Products.ProductID = Order_Details.ProductID
WHERE Order_Details.OrderID = :OrderID
GROUP BY Products.ProductName

' Define Arguments used in the SQL Query:
dim args as SQL::Arguments
args.set("OrderID", 11055)

dim cn as SQL::Connection

' Connect to the database
if ("::Name::AADemo-Northwind")) then
    ' Fetch the Records:
    if (cn.execute(sql, args)) then

        ' Define the template for the chart data:
        dim template as c
        template = "['{js_escape(\"Product\"))}', {\"SumOfQuantity\")}],"

        ' Merge the SQL Result Set with the template:
        dim txt as c
        txt = a5_mergeDataIntoTemplate(template, cn.resultset)

        ' remove trailing comma
        txt = rtrim(txt,",")

        ' Add the column titles:
        txt = "[['Product','Quantity']," + txt + "]"

        ' Generate the JavaScript to store the data in the
        ' {dialog.object} object:
        dim js as c
        js = "{dialog.object}._data = " + txt + ";"
        ' An error occurred executing the SQL statement
        ' Display an alert with the error message:
        js = "alert('An error occurred: " + js_escape(cn.callResult.text) + "');"
    end if
    ' An error occurred: Unable to open the SQL Connection
    js = "alert('An error occurred. Unable to open \'AADemo-Northwind\' SQL Connection.');"
end if

' Return the javascript:
e.javascript = js

Storing the data in the {dialog.object} allows you to access the information later to load it into a Google chart:

function doChart () {
    ' Get the Chart Data from the {dialog.object}._data property:
    var chartdata = {dialog.object}._data;

    var data = google.visualizations.arrayToDataTable(chartdata);

    var options = {
        title: "Order Breakdown by Product",
        pieHole: 0.4

    var chart = new google.visualizations.PieChart($('donutchart'));
    chart.draw(data, options);
This function does not verify that {dialog.object}._data exists before it is used. {dialog.object}._data may be undefined if an error occurs when retrieving the data from the database.

You are not limited to loading SQL data in the server-side events for the UX Component. SQL data can be dynamically loaded using an ajax callback or loaded using the Client-Side Data Cache.

For more information about how to dynamically load SQL data into a Google Chart, watch the video below:

Using SQL Data in a Google Chart

Download Component

See Also