How to Use SQL Data in a Google Chart
Description
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
%sql%
' 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 (cn.open("::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(ds.data(\"Product\"))}', {ds.data(\"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 + ";"
else
' 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
cn.close()
else
' 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 = jsStoring 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
See Also