Pass ArrayList to JQuery Flot

Question

Good Afternoon.

English is not my native language so please be patient.

I'm a beginner in [see tags] and have a web app which collect a date and a serial to make a sql query and return some data (value from a measure and the date from the measure) to the Action doDrawFlot, in the action this data is formmated to populate a flot graph.

I need an ArrayList<(String or Integer)> and pass it to Javascript to populate a flot graph.

At this moment I have my Action:

public InputStream inputStream;

    public String doDrawFlot() {

        StringBuilder response = new StringBuilder();

        response.append("1_20");
        response.append("2_50");
        response.append("3_10");

        byte[] bArray = response.toString().getBytes();
        inputStream = new ByteArrayInputStream(bArray); 

        return SUCCESS;
    }  

Struts2 XML

<action name="GetProfile" class="com.raspberry.struts.action.PerfilCargaAction" 
        method="doDrawFlot">
    <interceptor-ref name="SessionValidationStack" />
    <result type="stream">
        <param name="contentType">text/html</param>
        <param name="inputName">inputStream</param>
    </result>            
</action>  

And the Javascript File:

$(document).ready(function () {
    //Re-load records when user click 'load records' button.
    $('#LoadRecordsButton').click(function (e) {
        $.ajax({
        type: 'POST',
        url: 'GetProfile?fechaPerfil='+$('#startDate').datepicker({ dateFormat: 'yyyy-mm' }).val()+'&meter=' + $('#meterList option:selected').text(),

        success: function (response) {
console.log(response);    //At request of @Raidri
            var servletResponse = response;

            var str = [];
            var num = [];
            var d1 = [];

            for (var i = 0, len = servletResponse.length; i < len; i++) {

                num.push(parseInt(servletResponse[i].split("_")[0])),
                str.push(parseInt(servletResponse[i].split("_")[1]));
                d1[i] = [num[i],str[i]];    
            }
console.log(d1);    //At request of @Raidri
            $.plot($("#placeholder"), [d1]);
        } 
        });       
        });
    $.plot($("#flotDiv"), [[]]);                
});

As you can see the data isn't in a ArrayList, this is because I'm using a inputstream to pass the data client side.

To pass the data like an array and formatting correctly in the flot is absolutely necessary to use Json (or Gson)?

Or my current build can do the job?

Any ideas (code fixes, POJOs, simple tutorials for a noob) or recomendations?

I'm using struts2 and the mykong tutorial have not helped me.

Update:

At request of @Raidri the output of the two console logs:

console.log(response) : 1_202_503_10

console.log(d1) : [1,NaN][NaN,NaN][2,NaN][0,NaN][2, NaN][NaN,NaN][5,NaN][0,NaN][3,NaN][NaN,NaN][1,NaN][NaN,0]

The stream send a single String, I need an array because the length of the measures could change (i.e. "102" or "0")

Answer 1

As you can see your d1 array is not valid. And your original data string needs some separator between the data points, for example

response.append("1_20;");
...

// response = "1_20;2_50;3_10"

Then we can use the map() function to build our data array like this:

d1 = response.split(';').map(function (datapoint) {
    return datapoint.split('_');
});

// d1 = [["1", "20"], ["2", "50"], ["3", "10"]]