3

I have a very basic graph set up with some simple data coming from a controller.

<apex:chart data="{!leads}" height="300" width="400">
    <apex:legend position="left"/>
    <apex:axis type="Numeric" position="left" title="Nos Leads" grid="true" fields="data">
        <apex:chartLabel />
     </apex:axis>
      <apex:axis type="Category" position="bottom" fields="label" title="Firm">
          <apex:chartLabel rotate="315"/>
      </apex:axis>
      <apex:barSeries orientation="vertical" axis="left" xField="label" yField="data"/>
</apex:chart>

This graph displays fine when inside of a normal <apex:page>. However, when wrapped inside of <apex:tabPanel><apex:tab> what displays is gibberish. Even viewing the source and exporting the SVG code for the graph displays gibberish. Other content within the tabs displays correctly.

Can an <apex:chart> be used inside of a <apex:tabPanel>? And if so, what needs to be done to make it work?

4
  • I think I was playing with it but it was ~ year ago and I've ended up ditching the tabPanel (I got it to work but it made more business sense to not have tabs after all). I'll try digging in backups... Can you try with switchType="client"?
    – eyescream
    Jan 7, 2014 at 11:00
  • Yeah, I was using switchType="client", the solution had to be user controlled. Jan 7, 2014 at 11:02
  • Try forcing the page to by HTML5. In the apex:page element, try adding this attribute: docType="html-5.0"
    – pchittum
    Jan 7, 2014 at 11:55
  • Just tried it, no joy unfortunately. Jan 7, 2014 at 11:58

1 Answer 1

1

I was close but wrong with my comment ;) It should work OK with switchType="server"

<apex:page readonly="true">
<apex:tabPanel switchType="server" id="panel">
    <apex:tab label="Pie chart" id="tab1">
        <script>
        var pieData = [{'data1':100, 'name':'Alice'}, {'data1':30, 'name':'Bob'}, {'data1':55, 'name':'Carl'}, {'data1':60, 'name':'Dan'}];
        </script>

        <apex:chart data="pieData" height="200px" width="200px">
            <apex:pieSeries labelField="name" dataField="data1"/>
        </apex:chart>
    </apex:tab>
    <apex:tab label="Line chart" id="tab2">
        <script>
        var barData = [{'data':100, 'label':'UK'}, {'data':30, 'label':'France'}, {'data':55, 'label':'Spain'}, {'data':60, 'label':'Germany'}];
        </script>

        <apex:chart data="barData" height="200px" width="300px">
            <apex:legend position="left"/>
            <apex:axis type="Numeric" position="left" title="Nos Leads" grid="true" fields="data" minimum="0">
            </apex:axis>
            <apex:axis type="Category" position="bottom" fields="label" title="Country">
                <apex:chartLabel rotate="315"/>
            </apex:axis>
            <apex:barSeries orientation="vertical" axis="left" xField="label" yField="data"/>
        </apex:chart>
    </apex:tab>
</apex:tabPanel>
</apex:page>

enter image description here

"client" results with a broken chart (only few random lines visible).

"ajax" throws an error that looks like ExtJS error (at least in Chrome, I'm lazy...).

Uncaught TypeError: Cannot read property 'dom' of null

Quick search yields these:

  1. http://cdn.sencha.com/ext-4.1.1-gpl/release-notes.html
  2. https://stackoverflow.com/questions/6178418/error-trying-to-extend-extjs-combobox-cannot-read-property-dom-of-null
  3. http://www.sencha.com/forum/showthread.php?123055-Uncaught-TypeError-Cannot-read-property-dom-of-null

If you feel adventurous, you might try force including newer version of ExtJS... or file a case with support?

1
  • Yes, after lots of playing around I came to a similar result. Will have to change some things, but using switchType="server is indeed the approach to take. Jan 27, 2014 at 10:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .