function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SteveEthosSteveEthos 

Salesforce Javascript error when trying to implement EJSChart into Salesforce

I have a strange Catch-22 situation that I have nailed down, and I do not have a resolution.  I am trying to implement the library:  http://www.ejschart.com into SalesForce.

 

I have it working fine with FireFox and Chrome, but having troubles with IE.  

 

Here is a very simple page:

 

<apex:page > <apex:stylesheet value="{!$Resource.c_ejschart}/EJSChart/EJSChart.css"/> <apex:includeScript value="{!$Resource.c_ejschart}/EJSChart/EJSChart.js"/> <div id="chart6" style="width:400px; height:150px;" class="chart" ></div> <script type="text/javascript"> var ch6 = new EJSC.Chart( "chart6"); ch6.addSeries( new EJSC.BarSeries( new EJSC.ArrayDataHandler( [["1",10],["2",9],["3",10]]))); </script> 

</apex:page> 

 

As you can see, I have zipped up the /dist dir of EJS, and uploaded it as a resource.

 

This code works fine and looks good in FireFox and Chrome.  However, in IE, I am getting a 5 consecutive Javascript errors in SalesForce code:

 

window.sfdcPage = new GenericSfdcPage(); (Microsoft JScript runtime error: 'GenericSfdcPage' is undefined)

new AppPicker('https://www.salesforce.com/appexchange', '/S (Microsoft JScript runtime error: 'AppPicker' is undefined) 

(Microsoft JScript runtime error: 'MenuButton' is undefined)  

(Microsoft JScript runtime error: 'Sidebar' is undefined)   

 

Then SF displays with the Graph looking good. 

 

 

Evidentially something in the EJS library is causing a conflict with the SF Javascript.   I tried putting the <script> for the EJSChart.js in the body of the page, but then EJS does not function in IE, it must be in the <head>.

 

So, here is my quandry:  I have to have EJS in the <head>, but it breaks the SF Javascript.

 

Any thoughts, or any experiences with this?

 

Thanks,

Steve 

SteveEthosSteveEthos

Here are a couple more details:

 

When we use the <apex:includeScript> it places the script at the top of the <head>.  Below is a <script> section : 

<script type="text/javascript">window.sfdcPage = new GenericSfdcPage();
 UserContext.initialize({'isAccessibleMode':false,'ampm':['AM','PM'],'userId':'00580000001hE7a','locale':'en_US','dateTimeFormat':'M\/d\/yyyy h:mm a','timeFormat':'h:mm a','today':'4\/10\/2009 5:28 PM','dateFormat':'M\/d\/yyyy','language':'en_US','siteUrlPrefix':'','userPreferences':[{'value':false,'index':119,'name':'HideUserLayoutStdFieldInfo'}
 

,{'value':false,'index':87,'name':'HideInlineSchedulingSplash'}

 

I do not know of any way to get the EJS <includeScript> to be placed below the SF JS code, yet still be in the <head>

 

If I place the <script> for the EJS in the body, we get error with it (I have opened a priority trouble ticket with Emprise).

 

I think that the package could be a great addition to our development, but only if it is fully compatable with SalesForce. 

 

Steve 
Ron HessRon Hess

EJS is probably hooking the body onload(), and asuming that no one else does.

 

you will have to review that and see how it is done. 

Visualforce & Salesforce pages depends on hooking onload, so other libraries must do so in a compat way.

 

 
SteveEthosSteveEthos

Here is the solution, I just got it to work with SalesForce in IE.

 

After asking for priority help from EJS, they told me to:

 

a)  Put the .js in the BODY

b)  Put a second .js in the BODY

c)  Put in the HEAD: <metaname="ejsc-auto-load-support-files" content="false" />

 

I tested, and this worked in a standalone page.  However, I could not add the META to the HEAD.  Therefore I had to develop a way to add the META to the head.  You will see the answer here, and in a separate posing.  

 

 

 <apex:page>  

  <apex:includeScript value="{!$Resource.c_EJSFix}"/>

  <apex:stylesheet value="{!$Resource.c_ejschart}/EJSChart/EJSChart.css"/>    

  <script type="text/javascript" src="{!$Resource.c_ejschart}/EJSChart/EJSChart.js"></script>

  <script type="text/javascript" src="{!$Resource.c_ejschart}/EJSChart/excanvas.js"></script>

 

There are 2 Static Resources:

 

Resource.c_ejschart  (a zip file with the /dist of EJS)

Resource.c_EJSFix  (a javascript file that has my cool fix)

 

  

----------c_EJSFix-------------------

 function addToHEAD() 

{

  newScript = document.createElement('meta'),

  newScript .setAttribute('name', 'ejsc-auto-load-support-files');

  newScript .setAttribute('content', 'false');

  

  var meta = document.getElementsByTagName('SCRIPT')[0];

  

  meta.parentNode.appendChild(newScript );

}

 

addToHEAD();

 

----------c_EJSFix------------------- 

 

 

This uses javascript to dynamically load a new META into the HEAD.

 

The charts look really good, we are going to use them in many parts of our application.

 

Steve Simpson

Ethos - www.ethos.com
BrightGen StuBrightGen Stu

Hi, I'm trying to get a basic PoC chart working through vf. Source Below.

I believe I've followed your guidance but I still receive errors. Could you advise where I'm going wrong if you get a chance.

 

Any help really appreciated!

 <apex:page >
 <apex:includeScript value="{!$Resource.c_EJSFix}"/>
<title>My Demo Chart</title>
<apex:stylesheet value="{!$Resource.ejschart}dist/EJSChart.css"/>
<body>
<script type="text/javascript" src="{!$Resource.ejschart}/dist/EJSChart.js"></script>
<script type="text/javascript" src="{!$Resource.ejschart}/dist/excanvas.js"></script>
<p>This is a sample page that is used to copy and paste a demo chart into.</p>
<div id="myFirstChart" style="width:600px; height:400px;"></div>
<script type="text/javascript">
    var chart = new EJSC.Chart("myFirstChart",{show_legend: false,title: "My First Custom Chart"});
    var myChartSeries = new EJSC.BarSeries(new EJSC.ArrayDataHandler([["Month 1",1],["Month 2",2],["Month 3",3],["Month 4",4],["Month 5",5]]));
    myChartSeries.color = 'rgb(50,210,50)';
    myChartSeries.lineWidth = 5;
    chart.addSeries(myChartSeries);
</script>
</body>
</apex:page>