Question

I have one jsp page which contains two text fields Start Date and End Date. User will input start date and end date and then I will query the database for data between those dates. When I click submit, it will just forward it to the current page and I will pass the dates as parameters. So far so good, but the problem is the image jfreechart does not refresh unless i refresh the browser itself.

Here is my form.

  <form method="GET" action='monitor' name="check">
  <table>
  <tr>
  <td>Start Date (dd/MM/yyyy format):</td>
  <td><input type="text" name="startDate"
  value="<%=startDate%>"></td>
  </tr>
  <tr>
  <td>End Date (dd/MM/yyyy format):</td>
  <td><input type="text" name="endDate" value="<%=endDate%>"></td>
  </tr>
  <tr>
  <td><input type="submit" value="check"></td>
  </tr>
  </table>
  </form>

  <img src="lineChart.png" width="600" height="400" border="0" usemap="#chart" />

Here is my inline code for generating the chart

   final File file1 = new File(getServletContext().getRealPath(".") + "/lineChart.png");
   ChartUtilities.saveChartAsPNG(file1, chart, 600, 400, info);

I tried doing writeChartAsPNG but it will overwrite the whole page. Page should still look like,

Start Date:
End Date: 

[ VIEW ] 

Monitor Data Chart
[  chart here ]

Answer 1

you’ll have to change things around pretty substantially to get the image to refresh inside the page when you click View, and you’ll end up writing a fair bit of javascript

essentially what has to happen (which is pretty high level)

1. make View a regular button, instead of a submit on the form.
2. attach a click listener to the view button (check out the jQuery documentation for it’s click function)
3. inside the listener, grab the values from the Start Date and End Date inputs
4. set the src attribute of the image (using a mechanism like in this SO answer) to a jsp or servlet, sending the start and end dates as get variables (in the query string like ?startdate= ... &enddate= ...
5. in that jsp or servlet, generate the chart and return the raw png output from jFreeChart with a content type of image/png (use response.setContentType("text/png")). This will display the image in the img tag correctly, and you won’t have to write a file out to the disk either.

this process will update the image every time you hit View, with the values you input into your form.

it’s a lot of steps, and I can’t really get into the nitty gritty of the implementation without knowing a whole lot more about your setup, but hopefully this will point you in the right direction