Displaying data ArrayList (EJB + Servlet + JSP(JSTL)) to JavaScript ArrayList

Question

In a servlet I send ArrayList on JSP page and try to insert ArrayList into JavaScript(Highcharts), but I don't have any idea how to do it.

This code below is the code that take ArrayList from servlet on JSP page.

<c:forEach items="${elecMeterRecordList}" var="el" >
    ${el.electricity_meter_record_unit}
</c:forEach>

And the code below is Javascript(highcharts) that I want to display ArrayList that sent from servlet.

<script type="text/javascript">
                $(function() {
                    $('#container').highcharts(
                            {
                                chart : {
                                    type : 'line'
                                },
                                title : {
                                    text : 'Monthly Average Temperature'
                                },
                                subtitle : {
                                    text : 'Source: WorldClimate.com'
                                },
                                xAxis : {
                                    categories : [ 'Jan', 'Feb', 'Mar',
                                            'Apr', 'May', 'Jun', 'Jul',
                                            'Aug', 'Sep', 'Oct', 'Nov',
                                            'Dec' ]
                                },
                                yAxis : {
                                    title : {
                                        text : 'Temperature (°C)'
                                    }
                                },
                                plotOptions : {
                                    line : {
                                        dataLabels : {
                                            enabled : true
                                        },
                                        enableMouseTracking : false
                                    }
                                },
                                series : [
                                        {
                                            name : 'Water',
                                            data : [ 7.02, 6.91, 9.53,
                                                    14.54, 18.41, 21.54,
                                                    25.21, 26.54, 23.35,
                                                    18.23, 13.91, 9.26 ]
                                        },
                                        {
                                            name : 'Electricity',
                                            data : [ 3.49, 4.25, 5.67,
                                                    8.35, 11.59, 15.26,
                                                    17.20, 16.63, 14.32,
                                                    10.35, 6.56, 4.08 ]
                                        } ]
                            });
                });
            </script>

The code here, I want to replace these data with the ArrayList.

data : [ 3.49, 4.25, 5.67,
        8.35, 11.59, 15.26,
        17.20, 16.63, 14.32,
        10.35, 6.56, 4.08 ]

What is your actual output?? You can do some manipulation s to make it work. Post your actual response — Nishith Kant Chaturvedi
– Nishith Kant Chaturvedi, Commented Sep 20, 2015 at 8:28

Anan OtO · Accepted Answer · 2015-09-21 10:09:12Z

1

data : [ 3.49, 4.25, 5.67,
    8.35, 11.59, 15.26,
    17.20, 16.63, 14.32,
    10.35, 6.56, 4.08 ]

Just replace the code inside with ArrayList that you take from servlet on JSP, like below. Because this code "${el.electricity_meter_record_unit}" is already ArrayList. After you update the code, you might see some error or red warning but it's able to run anyway. Hope this might help.

data : [ <c:forEach items="${elecMeterRecordList}" var="el" >
                           ${el.electricity_meter_record_unit},
        </c:forEach> ]

answered Sep 21, 2015 at 10:09

Anan OtO

263 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sebastian Bochan · Accepted Answer · 2015-09-21 11:45:09Z

You need to write your array list as json object All you need to do is to use a good json library for example Gson that converts your array list into JSON object Use Ajax request to retrieve your json object from your servlet The following code (javascript code) is taken from highchart demo

$(function () {

    // Get the CSV and create the chart
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {

        $('#container').highcharts({

            data: {
                csv: csv
            },

            title: {
                text: 'Daily visits at www.highcharts.com'
            },

            subtitle: {
                text: 'Source: Google Analytics'
            },

            xAxis: {
                tickInterval: 7 * 24 * 3600 * 1000, // one week
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3
                }
            },

            yAxis: [{ // left y axis
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }],

            legend: {
                align: 'left',
                verticalAlign: 'top',
                y: 20,
                floating: true,
                borderWidth: 0
            },

            tooltip: {
                shared: true,
                crosshairs: true
            },

            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function (e) {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: e.pageX || e.clientX,
                                        y: e.pageY || e.clientY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
                                        this.y + ' visits',
                                    width: 200
                                });
                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            },

            series: [{
                name: 'All visits',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }, {
                name: 'New visitors'
            }]
        });
    });

});

HTH

Collectives™ on Stack Overflow

Displaying data ArrayList (EJB + Servlet + JSP(JSTL)) to JavaScript ArrayList

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related