High charts and expression language issue - Syntax error on token "{" expected

Question

I am using the below script from highCharts and I am trying to make the data supplied to the charts dynamic using jsp and EL. However, when I try to use EL for substituting the number field, I am getting the error "Syntax error on token "{",. expected"

Please find the snippet below

<script src="jquery.min.js"></script>
<script>
    $(function() {

        // Create the chart
        $('#resourceutilization')
                .highcharts(
                        {
                            chart : {
                                type : 'column'
                            },
                            credits : {
                                enabled : false
                            },
                            title : {
                                text : 'Resource Utilization'
                            },
                            subtitle : {
                                text : 'Project name : '
                            },
                            xAxis : {
                                type : 'category'
                            },
                            yAxis : {
                                title : {
                                    text : 'Percentage Resource share'
                                }

                            },
                            legend : {
                                enabled : false
                            },
                            plotOptions : {
                                series : {
                                    borderWidth : 0,
                                    dataLabels : {
                                        enabled : true,
                                        format : '{point.y:.1f}%'
                                    }
                                }
                            },

                            tooltip : {
                                headerFormat : '<span style="font-size:11px">{series.name}</span><br>',
                                pointFormat : '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                            },

                            series : [ {
                                name : 'Resources',
                                colorByPoint : true,
                                data : [ {
                                    name : '${drillDownProject.resourceName[0]}',
                                    y : ${drillDownProject.resourceContrib[0]}, // Issue here . This is a number
                                }, {
                                    name : '${drillDownProject.resourceName[1]}',
                                    y : ${drillDownProject.resourceContrib[1]}, // and here. This is a number
                                }, {
                                    name : '',
                                    y : 0,
                                }, {
                                    name : '',
                                    y : 0,
                                }, {
                                    name : '',
                                    y : 0,
                                } ],
                            } ],
                        //Drill down start
                        // Drill Down End
                        });
    });
</script>

Answer 1

You could try placing in a JS variable and check,

<script type="text/javascript">
    var resourceName = '${drillDownProject.resourceName[0]}';
    var contribution = '${drillDownProject.resourceContrib[0]}';

    ....

    {
        name : resourceName,
        y : contribution, 
    },

</script>

Make sure you are using Servlet 2.4 or above. Check your web.xml for servlet version. BalusC already answered how-to-pass-an-el-variable-to-javascript. Also check this.