Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Akanksha CullenAkanksha Cullen 

Morris Chart Error - Graph element container not found

I am creating a chart in my visualforce page using morris chart API. The whole page is loadng perfectly including the Chart container but still now able to load the chart. It throws me the following error : 

Graph container not found

From the Github page of Morris, I had got the solution for this error. They've mentioned that one has to include the javascript after the divs. But I have alredy done that. I have included all of my javascripts at the bottom of the page and still getting this error. 

I'd really appreciate some help!

 

Here's my div for the chart:

 

<section id="main-content">
        <section class="wrapper">
        <!-- page start-->
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Customize Graph
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-cog"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div id="graph-area"></div>
                           
                        </div>
                    </section>
                </div>
            </div>
    </section>
</section>

And I have included the scripts like this : 
  
<!--Morris Chart -->

<apex:includeScript value="{!URLFOR($Resource.mythemejs, 'js/morris-chart/morris.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.mythemejs, 'js/morris-chart/raphael-min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.mythemejs, 'js/morris.init.js')}"/>
 I don't understand why this won't work! 
 
Dushyant SonwarDushyant Sonwar
Hi Akansha,
This Issue comes when you are including your css in unsecure protocol i.e http.
https://fonts.googleapis.com/css
edit your three js and css which you have mentioned  and find  'http' and change it to 'https' .
This will surely help you.
 
Akanksha CullenAkanksha Cullen

I have already done all that but still it is showing the error. 
How do I solve it ?
Dushyant SonwarDushyant Sonwar
Hi Akanksha,
If It is possible could you post your whole Page?
Aviator_07Aviator_07
Hi,

Were you able to find the solution for this? I am facing the same issue.

Thanks!