Refresh chart in jsp according to MySQL database

[Meet Garvalia]

I want to refresh the chart in jsp with MYSQL.
To draw bar chart i used following code:

<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<%@ page import="org.jfree.chart.ChartFactory" %>
<%@ page import="org.jfree.chart.ChartUtilities"%>
<%@ page import="org.jfree.chart.JFreeChart" %>
<%@ page import="org.jfree.chart.plot.PlotOrientation"%>
<%@ page import="org.jfree.data.*" %>
<%@ page import="org.jfree.data.jdbc.JDBCCategoryDataset"%>
<%@ page import="org.jfree.chart.renderer.category.CategoryItemRenderer"%>
<%@ page import="org.jfree.chart.plot.CategoryPlot"%>
<%@ page import="org.jfree.chart.plot.PlotOrientation"%>
 <%@ page import="java.awt.Color"%>
<%
String query="SELECT * from chart";
JDBCCategoryDataset dataset=new JDBCCategoryDataset("jdbc:mysql://localhost:3306/s2sgateway",
"com.mysql.jdbc.Driver","root","meet**");

dataset.executeQuery( query);
JFreeChart chart = ChartFactory .createBarChart3D(
"Stock Update",
"Stock",
"price",
dataset,
PlotOrientation.VERTICAL,true, true, false);

CategoryPlot plot = chart.getCategoryPlot();
CategoryItemRenderer renderer = plot.getRenderer();

renderer.setSeriesPaint(0, Color.green);
try
{
ChartUtilities.saveChartAsJPEG(new File("c:\\s2s worksspace\\s2sgateway\\WebContent\\chart.jpg"), chart, 500, 450);
}
catch (IOException e)
{
System.out.println("Problem in creating chart.");
}

Now, i want to refresh this chart every 30 secs. & change database in MySQL. How is it possible ? Any repl. vl b appreciated. This is urgent. Very nice Forum...Like it..Thank you...!

[Ayoma Wijethunga]

OK.. Are you going to host this application is a actual server. Anyway I'll stick with this code and try to give you a solution.

So, you are saving the generated chart by using "ChartUtilities.saveChartAsJPEG();" method, and displaying the saved image in a HTML file.

In that case, what you can do is simply making few AJAX requests from time to time. Here is an example with JQuery

function refreshIMG()
{
$.ajax({
  url: "URL_TO_CHART_GENERATOR_JSP.jsp",
  cache: false,
  success: function(html){
    $("#ID_OF_DIV_WHERE_YOU_DISPLAY_CHART").html("<img src=\"c:\\s2s worksspace\\s2sgateway\\WebContent\\chart.jpg\"/>");
    callback();
  }
});
}
function callback()
{
settimeout("refreshIMG();", 1800);
//1800= 30seconds in ms
}
refreshIMG();

Hope this helps.

Regards.

[Devaka Cooray]

Welcome to JavaRanch.
Please note that accessing the database from a JSP is a really bad practice. Choose another model.
Please UseCodeTags when you post a code in future. It's unnecessarily hard to read the code otherwise.

[Ayoma Wijethunga]

Devaka Cooray wrote:
Please note that accessing the database from a JSP is a really bad practice.

Yeh that's why I asked if he is going to host this in an actual environment.. Also absolute path like "c:\s2s worksspace\s2sgateway\WebContent\chart.jpg" is not a good idea..

[Ayoma Wijethunga]

I think this topic is in the wrong forum (" JavaRanch » Forums » Products » Other Open Source Projects ")

[Meet Garvalia]

Thank you very much for your suggestions. I will apply and take care to post thread.

Actually i am going to develop real time stock update chart using Ajax+java script+My sql+java server pages+eclispe. I have created a table in My Sql, i want to change it automatically and update chart according to it. But i am a new to dis environment so, any suggestion or code will be appreciated. ie. how & which techs to use? This is Urgent. Thank you for your suggestions.

[Devaka Cooray]

Meet Garvalia wrote:how & which techs to use?

Meet Garvalia wrote:i am going to develop real time stock update chart using Ajax+java script+My sql+java server pages+eclispe.

Have you answered your own question?

[Devaka Cooray]

Ayoma Wijethunga wrote:I think this topic is in the wrong forum (" JavaRanch » Forums » Products » Other Open Source Projects ")

No, this topic has nothing to do with JSP. Let's continue the discussion here, for now.

[Meet Garvalia]

