1. #11
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Answers
    9
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @drjames--

    It might be useful if you posted the config for the containing Panel instance, and the Google visualization script fragment that renders it into your Panel.

    Need to find out where all that got rendered to, first.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  2. #12
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    drjamescook is on a distinguished road

      0  

    Default


    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.

  3. #13
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Answers
    9
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @drjames--

    The visible portion of a Panel is it's body.

    Target your chart to render there:
    Code:
     // Create and draw the visualization.
            var ac = new google.visualization.ComboChart(Ext.getCmp('pChart').body.dom );
    Then, the Panel.update method should work better:

    Code:
    Ext.getCmp('pChart').update('');    //clear out the body
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar