populating google PIE chart with java string returned through ajax

Question

I am using this Google Pic Chart for the first time and hence I would request you to help me in resolving the below issue.

I am using two charts: Bar chart and Pie chart. If i click a particular column in the bar chart the corresponding pie chart should be loaded in the same screen, the value for the pie chart is populated using an ajax call. The issue is that I am returning a string in the form of javascript arraylist. I can see that the returned string is in correct format but I am getting Uncaught Error : Not an Array.

I am using google.visualization.arrayToDataTable() method to generate the Pie Chart. Please provide your valuable help to resolve this. Code given below.

JSP Code:
*********
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Incident Entry</title>
<link href="css/style_strauto.css" type="text/css" rel="stylesheet" />
<link href='css/ui-lightness/jquery-ui.min.css' type="text/css"
    rel="stylesheet" />
<link href='css/warning_style.css' type="text/css" rel="stylesheet" />
<link href='css/timePicker.css' type="text/css" rel="stylesheet" />
<script type="text/javascript"
    src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript"
    src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {
        packages : [ "corechart" ]
    });
    var barChart;
    var piChart;
    google.setOnLoadCallback(drawChart);
    var barData = google.visualization
            .arrayToDataTable([ <c:out value="${incidentArray}" escapeXml="false" /> ]);
        var piData = google.visualization
            .arrayToDataTable(<c:out value="${piChatArray}" escapeXml="false" />);  
    function drawChart() {

        var barView = new google.visualization.DataView(barData);
        barView.setColumns([ 0, 1, {
            calc : "stringify",
            sourceColumn : 1,
            type : "string",
            role : "annotation"
        }, 2 ]);

        var barOptions = {
            title : "Top 10 CI's with High Incidents",
            width : 500,
            height : 350,
            bar : {
                groupWidth : "95%"
            },
            legend : {
                position : "none"
            },
            is3D : true
        };

        var piOptions = {
            width : 500,
            height : 350,
            title : 'Detail Analysis of CI\'s',
            is3D : true
        };

        var piChart = new google.visualization.PieChart(document
                .getElementById('piechart'));
        barChart = new google.visualization.ColumnChart(document
                .getElementById("columnchart_values"));
        piChart.draw(piData, piOptions);
        barChart.draw(barView, barOptions);
        google.visualization.events.addListener(barChart, 'select',
                myClickHandler);

        function myClickHandler(e) {

            var row = "";
            var column = "";
            var selection = barChart.getSelection();

            for (var i = 0; i < selection.length; i++) {
                var item = selection[i];
                if (item.row != null && item.column != null) {
                    row = item.row;
                    column = item.column;
                } else if (item.row != null) {
                    row = item.row;
                } else if (item.column != null) {
                    column = item.column;
                }
            }
             makeServerAjaxCall(row,column);
            //var piArrayList =$('#result').text();
            var piArrayList = [["Incidents","Percentage"],["Resolver Self-Creation",38],];
            //var res = piArrayList.split("|");
            alert(piArrayList);
            piData = google.visualization.arrayToDataTable(piArrayList);
            drawChart(); 
        }
    }

    function makeServerAjaxCall(row, column) {
        var returnVal;
        $.ajax({
            type : 'GET', // Or any other HTTP Verb (Method)
            url : 'incident_managment_pichart.htm',
            data : {
                rowVal : row,
                colVal : column
            },
            async : false,
            // async * false = !async = sync
            success : function(responseText) {
            //alert($.parseJSON(responseText));
             $("#result").html(responseText);
                returnVal = $("#result").html(responseText);

            },
            error : function(e) {
                alert("An error occured: " + e.status + " " + e.statusText);
                returnVal = '';
            }
        });

        return returnVal;
    }

    //Ajax Call for getting PI Chart Data

    //