Devaka Cooray wrote:

Meet Garvalia wrote:how & which techs to use?

Meet Garvalia wrote:i am going to develop real time stock update chart using Ajax+java script+My sql+java server pages+eclispe.

Have you answered your own question?

I want suggestion using above combination which is a good practice?

[Devaka Cooray]

Ayoma and I have already mentioned some good practices for your requirement.
You may also need to understand about how to apply some Design Patterns.
Have a look at this article

[Ayoma Wijethunga]

Yes. As Devaka mentioned, it is not clear what to say as a reply.

Anyway in this kind of a project you'll surely have to go for a client side technology. If you are more familiar with JavaScript, then no problem go ahead with JavaScript+ AJAX. Or else you can use JavaFX or similar technology. JSP seems to be a must, as you have already selected JSP as your server side language. Then MySQL really couples with Java and that sounds to be a good choice.

So your choice "Ajax+java script+My sql+java server pages" is a good one. Finally checkout Netbeans IDE. I'm a Netbeans fan at the moment


Regards.

[Meet Garvalia]

Thank you. I worked on the ajax as ayoma suggests. I am posting entire code.

 <%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import="org.jfree.chart.ChartFactory"%>
<%@ page import="org.jfree.chart.ChartUtilities"%>
<%@ page import="org.jfree.chart.JFreeChart"%>
<%@ page import="org.jfree.chart.plot.PlotOrientation"%>
<%@ page import="org.jfree.data.*"%>
<%@ page import="org.jfree.data.jdbc.JDBCCategoryDataset"%>
<%@ page import="org.jfree.chart.renderer.category.CategoryItemRenderer"%>
<%@ page import="org.jfree.chart.plot.CategoryPlot"%>
<%@ page import="org.jfree.chart.plot.PlotOrientation"%>
<%@ page import="java.awt.Color"%>
<%
	String query = "SELECT * from chart";
	JDBCCategoryDataset dataset = new JDBCCategoryDataset(
			"jdbc:mysql://localhost:3306/s2sgateway",
			"com.mysql.jdbc.Driver", "root", "meet**");

	dataset.executeQuery(query);
	JFreeChart chart = ChartFactory.createBarChart3D("Stock Update",
			"stock", "price", dataset,
			PlotOrientation.VERTICAL, true, true, false);

	CategoryPlot plot = chart.getCategoryPlot();
	CategoryItemRenderer renderer = plot.getRenderer();

	renderer.setSeriesPaint(0, Color.green);
	try {
		ChartUtilities
				.saveChartAsJPEG(
						new File(
								"c:\\s2s worksspace\\s2sgateway\\WebContent\\chart.jpeg"),
						chart, 500, 450);
	} catch (IOException e) {
		System.out.println("Problem in creating chart.");
	}
%>
<script>
function refreshIMG()  
 {  
 $.ajax({  
   url: "http://localhost/Employee/chartex.jsp",     cache: false,  
   success: function(html){   $("#ID_OF_DIV_WHERE_YOU_DISPLAY_CHART").html("<img src=\"c:\\s2s worksspace\\s2sgateway\\WebContent\\chart.jpeg\"/>");  
     callback();  
   }  
 });  
 }  
 function callback()  
 {  
 settimeout("refreshIMG();", 3600);  
 //1800= 30seconds in ms  
 }  
 refreshIMG();  
 </script>
 
<img src="c:\\s2s worksspace\\s2sgateway\\WebContent\\chart.jpeg"
	width=500 height=450>


   

I exported db and refresh the page so got it what i wanted to. Than you ayoma once again

[Ayoma Wijethunga]

Meet Garvalia wrote:Thank you ayoma once again

You are welcome Meet.. As I can see, one more change is required to make this work correctly. Your browser error log might be showing some errors at the moment.

Are you writing the AJAX part in JSP itself? Or do you have a JSP file and a HTML file separately for AJAX request.

[Ayoma Wijethunga]

Anyway, ignore that if code is working as same as you expected, with 30second auto refresh.

Regards...

[Meet Garvalia]

Ayoma Wijethunga wrote:

Meet Garvalia wrote:Thank you ayoma once again

You are welcome Meet.. As I can see, one more change is required to make this work correctly. Your browser error log might be showing some errors at the moment.

Are you writing the AJAX part in JSP itself? Or do you have a JSP file and a HTML file separately for AJAX request.

I am writing AJAX part in JSP itself.Which type of error your talking about ?

