APP SDK 2.0: Charts in the short term? - rally

Question

I know you guys will be making a really nice charting tool available for 2.0 SDK soon, but until then, I'd like to use Google Charts.
In the 1.x API, you could could define html object by id, and then use getElementById() to get a reference to that item. So for example:
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
But in the new SDK, you don't have an HTML block to work with-- how would you do the following? This question is relevant for any item where you want to pin an object to a place in your html.

Answer 1

In the new API the app base class is simply an extension of Ext.container.Container which itself is an extension of AbstractComponent and so has the getEl() method. (Note that by adding content directly to dom nodes you lose out on the automatic layout functionality provided by Ext containers).
Here's a quick example to illustrate doing something like this though:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'chartContainer'
}
],
launch: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
}
});

Answer 2

In the last answer (your code snippet), you were just missing the items child of the app, which creates the chartContainer element you want to render the chart into. I think this code should work for you:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'chartContainer'
}
],
launch: function() {
//Write app code here
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(this._drawChart);
},
_drawChart: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
var graphArray = [['Module', 'Payload Code', 'Test Code']];
chartData = google.visualization.arrayToDataTable(graphArray);
chart.draw(chartData, {width: 700, height: 500});
}
});

Answer 3

Here's the code. It crashes with "Uncaught TypeError: Cannot read property 'parentNode' of null" inside of "Ext.define.initComponent" initiated from "Ext.define.Rally.loadScripts". Never gets to _drawChart():
I've also added the following line to the rake script to reference the google API:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
And here's App.js:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
//Write app code here
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(this._drawChart);
},
_drawChart: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
var graphArray = [['Module', 'Payload Code', 'Test Code']];
chartData = google.visualization.arrayToDataTable(graphArray);
chart.draw(chartData, {width: 700, height: 500});
}
});

Answer 4

The first draft of the SDK 2.0 charting component is now live.
You can find out about it here.