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?

  • 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 '14 at 11:00
  • Yeah, I was using switchType="client", the solution had to be user controlled. – David Gillen Jan 7 '14 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 '14 at 11:55
  • Just tried it, no joy unfortunately. – David Gillen Jan 7 '14 at 11:58
2

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?

  • 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. – David Gillen Jan 27 '14 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.