When i load new db it should be auto refreshed after 30secs ? or i have to refresh it ?
Rightnow i refresh it..then new db is seen in chart.

Thank you.

[Ayoma Wijethunga]

Ah ok... you asked for 30second auto refresh, didn't you? I send you the code for that. In your new code, you are not using AJAX part at all. It's just there and that trick won't be effective unless you put JSP and HTML in separate files. That's why we don't use JSP to access data base or for business logic.

Anyway let me just make it easy for you. Use this HTML instead of what you are using now. So you'll get 30second auto reload.

  
<script>  
 function refreshIMG()    
  {    
    location.reload(true);
  }    
  function callback()    
  {    
    setTimeout("refreshIMG();", 30000);    
  }    
  callback();    
</script>  


<img src="c:\\s2s worksspace\\s2sgateway\\WebContent\\chart.jpeg"  width=500 height=450>   

  

[Meet Garvalia]

You are right. I want to use Ajax but not gettin how ? do i put ajax script in different file than jsp ? then how can i debug it ? I am a new 2 dis... thank you..

[Devaka Cooray]

Meet Garvalia wrote:I am a new 2 dis

Pleas UseRealWords. You should read some Ajax tutorials like this one.

[Meet Garvalia]

Devaka Cooray wrote:

Meet Garvalia wrote:I am a new 2 dis

Pleas UseRealWords. You should read some Ajax tutorials like this one.

Ok..Thank you.

[Ayoma Wijethunga]

Yeh.. Devaka is correct.. There is no point of trying to implement AJAX if you are almost new. Try some articles. Most of all do some practice. Anyway this is how you should implement the code I added you few days before.

Code for http://localhost/Employee/chartex.jsp

   <%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import="org.jfree.chart.ChartFactory"%>
<%@ page import="org.jfree.chart.ChartUtilities"%>
<%@ page import="org.jfree.chart.JFreeChart"%>
<%@ page import="org.jfree.chart.plot.PlotOrientation"%>
<%@ page import="org.jfree.data.*"%>
<%@ page import="org.jfree.data.jdbc.JDBCCategoryDataset"%>
<%@ page import="org.jfree.chart.renderer.category.CategoryItemRenderer"%>
<%@ page import="org.jfree.chart.plot.CategoryPlot"%>
<%@ page import="org.jfree.chart.plot.PlotOrientation"%>
<%@ page import="java.awt.Color"%>
<%
	String query = "SELECT * from chart";
	JDBCCategoryDataset dataset = new JDBCCategoryDataset(
			"jdbc:mysql://localhost:3306/s2sgateway",
			"com.mysql.jdbc.Driver", "root", "meet**");

	dataset.executeQuery(query);
	JFreeChart chart = ChartFactory.createBarChart3D("Stock Update",
			"stock", "price", dataset,
			PlotOrientation.VERTICAL, true, true, false);

	CategoryPlot plot = chart.getCategoryPlot();
	CategoryItemRenderer renderer = plot.getRenderer();

	renderer.setSeriesPaint(0, Color.green);
	try {
		ChartUtilities
				.saveChartAsJPEG(
						new File(
								"c:\\s2s worksspace\\s2sgateway\\WebContent\\chart.jpeg"),
						chart, 500, 450);
	} catch (IOException e) {
		System.out.println("Problem in creating chart.");
	}
%>
  

Code for http://localhost/Employee/display.html

  <html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
function refreshIMG()  
 {  
 $.ajax({  
   url: "http://localhost/Employee/chartex.jsp",     cache: false,  
   success: function(html){   $("#ID_OF_DIV_WHERE_YOU_DISPLAY_CHART").html("<img src=\"c:\\s2s worksspace\\s2sgateway\\WebContent\\chart.jpeg\" width=500 height=450 />");  
     callback();  
   }  
 });  
 }  
 function callback()  
 {  
 setTimeout("refreshIMG();", 30000);  
 //30000 = 30seconds in ms  
 }  
 refreshIMG();  
 </script>
 </head>
<body>
<div id="ID_OF_DIV_WHERE_YOU_DISPLAY_CHART">
<img src="c:\\s2s worksspace\\s2sgateway\\WebContent\\chart.jpeg"	width=500 height=450>
</div>
</body>

   </html>  

My advice - "Do NOT use this code unless you really understand it".. Go through tutorials and learn what is behind all this. Hope this helps.

Regards.