How do I get a handle to my dojo chart to resize it?

374 Views Asked by At

I have a dojo line chart that is contained in a hidden panel. Naturally, when the page is opened, the chart is sized with default width and height. When I display the panel though, I want to resize the chart to fit the panel. I found the statement, chart.resize(w,h), but I don't know how to use it. How do I get a handle to the chart itself?

I create the chart using this...

var chart3 = new dojox.charting.Chart2D("#{id:panelSimpleChart}");

but, this just tells the chart where to render. It's not actually assigning that id to the chart, correct?

I found a post with a reference to doing this...

var chart = dijit.byId("#{id:panelSimpleChart}");
if (chart != null ) {
    chart.resize(w,h);
}

but, when I try that using my panel name, chart is null.

This seems to be a simple question, but I'm a little baffled here. Can someone point me in the right direction?

This is the containing panel markup...

<xp:panel id="panelSeatTotals">
    <xp:this.styleClass><![CDATA[#{javascript:"xspDisplayNone"}]]></xp:this.styleClass>

so, it's rendered, but not displayed.

Here's a little more of the code (with irrelevant stuff removed)

<xp:repeat id="repeat1" rows="50" var="asmydata"
    indexVar="asmyindex" value="#{view1}">
    <xp:panel id="panelAsmyDoc">
...
        <xp:table>
...
            <xp:panel id="panelSeatTotals">
                <xp:this.styleClass><![CDATA[#{javascript:"xspDisplayNone"}]]></xp:this.styleClass>
...
                <xp:tr>
                    <xp:td
                        style="padding-left:20.0%">
                        <xc:chartLine_AS></xc:chartLine_AS>
                    </xp:td>

This is from the chart cc:

<xp:panel id="panelSimpleChart"
        style="width:100%; height: 400px;height:200px">

    </xp:panel>

and the script...

makeCharts3 = function(){
    //line chart
   var chart3 = new dojox.charting.Chart2D("#{id:panelSimpleChart}");
...
}
XSP.addOnLoad(makeCharts3);
1

There are 1 best solutions below

0
Bob Cross On

SOLVED Thank you, Mr. xpages-noob, for responding to my call for help and for your expert insight. I decided to render the chart AFTER the containing panel was displayed, thus avoiding the resize problem altogether. So, I copied my makechart function from my custom control and put it in a button on my page - inside my containing panel. After the panel is displayed, the user must select which chart to display (choice of 4 remember), so in the onComplete event of my radio buttons, I call my new Render button to create the chart. This works perfectly. Thank you again for your patience.