• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 522
  • Last Modified:

Bar Chart

Hi,
I want to generate a bar-chart in jsp using taglib based on percentage values?

Thanks,
Ramakrishna




0
vvsrk76
Asked:
vvsrk76
  • 8
  • 6
  • 3
1 Solution
 
Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
http://www.jspin.com/home/tags/graphics

http://www.servletsuite.com/servlets/bar.htm

i think the above link will surely help you as they also provide the tag library for free.

Thank You.
0
 
vvsrk76Author Commented:
Hi,
I want to genarate bar image can you plz help me in this?
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
that means you want the BAR chart as a image???
and why not try JFreeChart????

http://www.jfree.org/jfreechart/index.php

check out.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
fargoCommented:
For simple needs i will go for using CSS for Bar Chart.
http://apples-to-oranges.com/blog/article.aspx?id=55

If you have basic bar graph to show, css is the best way to go. U need not to be dependent on third party tools..and can be done in fairly short time.

But, if you need more control and complex charts, JFreechart is best!
0
 
vvsrk76Author Commented:
Hi fargo,
Can I use taglib ?
0
 
fargoCommented:
u can use taglib also...

but which one do u wish to use? you want to create a custom one OR ...

there is one option to use cewolf taglib which uses jfreechart
http://cewolf.sourceforge.net/new/index.html

i personally have not used cewolf. I have used jfreechart for complex charts and for very simple purpose the css based chart.
0
 
vvsrk76Author Commented:
Hi,
I dont want use Jfreechart.just I want genarate bar images based on values in jsp using taglib.
Already I developed simple bar chart which is not image. I want to genarate Image bar chart
Here is my jsp file
<%@ taglib uri="web-inf/tld/util/myams" prefix="mytl" %>

<!--
<table border="1" >
<mytl:myams name="test" percentage="60"/>
<mytl:myams name="test1" percentage="30"/>
<mytl:myams name="test2" percentage="20"/>
</table>
 -->
 
 <mytl:amstable title="BaseProd" col="4" />

<table border=1>
<tr>
<td> Critical care </td>
<td> 75% </td>
<td>
<mytl:newhbar width="100" fgcolor="red" bgcolor="pink" percentage="75" />
</td>
</tr>
<tr>
<td> Miscellaneous </td>
<td> 25% </td>
<td>
<mytl:newhbar width="100" fgcolor="red" bgcolor="pink" percentage="25" />
</td>
</tr>
<tr>
<td> Room and Board </td>
<td> 98% </td>
<td>
<mytl:newhbar width="100" fgcolor="red" bgcolor="pink" percentage="98" />
</td>
</tr>
<tr>
<td> surgical </td>
<td> 100% </td>
<td>
<mytl:newhbar width="100" fgcolor="red" bgcolor="pink" percentage="100" />
</td>
</tr>

</table>

TLD file
<?xml version="1.0"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">

<taglib>
      <tlibversion>1.0</tlibversion>
      <jspversion>1.1</jspversion>
      <shortname>myams</shortname>
      <uri>http://liferay.com/tld/util/myams</uri>

      <tag>
            <name>myams</name>
            <tagclass>com.ext.portlet.library.TRTag</tagclass>
            <bodycontent>empty</bodycontent>
            <attribute>
                  <name>name</name>
                  <required>true</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
            <attribute>
                  <name>percentage</name>
                  <required>true</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
      </tag>
      
      <tag>
            <name>amstable</name>
            <tagclass>com.ext.portlet.library.TableOuterTag</tagclass>
            <bodycontent>jsp</bodycontent>
            <attribute>
                  <name>title</name>
                  <required>true</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
            <attribute>
                  <name>col</name>
                  <required>false</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
      </tag>
      
      <tag>
            <name>hbar</name>
            <tagclass>com.ext.portlet.library.HorizontalBarTag</tagclass>
            <bodycontent>jsp</bodycontent>
            <attribute>
                  <name>dataValues</name>
                  <required>true</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
            <attribute>
                  <name>width</name>
                  <required>false</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
            <attribute>
                  <name>fgcolor</name>
                  <required>false</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
            <attribute>
                  <name>labels</name>
                  <required>false</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
      </tag>
      <tag>
            <name>newhbar</name>
            <tagclass>com.ext.portlet.library.HorizontalBarTagL</tagclass>
            <bodycontent>jsp</bodycontent>
            <attribute>
                  <name>height</name>
                  <required>false</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
            <attribute>
                  <name>width</name>
                  <required>true</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
            <attribute>
                  <name>percentage</name>
                  <required>false</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
            <attribute>
                  <name>fgcolor</name>
                  <required>false</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>
            <attribute>
                  <name>bgcolor</name>
                  <required>false</required>
                  <rtexprvalue>true</rtexprvalue>
            </attribute>

      </tag>            
            
</taglib>

Java file
package com.ext.portlet.library;

