[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 520
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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