This week's giveaway is in the Android forum.
We're giving away four copies of Android Security Essentials Live Lessons and have Godfrey Nolan on-line!
See this thread for details.
The moose likes JSP and the fly likes Drawing Graphs in JSP Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Java » JSP
Bookmark "Drawing Graphs in JSP" Watch "Drawing Graphs in JSP" New topic
Author

Drawing Graphs in JSP

Aravind Prasad
Ranch Hand

Joined: Dec 28, 2005
Posts: 263
Hello Ranchers..
I'm doing a project in JSP and oracle.. In a particular position i got stuck with the sales report of the company.

in the jsp page i've given 2 text fields.. for date
ie., the user have to put the from date and to date from the datepicker and will display the datas from the database in the jsp page and also in the Spread sheet.

now the client asked me to make a graph out from this analysis..
ie., the graphs x-axis containing the months from january to december and the y-axis with the weight..

The project is meant for a Export-Import Company. So they want to analyze it easily abt the client analysis in sales department..


the thing i want to know is.. is it possible to make a graph out from JSP coding in the html page.. or is it easy to make a graph in EXCEL SHEEL.. automatically.. when we export the datas to the excel sheet?

Help me.. Ranchers..

Regards
Aravind
Ulf Dittmer
Marshal

Joined: Mar 22, 2005
Posts: 41124
    
  45
HTML doesn't have facilities for creating graphs, but you can include an image containing a graph. The cewolf library (on SourceForge) is very helpful for embedding images containing graphs in a web page.
[ June 29, 2006: Message edited by: Ulf Dittmer ]

Ping & DNS - my free Android networking tools app
Aravind Prasad
Ranch Hand

Joined: Dec 28, 2005
Posts: 263
Thank you Ulf Dittmer,
I've downloaded the file..and tried to do the sample program given in that.. but it is not giving any out put..

if u have done any sample coding before.. can u please help me in doing this chart program..

which are the file.. where are they to be copied.. and how to call them in the jsp page..


thanks
regards
Aravind
Ulf Dittmer
Marshal

Joined: Mar 22, 2005
Posts: 41124
    
  45
I followed the tutorial that's linked from http://cewolf.sourceforge.net/ to the letter, and it worked fine. Check your server if there are any error messages, and make sure you have everything set up the way it's described there.
Aravind Prasad
Ranch Hand

Joined: Dec 28, 2005
Posts: 263
Thank you Ulf Dittmer ..
After getting your advice., i checked all the sites and i got one source code which is capeable of displaying the graph in jpeg format..
I tried to do that.. here with this message i'm sending the source code for that program...
---------------------------------------------------------------------------
<%@ page language="java" %>

<%@ page import="java.io.OutputStream" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="java.awt.*" %>
<%@ page import="com.sun.image.codec.jpeg.*" %>

<%@ include file = "graphBG.jsp"%>

<%

//Data arrays
String datanames[] = {"January", "February", "March", "April", "May","June", "July", "August", "September", "October", "November", "December"};
int datavalues[] = {83, 62, 33, 102, 50, 60,70,80,40,45,55,65};

//current y position
int y_pos = 0;

//y offset to cater for header space
int headerOffset = 50;

//inner padding to make sure bars never touch the outer border
int innerOffset = 20;

//height of bar, text and total
int barHeight= 10;
int textHeight= 20;
int displayHeight = barHeight + textHeight;

//Color used for the bars
Color barColor = new Color(153,19,19);

//Set the graph's outer width
int WIDTH = 500;

//Set the graph's outer height
int HEIGHT = (datavalues.length * displayHeight) + headerOffset + innerOffset;

//Width of the graphable area
int innerWIDTH = WIDTH - (innerOffset * 2);

//Calculate average
int average = 0;
for(int i=0; i<datavalues.length; i++)
{
average += datavalues[i];
}
average = average / datavalues.length;

//Calculate maximum
int maximum = 0;
for(int i=0; i<datavalues.length; i++)
{
if(datavalues[i] > maximum)
{
maximum = datavalues[i];
}
}



///////////////////////////////////////////////////////////////////////////////////////
//Draw Graph Background and Header:
///////////////////////////////////////////////////////////////////////////////////////

response.setContentType("image/jpeg");
BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
Graphics2D biContext = bi.createGraphics();
graphBG gr = new graphBG();
gr.draw(biContext, WIDTH, HEIGHT, "Sales Analysis of Client :", "from " );



/////////////////////////////////////////////////////////////////////////////////////
//Draw data onto the graph:
/////////////////////////////////////////////////////////////////////////////////////


//Loop through & draw the bars