import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.BodyTagSupport;

 public class HorizontalBarTagL extends  BodyTagSupport {
      
      private String width = null;
      private String height = null;
      private String percentage = null;
      private String fgcolor = null;
      private String bgcolor = null;
      
      public int doStartTag(){
            
            if(width == null)
                  width = "100";

            if(percentage == null)
                  percentage = "100";
            
            if(fgcolor == null)
                  fgcolor = "red";            
                        
            try{
                  
                  JspWriter out = pageContext.getOut();
                  out.println("<table width="+width +" height="+height+" border=0 cellspacing=0 bgcolor=#FFFFFF>");
                  out.println("<tr><td><table width=100% border=0 cellspacing=0 bgcolor="+bgcolor+">");
                  out.println(" <tr> <td width="+percentage+"% bgcolor="+fgcolor+">&nbsp;</td>");
                  
                  if(! percentage.equals("100"))
                  out.println("<td>&nbsp;</td> ");
                  
                  out.println(" </tr></table></td></tr></table>");
                  
                  print("<table width="+width +" height="+height+" border=0 cellspacing=0 bgcolor=#FFFFFF>");
                  print("<tr><td><table width=100% border=0 cellspacing=0 bgcolor="+bgcolor+">");
                  print(" <tr> <td width="+percentage+"% bgcolor="+fgcolor+">&nbsp;</td>");

                  if(! percentage.equals("100"))
                        print("<td>&nbsp;</td> ");

                  print(" </tr></table></td></tr></table>");
            }
            catch(Exception e)
            {
                  e.printStackTrace();
            }
            
            return SKIP_BODY;
      }
      
      private void print(String msg)
      {
            System.out.println(msg);
      }
      
    public int doEndTag() {
              return EVAL_PAGE;
        }
      
      public String getBgcolor() {
            return bgcolor;
      }
      public void setBgcolor(String bgcolor) {
            this.bgcolor = bgcolor;
      }
      public String getFgcolor() {
            return fgcolor;
      }
      public void setFgcolor(String fgcolor) {
            this.fgcolor = fgcolor;
      }
      public String getHeight() {
            return height;
      }
      public void setHeight(String height) {
            this.height = height;
      }
      public String getPercentage() {
            return percentage;
      }
      public void setPercentage(String percentage) {
            this.percentage = percentage;
      }
      public String getWidth() {
            return width;
      }
      public void setWidth(String width) {
            this.width = width;
      }

      
      
}
Plz help me in this
0
 
vvsrk76Author Commented:
Ple help urgent
0
 
fargoCommented:
Hi, sorry was away for some time. So u want to replace the html generattion in your taglib with java image for bar....correct?
0
 
vvsrk76Author Commented:
yes correct
0
 
vvsrk76Author Commented:
I want to genarate the image bar.
0
 
fargoCommented:
hi,

just create a BarServlet for my testing..but u can very well take the code out and put it in your taglib java class. I haven't considered your parameters here..just a quick solution...play around with the filling of rectangle in the drawBar method for filling the bar percentage.

import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class BarServlet extends HttpServlet {

      @Override
      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("image/x-png");
            response.setHeader("Cache-Control", "no-cache"); //HTTP 1.1
            response.setHeader("Pragma", "no-cache"); //HTTP 1.0
            response.setDateHeader("Expires", 0);
            //prevents caching at the proxy server

            java.io.OutputStream outp=null;
            try
            {
                  outp = response.getOutputStream();
            }
            catch (IOException e1)
            {
                  e1.printStackTrace();
            }

            // getting image
            java.awt.image.BufferedImage bImage = null;
            bImage =
                  new BufferedImage(
                        80, // width
                        200,//height
                        BufferedImage.TYPE_INT_ARGB);

            // creating graphics
            java.awt.Graphics2D graphics = null;
            graphics = bImage.createGraphics();
            
            graphics.setColor(Color.cyan);
            graphics.fill(new Rectangle(0, 0, 80, 200));
      
            drawBar(graphics);

            // flushing image
            try
            {
                  ImageIO.write(bImage, "png", outp);
                  outp.flush();
                  outp.close();
            }
            catch (Exception e)
            {
                  e.printStackTrace();
            }
      }

      public void drawBar(Graphics2D graphics){
            
            graphics.setColor(Color.BLACK);
            graphics.fill(
                  new Rectangle(
                        0, // x
                        20, // y
                        80,// w
                        200));// h
            graphics.drawString("20%", 10, 10 );

      }

      @Override
      protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            // TODO Auto-generated method stub
            doPost(req, resp);
      }
}

off for dinner..(german time)

let me know if u have any questions.
0
 
vvsrk76Author Commented:
Hi,
preload some images.
display the image based on values .
str image= "red.gif"
out.println("<td><img src='" + strImage + "' width="+ value + " bgcolor="+fgcolor+"></td>");
like this I want to generate bar images in my page.
Plz help me in this
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
out.println("<td><img src='" + strImage + "' width="+ value + " bgcolor="+fgcolor+"></td>");

hey that's a good idea i think just try giving the witdth as percentage i think that must do it.

try even i am not sure.

out.println("<td><img src='" + strImage + "' width="+ value +"%  bgcolor="+fgcolor+"></td>");

1st just try doing them statically

out.println("<td><img src='" + strImage + "' width= "45%"  bgcolor="+fgcolor+"></td>");

out.println("<td><img src='" + strImage + "' width= "85%"  bgcolor="+fgcolor+"></td>");

if they are working correctly then we can change the values dynamically.
0
 
fargoCommented:
is there any particular reason why u wish to go with img html tag and not with CSS or images created with java ? In your case, CSS is the best bet.
0
 
vvsrk76Author Commented:
Hi
can you plz explain how to use css in my project?
I want full code here. How to modify my files?
0
 
fargoCommented:
replace the following in your taglib code (the code u used for table generation..replace it with the following)

JspWriter out = pageContext.getOut();
out.println("<div class="graph">");
out.println("<strong class="bar" style="width:"+percentage+"%;">"+percentage+"%</strong>");
out.println("</div>");

Add the following in the jsp page at the head
<html>
<head>
<style>
    .graph {
        position: relative; /* IE is dumb */
        width: 200px;
        border: 1px solid pink;
        padding: 0 0 0 0;
    }
    .graph .bar {
        display: block;
        position: relative;
        background: red;
        text-align: center;
        color: black;
        height: 2em;
        line-height: 2em;            
    }
    .graph .bar span { position: absolute; left: 1em; }
</style>
</head>
<body>
....
....
your page code...
....
</body>
</html>

None of the handling of bgcolor and fgcolor is used in my code. This is done in the css style and is constant not variable.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now