Adding a chart to a page causes my records not to load

  • 1
  • Question
  • Updated 4 years ago
Hi - I'm trying to add a chart to one of my pages.  I followed the chart piece of the Superbank launch webinar and the steps in the help document  Visualizations: Charts and Graphs.  I can preview it and it looks great.  But when I try to reload my page to see what everyone will see, nothing loads.  It also affects loading my other pages.  Any thoughts on what i'm missing? Thanks in advance!
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hey Kris,

Whenever I run into these sorts of problems, my first step is to open the Chrome JavaScript console and see if any error messages are logged.

Irvin
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
Thanks Irvin.  JavaScript console shows:  Failed to load resource: the server responded with a status of 404 (Not Found).  I've gone through all the settings for my chart on this page, but I don't see anything that might cause this....
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
With the JS console open, do you see anything else if you hit F5 (reload the page)?
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
I do....  I see:

'Attr.nodeValue' is deprecated. Please use 'value' instead.skuid__SkuidJS:22

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM1052:2

Uncaught TypeError: undefined is not a function
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Don't you just love messages like "... detrimental effects to the end user's experience. ...". Sorry, a little levity on a Saturday afternoon is good for the soul.

Hard to say without seeing your page. Usually, folks will post their XML or allow the Skuid team support access to the Org.
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
And, i do love messages like that....detrimental effects....  :-)
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
Here is my XML:

