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 ]

Answer 1

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

Answer 2

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> ]