Google Charts - Multiple lines on a single chart

Question

I am having a little trouble with plotting data on google charts.

I have a version which works. Here I have single line on the chart. Data is returned in a 2d array format. Which I convert to Javascript array. Then I go ahead and plot.

CASE - 1

JAVA code which returns the data to JSP

            public int[][] getResult(Long ExpId, String CompareField){


                int[][] multi = new int[1][11];


              Gson gson = new GsonBuilder().create();

              multi[0][0] = 199;
              multi[0][1] = 379;
              multi[0][2] = 447;
              multi[0][3] = 360;
              multi[0][4] = 996;
              multi[0][5] = 398;
              multi[0][6] = 435;
              multi[0][7] = 385;
              multi[0][8] = 1151;
              multi[0][9] = 270;
              multi[0][10] = 330;



              String m = gson.toJson(multi);

                return multi;



              }

JSP Code to plot graph,

            <script type="text/javascript"
                src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>



            <script type="text/javascript">   
                function procChart(){

                    <% System.out.println("Inside procChart"); %>

                    var ExpList = new Array();
                    ExpList = request.getParameterValues("chkExps");
                    ExpList.push(request.getParameter("expId"));
                    <jsp:useBean id="compare"
                        class="org.server.experiment.CompareResults" />

                        <%int[][] data4= compare.getResult(Long.valueOf(request.getParameter("expId")), request.getParameter("field")); %>;
                        <% System.out.println(data4); %>
                    // Load the Visualization API and the piechart package.




                }
            </script>

            <script type="text/javascript">

                google.load('visualization', '1', {
                    'packages' : [ 'corechart' ]
                });

                // Set a callback to run when the Google Visualization API is loaded.
                google.setOnLoadCallback(drawChart);

                function drawChart() {

                    var te = [[]];

                     <% for (int i=0; i<data4.length; i++) { %>
                     <% for (int j=0; j<data4[i].length; j++) { %>
                     te[<%= i %>][<%= j %>] = "<%= data4[i][j] %>";
                     <% System.out.println(data4[i][j]); %>;
                     <% } %>
                     <% } %>

                    //var te = [[1,2,3,4,5,6,7,8,9,10]];

                    var data = new google.visualization.DataTable();
                    var len = te[0].length;
                    data.addColumn('string', 'State');
                    data.addColumn('number', 'State Rank');
                    data.addColumn('number', 'age');
                    data.addRows(len);
                    for (var i = 0; i < len; i++) {

                        data.setCell(i, 0, ""+(i+1));
                        for (var j = 0; j < 1; j++) {


                            data.setValue(i, j+1, te[j][i]);
                        }
                    }

                    // Instantiate and draw our chart, passing in some options.
                    var chart = new google.visualization.LineChart(document
                            .getElementById('chart_div'));
                    chart.draw(data, {
                        width : 400,
                        height : 240
                    });
                }
            </script>

I get a nice graph in this case.

CASE - 2

However, I want to be able to plot multiple lines on the same graph and tried this. But I see a blank page. I am unable to find where I am going wrong.

JAVA code which returns the array

public int[][] getResult(Long ExpId, String CompareField){

                int[][] multi = new int[2][11];


              Gson gson = new GsonBuilder().create();

              multi[0][0] = 199;
              multi[0][1] = 379;
              multi[0][2] = 447;
              multi[0][3] = 360;
              multi[0][4] = 996;
              multi[0][5] = 398;
              multi[0][6] = 435;
              multi[0][7] = 385;
              multi[0][8] = 1151;
              multi[0][9] = 270;
              multi[0][10] = 330;
              multi[1][0] = 299;
              multi[1][1] = 479;
              multi[1][2] = 547;
              multi[1][3] = 660;
              multi[1][4] = 496;
              multi[1][5] = 298;
              multi[1][6] = 635;
              multi[1][7] = 185;
              multi[1][8] = 1051;
              multi[1][9] = 470;
              multi[1][10] = 130;



              String m = gson.toJson(multi);

                return multi;



              }