<skuidpage unsavedchangeswarning="yes" showsidebar="false" showheader="false">   <models>
      <model id="ModelPatientEventsSR" limit="500" query="true" createrowifnonefound="false" sobject="PPT2__Patient_Event__c">
         <fields>
            <field id="Cancellation_Reason__c"/>
            <field id="Cancellation_Reason_Detail__c"/>
            <field id="PPT2__Clinician__c"/>
            <field id="PPT2__Clinician__r.Name"/>
            <field id="PPT2__Date_of_Service__c"/>
            <field id="PPT2__Event_Type__c"/>
            <field id="PPT2__Event_Status__c"/>
            <field id="PPT2__Patient__c"/>
            <field id="PPT2__Patient__r.Name"/>
            <field id="Co_Facilitator__c"/>
            <field id="Co_Facilitator__r.Name"/>
            <field id="Additional_Co_Facilitator__c"/>
            <field id="Additional_Co_Facilitator__r.Name"/>
            <field id="Equine_Co_Facilitator__c"/>
            <field id="PPT2__Intern__c"/>
            <field id="PPT2__Intern__r.Name"/>
            <field id="ReferringOrg__c"/>
            <field id="ReferringOrg__r.Name"/>
            <field id="Hours__c"/>
            <field id="PPT2__Event_Start__c"/>
            <field id="PPT2__Event_End__c"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="" enclosevalueinquotes="false" field="PPT2__Date_of_Service__c" operator="=" state="filterableoff" inactive="true" name="PPT2__Date_of_Service__c"/>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="PPT2__Event_Status__c" state="filterableoff" inactive="true" name="PPT2__Event_Status__c"/>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="PPT2__Event_Type__c" state="filterableoff" inactive="true" name="PPT2__Event_Type__c"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <skuidvis__chart model="ModelPatientEventsSR" maintitle="{{Model.labelPlural}}" type="column">
         <dataaxes>
            <axis id="axis1" title="Total"/>
         </dataaxes>
         <categoryaxes>
            <axis id="categories" categorytype="field" field="PPT2__Date_of_Service__c" fillvals="true" dategranularity="calmonth">
               <allowedgranularities>
                  <type>none</type>
                  <type>day</type>
                  <type>calweek</type>
                  <type>calmonth</type>
                  <type>calquarter</type>
                  <type>calyear</type>
               </allowedgranularities>
            </axis>
         </categoryaxes>
         <serieslist>
            <series valuefield="PPT2__Date_of_Service__c" splittype="field" aggfunction="count" splitfield="Cancellation_Reason__c"/>
         </serieslist>
         <colors/>
         <legend layout="vertical" halign="right" valign="bottom"/>
         <allowedtypes>
            <type>line</type>
            <type>spline</type>
            <type>area</type>
            <type>areaspline</type>
            <type>column</type>
            <type>bar</type>
         </allowedtypes>
      </skuidvis__chart>
      <skootable showconditions="true" showsavecancel="true" searchmethod="server" searchbox="true" showexportbuttons="true" pagesize="100" createrecords="true" model="ModelPatientEventsSR" buttonposition="" mode="read">
         <fields>
            <field id="PPT2__Date_of_Service__c" columnwidth="10%" allowordering="true">
               <label>DOS</label>
            </field>
            <field id="PPT2__Event_Start__c"/>
            <field id="PPT2__Event_End__c"/>
            <field id="PPT2__Patient__c" allowordering="true" columnwidth="10%"/>
            <field id="PPT2__Clinician__c" allowordering="true" columnwidth="10%"/>
            <field id="Co_Facilitator__c" allowordering="true" columnwidth="10%"/>
            <field id="Additional_Co_Facilitator__c" columnwidth="10%" allowordering="true">
               <label>Add'l Co-Facilitator</label>
            </field>
            <field id="PPT2__Intern__c" columnwidth="10%" allowordering="true"/>
            <field id="Equine_Co_Facilitator__c" columnwidth="10%" readonly="false">
               <label>Equine</label>
            </field>
            <field id="ReferringOrg__c" allowordering="true" columnwidth="10%">
               <label>Referring Org</label>
            </field>
            <field id="PPT2__Event_Type__c" allowordering="true" columnwidth="10%"/>
            <field id="Hours__c" columnwidth="10%" allowordering="true">
               <label>Hours</label>
               <summaries>
                  <summary>sum</summary>
               </summaries>
            </field>
            <field id="PPT2__Event_Status__c" allowordering="true" columnwidth="10%"/>
            <field id="Cancellation_Reason__c" columnwidth="10%" readonly="false"/>
            <field id="Cancellation_Reason_Detail__c" columnwidth="10%" readonly="false">
               <label>Cancellation Detail</label>
            </field>
         </fields>
         <rowactions>
            <action type="edit">
               <drawer title="Drawer Area" width="800" closehandle="true">
                  <components/>
               </drawer>
            </action>
            <action type="popup" label="View Record" icon="ui-silk-magnifier">
               <drawer title="Drawer Area" width="800" closehandle="true">
                  <components/>
               </drawer>
               <popup width="95%" title="Viewing {{Model.label}}: {{Name}}">
                  <components>
                     <includepanel type="skuid" pagename="PatientEventDetailsPage" module="" querystring="?id={{Id}}"/>
                  </components>
               </popup>
            </action>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
         <filters>
            <filter type="select" filteroffoptionlabel="Date of Service" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" condition="PPT2__Date_of_Service__c">
               <sources>
                  <source type="manual" effectsbehavior="justdefault">
                     <options>
                        <option label="Today" type="simple" value="TODAY"/>
                        <option label="This Week" type="simple" value="THIS_WEEK"/>
                        <option label="This Month" type="simple" value="THIS_MONTH"/>
                        <option label="This Year" type="simple" value="THIS_YEAR"/>
                        <option label="Last 7 Days" type="simple" value="LAST_N_DAYS:7"/>
                        <option label="Last 14 Days" type="simple" value="LAST_N_DAYS:14"/>
                        <option label="Last 30 Days" type="simple" value="LAST_N_DAYS:30"/>
                        <option label="Last 60 Days" type="simple" value="LAST_N_DAYS:60"/>
                        <option label="Last 90 Days" type="simple" value="LAST_N_DAYS:90"/>
                        <option label="Last Year" type="simple" value="LAST_YEAR"/>
                     </options>
                  </source>
               </sources>
            </filter>
            <filter type="select" filteroffoptionlabel="Event Type" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" condition="PPT2__Event_Type__c">
               <sources>
                  <source type="metadata" effectsbehavior="justdefault"/>
               </sources>
            </filter>
            <filter type="select" filteroffoptionlabel="Event Status" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" condition="PPT2__Event_Status__c">
               <sources>
                  <source type="metadata" effectsbehavior="justdefault"/>
               </sources>
            </filter>
         </filters>
         <exportproperties usetablecolumns="true"/>
         <searchfields/>
      </skootable>
   </components>
   <resources>
      <labels/>
      <javascript/>
      <css/>
   </resources>
</skuidpage>
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Kris,

That "Uncaught TypeError: undefined is not a function" is likely where everything is coming to a halt, though I'm not seeing anything in your chart XML that definitely looks off. Are the PPT2__Date_of_Service__c and Cancellation_Reason__cfields showing up fine in the table? Would you be willing to grant us login access so that we could take a closer look? If so (and after doing so), just send support@skuidify.com the Org ID. Thanks!
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
Hi J,

The date of service and cancellation reason both show up fine in the table until i add the chart - then nothing will load.

I'm sorry I don't know this, but where do i find my org id?  I looked around, but don't see it....

Thanks!
Kris
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Go to Setup > Administer > Company Profile > Company information > Salesforce.com Organization ID
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hey Kris,

Sometimes process of elimination can help.  Clone your page and remove elements one at a time until the page loads fine.  Just an idea to keep you moving.

Irvin
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
Found it.  Thanks Irvin!  

