highcharts are not rendering in grails views

Question

I am trying to execute a simple highcharts chart in grails. I have created a controller(Test) and also created index closure in the controller.

In the views , I have created index.gsp page in Test dir. I have copied the code given at http://www.highcharts.com/docs/getting-started/your-first-chart into index.gsp.I have tried the JQuery example. It works fine without any issues. But if I include grails metadata layout code < meta name="layout" content="main" /> in the index.gsp page, the chart never renders the chart.

Could you please some one can provide me a solution to resolve this issue.

Your help would be appreciated.

index.gsp :

<!DOCTYPE html>
<html>
<head>
<title>Test Chart</title>

<meta name="layout" content="main" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>


<script type="text/javascript">
$(function () { 
 $("#container").highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
 });
});
</script>

 </head>

 <body>


 <div id="container" style="width:500px; height:400px;"></div>

</body>
</html>

main.gsp :

 <!DOCTYPE html>
 <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><g:layoutTitle default="Grails"/></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
    <link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
    <link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
    <g:layoutHead/>
    <g:javascript library="application"/>       
    <r:layoutResources />
</head>
<body>
    <div id="grailsLogo" role="banner"><a href="http://grails.org"><img src="${resource(dir: 'images', file: 'grails_logo.png')}" alt="Grails"/></a></div>
    <g:layoutBody/>
    <div class="footer" role="contentinfo"></div>
    <div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading&hellip;"/></div>
    <r:layoutResources />
</body>
</html>

Thanks.

Yes, Please add the code of your layout and index page. Thanks — Biswas

Biswas Biswas · Accepted Answer · 2014-12-05T16:30:56

The position of <g:layoutHead/> and <r:layoutResources/> in main.gsp in not correct. It must be

<r:layoutResources />
<g:layoutHead />

Change this and it will work. Thanks.

highcharts are not rendering in grails views

2 Answers