This is from the controller.
Code:
// The chart's data store. chartData: [],
// Converts the store into an array.
convertStore: function() {
data = Ext.Array.pluck(Ext.getStore('chartingData').data.items, 'data');
// Empty the chart data array.
this.chartData = [];
this.chartData[0] = [];
// Write the columns to the first index of the array.
if (Ext.getCmp('radioDateRange').getValue() === true) this.chartData[0].push('Date');
if (Ext.getCmp('radioHourly').getValue() === true) this.chartData[0].push('Time');
// Only chart the temperature if the buttons are pressed.
if (Ext.getCmp('btnKWh').pressed === true) this.chartData[0].push('KWh Usage');
if (Ext.getCmp('btnHourlyTemp').pressed === true) this.chartData[0].push('Temperature');
if (Ext.getCmp('btnMinimum').pressed === true) this.chartData[0].push('Min Temp');
if (Ext.getCmp('btnMaximum').pressed === true) this.chartData[0].push('Max Temp');
if (Ext.getCmp('btnAverage').pressed === true) this.chartData[0].push('Avg Temp');
if (Ext.getCmp('btnHeating').pressed === true) this.chartData[0].push('DH Heating');
if (Ext.getCmp('btnCooling').pressed === true) this.chartData[0].push('DH Cooling');
// Loop through the store data and convert into the array.
var dataArray = this.chartData;
Ext.each(data, function(name, index, value) {
// Start with empty array.
var blankArray = [];
// Push the data that needs to be charted into the empty array.
if (Ext.getCmp('radioDateRange').getValue() === true) blankArray.push(name.date);
if (Ext.getCmp('radioHourly').getValue() === true) blankArray.push(name.time);
// If the KWh usage button is on.
if (Ext.getCmp('btnKWh').pressed === true) {
if (name.usage != 0) blankArray.push(name.usage);
else blankArray.push(null);
}
// If the hourly temperature button is on.
if (Ext.getCmp('btnHourlyTemp').pressed === true) {
if (name.temp != 0) blankArray.push(name.temp);
else blankArray.push(null);
}
// If the minimum temperature button is on.
if (Ext.getCmp('btnMinimum').pressed === true) {
if (name.min != 0) blankArray.push(name.min);
else blankArray.push(null);
}
// If the maximum temperature button is on.
if (Ext.getCmp('btnMaximum').pressed === true) {
if (name.max != 0) blankArray.push(name.max);
else blankArray.push(null);
}
// If the average temperature button is on.
if (Ext.getCmp('btnAverage').pressed === true) {
if (name.avg != 0) blankArray.push(name.avg);
else blankArray.push(null);
}
// If the degree hours heating button is on.
if (Ext.getCmp('btnHeating').pressed === true) {
blankArray.push(name.dhh);
}
// If the degree hours cooling button is on.
if (Ext.getCmp('btnCooling').pressed === true) {
blankArray.push(name.dhc);
}
dataArray.push(blankArray);
});
},
// Create an empty chart config.
chartConfig: {
vAxes: [{title: "KWh Used"}, {title: 'Temperature'}],
hAxis: {title: "Day"},
seriesType: "line",
series: {
0: {type: "bars"},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 1},
3: {targetAxisIndex: 1}
},
curveType: 'none'},
// Draws the chart.
drawVisualization: function() {
// Enable the toolbar buttons.
this.enableToolbarButtons();
// Convert the store for the chart.
this.convertStore();
// Create and populate the data table.
var data = google.visualization.arrayToDataTable(this.chartData);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('pChart'));
ac.draw(data, this.chartConfig);
Ext.getCmp('pChartHolder').setLoading(false);
},
This is a clip from the view.
Code:
items: [ {
xtype: 'panel',
region: 'center',
id: 'pChartHolder',
layout: {
type: 'fit'
},
items: [
{
xtype: 'panel',
id: 'pChart',
hidden: true
}
]
}]
The resulting HTML.
HTML Code:
<div id="pChart" class="x-panel x-fit-item x-panel-default" role="presentation" style="width: 1271px; height: 208px;">
<iframe name="Drawing_Frame_42516" id="Drawing_Frame_42516" width="1271" height="208" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<script type="text/javascript">
var _loaded = false; function CHART_loaded() { _loaded = true; }
</script>
</head>
<body marginwidth="0" marginheight="0" onload="CHART_loaded()">
<div id="chartArea">
<svg id="chart" width="1271" height="535">
<defs id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_2"><rect x="191" y="102" width="889" height="331"></rect></clipPath></defs><g><rect x="0" y="0" width="1271" height="535" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><g><text text-anchor="start" x="1116" y="114.75" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#222222">KWh Usage</text></g><rect x="1095" y="102" width="15" height="15" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="191" y="102" width="889" height="331" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="191" y="432" width="889" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="191" y="350" width="889" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="191" y="267" width="889" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="191" y="185" width="889" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="191" y="102" width="889" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect></g><g clip-path="url(#_ABSTRACT_RENDERER_ID_2)"><g><rect x="200" y="326" width="27" height="106" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="244" y="351" width="27" height="81" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="289" y="194" width="27" height="238" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="333" y="227" width="27" height="205" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="377" y="272" width="27" height="160" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="422" y="326" width="27" height="106" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="466" y="297" width="27" height="135" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="511" y="322" width="27" height="110" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="555" y="219" width="27" height="213" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="599" y="177" width="27" height="255" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="644" y="239" width="27" height="193" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="688" y="252" width="27" height="180" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="733" y="351" width="27" height="81" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="777" y="326" width="27" height="106" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="821" y="342" width="27" height="90" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="866" y="186" width="27" height="246" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="910" y="157" width="27" height="275" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="955" y="194" width="27" height="238" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="999" y="264" width="27" height="168" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="1043" y="272" width="27" height="160" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="191" y="432" width="889" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g></g><g></g><g><g><text text-anchor="middle" x="635.5" y="518.75" font-family="Arial" font-size="15" font-style="italic" stroke="none" stroke-width="0" fill="#222222">Day</text></g><g><text text-anchor="end" x="220.075" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 220.075 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-01-2011</text></g><g><text text-anchor="end" x="264.475" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 264.475 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-02-2011</text></g><g><text text-anchor="end" x="308.875" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 308.875 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-03-2011</text></g><g><text text-anchor="end" x="353.275" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 353.275 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-04-2011</text></g><g><text text-anchor="end" x="397.67499999999995" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 397.67499999999995 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-05-2011</text></g><g><text text-anchor="end" x="442.075" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 442.075 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-06-2011</text></g><g><text text-anchor="end" x="486.47499999999997" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 486.47499999999997 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-07-2011</text></g><g><text text-anchor="end" x="530.875" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 530.875 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-08-2011</text></g><g><text text-anchor="end" x="575.275" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 575.275 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-09-2011</text></g><g><text text-anchor="end" x="619.675" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 619.675 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-10-2011</text></g><g><text text-anchor="end" x="664.075" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 664.075 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-11-2011</text></g><g><text text-anchor="end" x="708.4749999999999" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 708.4749999999999 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-12-2011</text></g><g><text text-anchor="end" x="752.875" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 752.875 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-13-2011</text></g><g><text text-anchor="end" x="797.275" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 797.275 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-14-2011</text></g><g><text text-anchor="end" x="841.675" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 841.675 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-15-2011</text></g><g><text text-anchor="end" x="886.0749999999999" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 886.0749999999999 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-16-2011</text></g><g><text text-anchor="end" x="930.475" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 930.475 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-17-2011</text></g><g><text text-anchor="end" x="974.875" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 974.875 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-18-2011</text></g><g><text text-anchor="end" x="1019.275" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 1019.275 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-19-2011</text></g><g><text text-anchor="end" x="1063.675" y="453.0418238982516" font-family="Arial" font-size="15" transform="rotate(-30 1063.675 453.0418238982516)" stroke="none" stroke-width="0" fill="#222222">11-20-2011</text></g><g><text text-anchor="middle" x="85.25" y="267.5" font-family="Arial" font-size="15" font-style="italic" transform="rotate(-90 85.25 267.5)" stroke="none" stroke-width="0" fill="#222222">KWh Used</text></g><g><text text-anchor="end" x="176" y="437.75" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#444444">10</text></g><g><text text-anchor="end" x="176" y="355.25" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#444444">30</text></g><g><text text-anchor="end" x="176" y="272.75" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#444444">50</text></g><g><text text-anchor="end" x="176" y="190.25" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#444444">70</text></g><g><text text-anchor="end" x="176" y="107.75" font-family="Arial" font-size="15" stroke="none" stroke-width="0" fill="#444444">90</text></g></g></g></g><g></g></svg></div><div style="position: absolute; top: 10px; left: 10px; white-space: nowrap; font-family: Arial; font-size: 15px; display: none;">KWhUsage</div></body></html></iframe></div>
Sorry about the HTML, it will probably be easier to look at if needed by loading it into an editor and having it auto format it for you.
"be dom-ready..."
Reply With Quote