I can't run your server side code to test this. Open the page (with the
code for your 2-D array) in a browser, view the page source, and paste the
javascript here so I can test it.
On Wednesday, April 2, 2014 6:55:13 AM UTC-4, SG wrote:
>
> 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 ?
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