</script>
<style>
table {
    font-family: arial, helvetica;
    font-size: 10pt;
    cursor: default;
    margin: 0;
    background: rgb(252, 248, 248);
    border-spacing: 0;
    color: black;
}
</style>
</head>
<body>
    <form:form id="barChartForm" method="GET"
        action="incident_managment_pichart.htm">
        <!-- Header Start -->
        <div id="hd">
            <div class="inner">
                <a class="logo" href="#">Logo</a>
                <h1 class="appName">Incident Report</h1>

            </div>
        </div>
        <!-- Header End -->

        <!-- Nav Start -->
        <div id="nav">
            <div class="inner">
                <div class="userProfile">
                    <img src="images/icoProfile.png" alt="User" /> <span><spring:message
                            code="capone.ito.dashboard.common.header.label.analyser" /></span>
                </div>
                <div class="links">
                    <a href="dashBoardHome.htm"> <spring:message
                            code="capone.ito.dashboard.common.header.label.home" />
                    </a>
                </div>
                <div class="menu">
                    <a href="##"><spring:message
                            code="capone.ito.dashboard.common.menu.label.dailyBoard" /></a> | <a
                        href="##"><spring:message
                            code="capone.ito.dashboard.common.menu.label.weeklyBoard" /></a> | <a
                        href="##"><spring:message
                            code="capone.ito.dashboard.common.menu.label.monthlyBoard" /></a> |
                    <a href="##"><spring:message
                            code="capone.ito.dashboard.common.menu.label.notification" /></a> |
                    <a href="##"><spring:message
                            code="capone.ito.dashboard.common.menu.label.upload" /></a>
                </div>
            </div>
        </div>
        <div style="margin-bottom: -20px;" id="bgnone" class="inner bdBGHome">
            <div class="clearboth ">
                <table>
                    <tr>
                        <td><div id="columnchart_values"
                                style="width: 475px; height: 350px;"></div></td>
                        <td><div id="piechart" style="width: 475px; height: 350px;"></div>
                        <div id="result"></div></td>
                </table>


            </div>
        </div>
    </form:form>
    <!-- Footer Start -->
    <div id="ft" class="inner">
        <span class="copyrights"></span>
    </div>
    <!-- Footer End -->
</body>
</html>

Response from AJAX:
******************
[["Incidents","Percentage"],["Resolver Self-Creation",38],]

AJAX Method call
*****************
public String doGeneratePIChart(ModelMap model, @RequestParam String rowVal,@RequestParam String colVal, HttpServletRequest request,
                  HttpServletResponse response) throws NumberFormatException, Exception
      {

            logger.debug("[IncidentManagementController doGeneratePIChart] : start");
            String piArray;
            List<PIChartVO> piChartVOList = new ArrayList<PIChartVO>();
            int row = Integer.valueOf(rowVal);
            IncidentRequestVO incidentVO = new IncidentRequestVO();// (IncidentRequestVO)
            // model.get("incidentRequestVO");
                  piChartVOList = incidentManageBO.getPIChartVO("ENVITOWINTELPROD");
            logger.debug("[IncidentManagementController : doGeneratePIChart] Array length :" + piChartVOList.size());
            piArray = toPIJavascriptArray(piChartVOList);
            logger.debug("[IncidentManagementController : doGeneratePIChart] Array String using internal -" + piArray);
            incidentVO.setPiChartList(piArray);
            logger.debug("[IncidentManagementController : doGeneratePIChart] row, column values :" + rowVal + "," + colVal);

            try {
                    response.getWriter().write(piArray);
                } catch (IOException e) {
                    logger.error("Error occure while retriving the server Details value " + e);     }
                return null;
}

sathi_sathi · Accepted Answer · 2014-09-10 11:16:54Z

0

I resolved using the below code and removing the extra "," that was dislayed in Response from AJAX

        var piArrayList = makeServerAjaxCall(row,column);
        var obj = $.parseJSON(piArrayList);
        piData = google.visualization.arrayToDataTable(obj);
        drawChart();

Thanks for your help anyway :-)

answered Sep 10, 2014 at 11:16

sathi_sathi

12 bronze badges

Add a comment |

Collectives™ on Stack Overflow

populating google PIE chart with java string returned through ajax

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related