The 2-D array looks like this [[199,379,447,360,996,398,435,385,1151,270,330],[299,479,547,660,496,298,635,185,1051,470,130]]

JSP Script

            </script>

            <script type="text/javascript">

                google.load('visualization', '1', {
                    'packages' : [ 'corechart' ]
                });

                // Set a callback to run when the Google Visualization API is loaded.
                google.setOnLoadCallback(drawChart);

                function drawChart() {

                    var te = [[]];

                     <% for (int i=0; i<data4.length; i++) { %>
                     <% for (int j=0; j<data4[i].length; j++) { %>
                     te[<%= i %>][<%= j %>] = "<%= data4[i][j] %>";
                     <% System.out.println(data4[i][j]); %>;
                     <% } %>
                     <% } %>

                    //var te = [[1,2,3,4,5,6,7,8,9,10]];

                    var data = new google.visualization.DataTable();
                    var len = te[0].length;
                    data.addColumn('string', 'State');
                    data.addColumn('number', 'State Rank');
                    data.addColumn('number', 'age');
                    data.addRows(len);
                    for (var i = 0; i < len; i++) {

                        data.setCell(i, 0, ""+(i+1));
                        for (var j = 0; j < 2; j++) {


                            data.setValue(i, j+1, te[j][i]);
                        }
                    }

                    // Instantiate and draw our chart, passing in some options.
                    var chart = new google.visualization.LineChart(document
                            .getElementById('chart_div'));
                    chart.draw(data, {
                        width : 400,
                        height : 240
                    });
                }
            </script>

Google needs this format to display the chart and I tried using manual data (as shown below) to draw the chart and was successful. But dynamically (as shown above in case 2), I am not able to get it.

                function drawChart() {

                    <% System.out.println("Inside drawChart"); %>

                     var data = new google.visualization.DataTable();
                        data.addColumn('string', 'Employee Name');
                        data.addColumn('number', 'salary');
                        data.addColumn('number', 'age');
                        data.addRows(6);
                        data.setCell(0, 0, 'Mike');
                        data.setCell(0, 1, 10);
                        data.setCell(0, 2, 20);
                        data.setCell(1, 0, 'Bob');
                        data.setCell(1, 1, 20);
                        data.setCell(1, 2, 25);
                        data.setCell(2, 0, 'Alice');
                        data.setCell(2, 1, 30);
                        data.setCell(2, 2, 30);
                        data.setCell(3, 0, 'Frank');
                        data.setCell(3, 1, 40);
                        data.setCell(3, 2, 35);
                        data.setCell(4, 0, 'Floyd');
                        data.setCell(4, 1, 50);
                        data.setCell(4, 2, 20);
                        data.setCell(5, 0, 'Fritz');
                        data.setCell(5, 1, 60);
                        data.setCell(5, 2, 40);




                  // Instantiate and draw our chart, passing in some options.
                  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                  chart.draw(data, {width: 400, height: 240});
                }

The moment I start using 2-d array, it starts giving me trouble. Any solutions ?

UPDATE - CORRECT ANSWER

So the problem was with the var te array. This was the correct way to make the array.

                    var te= new Array();

                     <% for (int i=0; i<data4.length; i++) { %>
                        var xe = [];
                     <% for (int j=0; j<data4[i].length; j++) { %>
                        xe[<%= j %>] = <%= data4[i][j] %>;

                     <% } %>
                        te.push(xe);
                     <% } %>

Now my code works.

Answer 1

It should be always setCell instead of setValue as you used. This code with manual data worked for me:

var te = [[25, 34, 22, 45], [45, 28, 19, 23]];

var data = new google.visualization.DataTable();
var len = te[0].length;
data.addColumn('string', 'State');
data.addColumn('number', 'State Rank');
data.addColumn('number', 'age');
data.addRows(len);
for (var i = 0; i < len; i++) {

    data.setCell(i, 0, ""+(i+1));
    for (var j = 0; j < 2; j++) {
        data.setCell(i, j+1, te[j][i]);
    }
}