for(int i=0; i<datavalues.length; i++)
{
int currentValue = datavalues[i];

//Set y position for bar
y_pos = i * displayHeight + headerOffset;

//Set bar width
int barWidth = (innerWIDTH * currentValue) / maximum;

//Display the current value
String display = datanames[i] + " (" + currentValue + ")";
biContext.setColor(Color.black);
biContext.drawString(display, 20, y_pos);

//Set dimensions of the bar
biContext.setColor(barColor);
Dimension bar = new Dimension(barWidth , barHeight);
Dimension barBorder = new Dimension(barWidth - 3 , barHeight - 3);
Rectangle barRect = new Rectangle(bar);
Rectangle barRectBorder = new Rectangle(barBorder);

//Draw bar and border:
barRect.setLocation(21, 5 + y_pos);
barRectBorder.setLocation(22, 6 + y_pos);
biContext.setColor(barColor);
biContext.fill(barRect);
biContext.setColor(Color.white);
biContext.draw(barRectBorder);
}



/////////////////////////////////////////////////////////////////////////////////////
//Display the graph
/////////////////////////////////////////////////////////////////////////////////////

//Encode:
OutputStream output = response.getOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);
encoder.encode(bi);
output.close();

%>
---------------------------------------------------------------------------
this file is called index.jsp

---------------------------------------------------------------------------
<%!
public class graphBG
{

Font font = new Font("ARIAL", Font.BOLD , 11);
Color headerColor = new Color(20,50,100);

public Graphics2D draw(Graphics2D biContext, int WIDTH, int HEIGHT, String headerText, String averageText)
{
//Grey color for the drop shadow
Color dropShadow = new Color(200,200,200);

//Graph and header dimensions
Dimension dim = new Dimension(WIDTH,HEIGHT);
Dimension dimGraph = new Dimension(WIDTH-21,HEIGHT-51);
Dimension dimHeader = new Dimension(WIDTH-21,20);

//Define Rectangles:
Rectangle area = new Rectangle(dim);
Rectangle graphArea = new Rectangle(dimGraph);
Rectangle headerArea = new Rectangle(dimHeader);

/////////////////////////////////////////////////////////////////////////////////////
//Set up the graph:
/////////////////////////////////////////////////////////////////////////////////////

//Set background color to white:
biContext.setColor(Color.white);
biContext.fill(area);

//Drop shadow for the graph area:
//graphArea.setLocation(18, 42); //This is the drop shadow's location
//biContext.setColor(dropShadow);
//biContext.fill(graphArea);

//Fill the graph area (white):
graphArea.setLocation(11, 36);
biContext.setColor(Color.white);
biContext.fill(graphArea);

//Draw the graph border (black):
biContext.setColor(Color.black);
biContext.draw(graphArea);


//Header Drop Shadow:
//headerArea.setLocation(18, 12); //This is the drop shadow's location
//biContext.setColor(dropShadow);
//biContext.fill(headerArea);

//Fill the header (blue):
//headerArea.setLocation(11, 5);
//biContext.setColor(headerColor);
//biContext.fill(headerArea);

//Draw the header border (white):
biContext.setColor(Color.white);
biContext.draw(headerArea);

//Insert Header Text:
//biContext.setFont(font);
//biContext.setColor(Color.white);
//biContext.drawString(headerText, 21, 18);

//Display the average
//biContext.setColor(Color.white);
//biContext.drawString(averageText, 350, 18);


return biContext;
}
}
%>
---------------------------------------------------------------------------
this file is called graphBG.jsp
----------------------------------------------------------------------------

Please copy and paste this code and try to run.. u can see.. the out put..
i want to display the very same graph like the other which the users can get from the MS EXCEL and all.

how can i chage that..
please help me ranchers..

thanks
regards
Aravind
Suvajit Sengupta
Greenhorn

Joined: Jun 29, 2006
Posts: 1
Hi,
You can try using JFreeChart library from http://www.jfree.org.
Ulf Dittmer
Marshal

Joined: Mar 22, 2005
Posts: 41124
    
  45
cewolf is built around JFreeChart, so that won't get you much further (and cewolf is easier to start with).
Aravind Prasad
Ranch Hand

Joined: Dec 28, 2005
Posts: 263
Thanks Suvajit Sengupta,
from the link you given to me.. i check thru the link but they are selling the code for $39 and it is not possible for me to buy and use the code. so can you please suggest me get some free code or taglibs which i can use in my JSP page for displaying the graph!!

Thanks
regards
Aravind
Ulf Dittmer
Marshal

Joined: Mar 22, 2005
Posts: 41124
    
  45
I'm fairly certain that cerwolf/JFreeChart can do what you need, or get very close. Why are you looking for another package? It's unlikely that any of them will do precisely what you need right out of the box - some effort to understand the API to tweak the output will always be required. What have you tried so far, and where are you stuck?
[ June 30, 2006: Message edited by: Ulf Dittmer ]
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Drawing Graphs in JSP
 
Similar Threads
Javascript Excel Sheet API
Export JSP page to different worksheet of Excel Document
Excel files-Weekly,Monthly,Yearly
jsp
Export JSP page's content to an Excel Spread Sheet