I tried removing different things in the chart to see if it will load, but the only way it loads is if i remove the whole chart....  Do you have a suggestion on which elements i might try removing?

Thanks for all the help!
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
What if you removed everything but the chart on the page?  
Maybe create a new page and recreate the chart.
Play with the chart options e.g. reduce the PPT2__Date_of_Service__c granularity options, etc.
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
I created a test page that just has my chart.  I reduced the chart granularity options etc...  same thing.  it won't load.  
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Remove the split field and see what happens.  
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
Removed the split field.  Nothing loads on my page.  It's blank.
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
OK, silly question.  If you create a new page with a very simple chart, does it load OK?

<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="Opportunity">   <models>
      <model id="Opportunity" limit="100" query="true" createrowifnonefound="false" sobject="Opportunity">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
            <field id="StageName"/>
            <field id="Id"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Opportunity">
         <maintitle>
            <template>{{Model.labelPlural}}</template>
         </maintitle>
         <subtitle>
            <template>Home</template>
         </subtitle>
         <actions>
            <action type="savecancel"/>
         </actions>
      </pagetitle>
      <skuidvis__chart model="Opportunity" maintitle="{{Model.labelPlural}}" type="donut" subtitle="by Stage">
         <dataaxes>
            <axis id="axis1"/>
         </dataaxes>
         <categoryaxes>
            <axis id="categories"/>
         </categoryaxes>
         <serieslist>
            <series valuefield="Id" splittype="field" aggfunction="count" splitfield="StageName"/>
         </serieslist>
         <colors/>
         <legend layout="horizontal" halign="center" valign="bottom"/>
      </skuidvis__chart>
      <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Opportunity" mode="read">
         <fields>
            <field id="Name" allowordering="true"/>
            <field id="StageName" valuehalign="" type=""/>
            <field id="CreatedDate" allowordering="true"/>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
      </skootable>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript/>
   </resources>
</skuidpage>
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
My page is pretty simple, i think...?

<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true">   <models>
      <model id="PatientEventSR" limit="20" query="true" createrowifnonefound="false" sobject="PPT2__Patient_Event__c">
         <fields>
            <field id="PPT2__Date_of_Service__c"/>
            <field id="PPT2__Event_Status__c"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
   </models>
   <components>
      <skuidvis__chart model="PatientEventSR" maintitle="{{Model.labelPlural}}" type="line">
         <dataaxes>
            <axis id="axis1" title="total"/>
         </dataaxes>
         <categoryaxes>
            <axis id="categories" categorytype="field" field="PPT2__Date_of_Service__c" fillvals="true" dategranularity="calmonth"/>
         </categoryaxes>
         <serieslist>
            <series splittype="none" aggfunction="count" valuefield="PPT2__Date_of_Service__c" splitfield="PPT2__Event_Status__c"/>
         </serieslist>
         <colors/>
         <legend layout="horizontal" halign="center" valign="bottom"/>
      </skuidvis__chart>
   </components>
   <resources>
      <labels/>
      <javascript/>
      <css/>
   </resources>
</skuidpage>
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Kris,

What browser (including version) are you using? Are you having this issue with all users, or is it only occurring when you log in as some Users?
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
I've tried loading this page (and the test page) in both chrome and firefox.  I'm the only one that has tried this, so am not sure if other users see this problem yet....

I did give Skuid access to my org and sent the email you suggested so you could see what i'm doing wrong...

Thanks!
Kris
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Yep, I just took a look, but unfortunately, I'm unable to replicate the issue. The "test" page loads fine for me using Chrome 40.0.2214.115 (64-bit). Just to make sure we're on the same page, here are the exact steps I'm taking:
  1. Click on the "Pages" Salesforce tab to bring up the Skuid Page list
  2. Click on the "Preview" button (second of the three row actions) next to the "test" page in the list
Should I be doing something different in order to replicate the issue?
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
Hi J,

Thanks for your quick response.  I do see it preview just fine too.  Instead of previewing it, can you see it OK if you load it in the UI, like users will do?  That's where i can't make it load.

Thanks!
Kris
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
Hi Irvin,

I wanted to let you know that I gave Skuid access to our org and they figured out why i was having the issue - there was a jquery that was causing a conflict for my page, so now it's fixed.  I just wanted to say thank you for all your help!!!  I appreciate all your help and input!

Kris
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Irvin,

I want to add my thanks to Kris's. Thanks for being such a big part of this community and for jumping in to help folks like you so often do.
Photo of Kris

Kris

  • 574 Points 500 badge 2x thumb
I just started using this community for things i haven't been able to figure out and have struggled with figuring out.   I have learned lots from y'all - it has been awesome!  Thank you!
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hey Kris,  

Glad to hear problem resolved.  Been there too many times.