Display Google Charts as non-interactive static images in Corona using local HTML pages.
This module extracts the PNG data from a locally stored Google Charts HTML page and returns it to Corona using the Google Charts API getImageURI() method.
The ability to get an image of a chart is limited to the corecharts and geomap types only. You will also need to add a simple listener to the HTML pages.
You will first need to create the proper HTML page with the Google Chart you want to render.
The following charts are supported (click for documentation):
- Area
- Bar
- Bubble
- Candlestick
- Column
- Combo
- Donut
- Exploding Slice
- Geo
- Histogram
- Line
- Pie
- Pie 3D
- Scatter
- Stepped Area
- Trend Lines
- Waterfall
Once you have your chart HTML, you will need to add the following JavaScript listener directly before the chart.draw() method (See the examples in the demo/charts directory).
//This listener is required to call Corona
google.visualization.events.addListener(chart, 'ready', function() {
//Return image data to Corona
window.location = "#"+chart.getImageURI();
});Once you've added the listener code, store the HTML file in a local directory in your Corona project.
To use the module in your Corona project, add the module to the root of the project and require it:
local chart = require("google_charts")Load a local Google Chart HTML file and extract the PNG data.
chart.get(chart_html, chart_dir, dest_file, dest_dir, listener)Parameters
| Name | Description | Type | Required |
|---|---|---|---|
| chart_html | The pathname of the chart HTML file that should be rendered to a PNG. | String | Y |
| chart_dir | The Corona system directory the file resides in. If you pass nil for this parameter then system.ResourceDirectory is used. |
Const | Y |
| dest_file | The pathname of the chart PNG that is returned from the chart HTML. | String | Y |
| dest_dir | The Corona system directory the file should be output to. If you pass nil for this parameter then system.DocumentsDirectory is used. |
Const | Y |
| listener | The event listener function that will recieve the PNG properties when finished downloading (see below). | Function | Y |
Listener
The event listener will return the results from the get method. It looks like:
local function onGetChart( event )
if event.error then
print(event.error)
else
print(event.filename, event.baseDir)
end
endThe event.filename and event.baseDir should be passed to a Coronium display.newImage method (or similar) for display.
Corona Example
-- Require the module
local chart = require("google_charts")
-- Create a display handler
local function displayChart(filename, baseDir)
display.newImage(filename, baseDir, display.contentCenterX, display.contentCenterY)
end
-- Create the chart listener
local function onGetChart( event )
if event.error then
print(event.error)
else
displayChart(event.filename, event.baseDir)
end
end
-- Request image for `charts/donut.html` in system.ResourceDirectory
chart.get("charts/donut.html", nil, "chart.png", nil, onGetChart)Alternate get Request Style
You can also pass the parameters as a table. If you leave out the chart_dir and dest_dir keys, the defaults (as shown) will be assumed.
chart.get(params_table, listener)Example
chart.get({
chart_file = "charts/bubble.html",
chart_dir = system.ResourceDirectory, --optional key
dest_file = "mycharts/bubble_chart.png"
dest_dir = system.DocumentsDirectory --optional key
}, onGetChart)charts/donut.html
Example Google Charts HTML file with added listener for Corona.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
//----------------------------------------------------------------------
// You must add this listener to the Google Chart HTML before the
// chart.draw() method to retrieve the PNG image.
//----------------------------------------------------------------------
google.visualization.events.addListener(chart, 'ready', function() {
//Return image data to Corona
window.location = "#"+chart.getImageURI();
});
//----------------------------------------------------------------------
chart.draw(data, options);
}
</script>
</head>
<body>
<!-- On most charts the width and height adjust the output size -->
<div id="donutchart" style="width: 900px; height: 500px;"></div>
</body>
</html>