Forum:

Other Java Products

Implementation of google charts in JSP

mallikarjun dontamsetti

Ranch Hand

Posts: 246

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi , we have a requirement to implement charts in jsp. in jsp we are getting data based on search page the user given. Example if user want to see the employee from different locations worked around the world in his company. i have to represent the data in pie and bar charts in jsp. i am getting the data in List object of employee. i don't know how to get the data for that charts. give me some example it will be helpfull for me.

Tim Moores

Bartender

Posts: 7645

178

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Does it have to be Google charts? If yes, there are examples on its web site. You might also want to look into the Java library Eastwood (from the maker of JFreeChart) - it's a Java web app that implements the Google Chart API (in case you'd rather have control over chart-making instead of ceding that to Google). There's also a JSP tag library called cewolf (on SourceForge) that can generate charts.

mallikarjun dontamsetti

Ranch Hand

Posts: 246

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

When i ask some one they said google charts are much look good than JFree. so i posted my question like that. please give some example

Tim Moores

Bartender

Posts: 7645

178

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

What, specifically, are you wondering that isn't explained on the Google Charts web site?

mallikarjun dontamsetti

Ranch Hand

Posts: 246

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

my servlet returning list which i am getting at my JSP in the same JSP only i have to display charts based on this data(list) only.

Tim Moores

Bartender

Posts: 7645

178

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

OK. What do you have so far? Using the Google Charts API consists of generating a dynamic <img> URL; do you have that yet?

mallikarjun dontamsetti

Ranch Hand

Posts: 246

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

i just have my jsp and list in the session i am not getting how to pass those perameters and data to google charts

Tim Moores

Bartender

Posts: 7645

178

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Have you gotten any of the examples to work? Which example are you trying to follow to get your stuff to work? I'm getting the impression that you haven't really familiarized yourself with the API; that should be the next step.

mallikarjun dontamsetti

Ranch Hand

Posts: 246

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

i got some example i'll test it first and reply you thanks. here is the link what i got Grails

mallikarjun dontamsetti

Ranch Hand

Posts: 246

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have implemented it like this here is my jsp

<!DOCTYPE html>
<%@ page contentType="text/html;charset=windows-1252"%>
<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="css/login.css"/>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 
  
  <script type="text/javascript">
     google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);

function drawChart() {
   
            var temp=document.getElementById("txt_temp").value;
            var array=new Array();
            array=temp.split(",");
            var temp1=parseInt(array[0]);
             var temp2=parseInt(array[1]);
              var temp3=parseInt(array[2]);
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Less than 5000', temp1],
          ['between 5000 and 10000', temp2],
          ['greater than 10000', temp3]
        ]);
          var options = {'title':'Employee list based on salary',
                       'width':450,
                       'height':300};

// Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        
   }

</script>
    <title>Department Details</title>
  </head>
  <body>
 
 <center><b style="font-size:22px;color:#FF0000;">Department Details</b></center><br/><br/>
    <table  align="center" cellspacing="0" border="1"  width="60%" class="tablec" >
            <tr>
                <th width="100px" >DepartmentNumber</th><th width="300px">DepartmentName</th><th width="200px">Location</th>  
             </tr>
            <c:forEach items="${sessionScope.dept}" var="dept">
            <tr>
                <td align="right"><a href="masterservlet?action=showemp&DEPTNO=${dept.DEPTNO}"><c:out value="${dept.DEPTNO}" /></a></td>
                <td><c:out value="${dept.DNAME}" /></td>
                <td><c:out value="${dept.LOC}" /></td>
           </tr>
            </c:forEach>
 </table>
 <c:if test="${sessionScope.dataLst !=null || !sessionScope.dataLst['empty']}">
   <input type="hidden" value="${sessionScope.dataLst}" name="txt_temp" id="txt_temp"/>
    <div id="chart_div"></div>
  </c:if>
  
<br/><br/>
   <c:set value="5" var="pageSize" />
  <c:choose>
  <c:when test="${empty param.s}">
      <c:set  var="rowStart" value="1" />
  </c:when>
  <c:otherwise>
    <c:set var="rowStart" value="${param.s}"/>  
  </c:otherwise>
  </c:choose>
  
  
  <c:choose>
      <c:when test="${empty param.e}">
           <c:set var="rowEnd" value="${pageSize}"/>
      </c:when>
    <c:otherwise>
        <c:set var="rowEnd" value="${param.e}" />
    </c:otherwise>
  </c:choose>
  
  
  <center><b style="font-size:22px;color:#FF0000;">Employee Details</b></center><br/>
  <table width="80%" cellspacing="0" align="center">
    <tr>
      <td>
  <c:set value="${fn:length(sessionScope.emps)}" var="rLen"/>

<c:if test="${rowStart gt 1}"> 
<c:url value="/masterdetails.jsp?s=${rowStart-pageSize}&e=${rowEnd-pageSize}" var="urlPrev"/> 
<a href="${urlPrev}">< Prev</a>
</c:if>  
</td><td align="right">

<c:if test="${rowEnd lt rLen}">  
           <c:url value="/masterdetails.jsp?s=${rowStart+pageSize}&e=${rowEnd+pageSize}" var="urlNext"/>  
            <a href="${urlNext}">Next ></a>  
         </c:if>
         </td>
         </tr>
         </table> 
  <table  align="center" border="1" cellspacing="0" width="80%" class="tablec">
            <tr>
                <th>EmployeeNo </th><th>EmployeeName</th>
                <th>Job</th>
                <th>ManagerNumber</th><th align="center" width="145px">HireDate</th><th>Salary </th>
               <th>Commission</th>
            </tr>
            <c:forEach items="${sessionScope.emps}" var="emp" begin="${rowStart-1}" end="${rowEnd-1}">
               <c:set value="${emp.EMPNO}" var="p" scope="page"/>
            
          <tr> 
             <td align="right"><c:out value="${emp.EMPNO}"/></td>
            <td align="left">
                <c:out value="${emp.ENAME}"/> 
            </td>
         <td>
                <c:out value="${emp.JOB}"/>
            </td>
            <td align="right">
                <c:out value="${emp.MGR}"/>
            </td>
            <td align="right">
                <c:out value="${emp.HIREDATE}"/>
            </td>
            <td align="right">
                <c:out value="${emp.SAL}"/>
            </td>
             <td align="right">
                <c:out value="${emp.COMM}"/>
            </td>
            </tr>
         </c:forEach>
         </table>
         <br/><br/><br/>
         <c:choose>
                  <c:when test="${sessionScope.emps==null}">
             <div style="font-color:blue">  <center>SELECT ANY DEPARTMENT </center></div>
                  </c:when>
            
            <c:otherwise>
                 <c:if test="${empty p}">
                     
               <div style="font-color:blue"> <center>THERE ARE NO RECORD'S IN THIS DEPARTMENT</center></div>
                 </c:if>
            </c:otherwise>
            </c:choose>
        </body>
</html>

My servlet code

My class to get data

it is working fine when there is a data. but the code is showing empty space when there is no data. i am checking empty list like i mentioned above

but it is failing why..?