In our previous, we provided a HTML form which upon submitting invoked a Java Servlet to generate a dynamic pie chart (Using JFreeChart API) and provide it back to the user as a PNG image file.If you closely inspect the HTML code, you will come to know that it does a full page refresh every time it generates a PNG image. This is because, it submits the entire form data back to our servlet which returns a PNG image back to the browser. This is inturn displayed by the browser in the window. One approach to avoid this would be to use a Ajax XMLHTTPRequest to fetch the image back to the browser. Another clever way to do this is to invoke the servlet directly in the src attribute of the image.This will also avoid the full page refresh and the HTML form code to achieve this is provided below;
<html>
<head>
<title>Simple Ajax Example to Generate Dynamic Pie Charts Using JFreeChart</title>
<!-- Style Sheet to align the form elements on the page -->
<style type="text/css">
.right_aligned {
height: 10em;
line-height: 1.25em;
}
.right_aligned label {
display: block;
float: left;
clear: left;
width: 200px;
padding-right: 1em;
text-align: right;
}
.right_aligned select, .right_aligned input {
display: block;
}
</style>
<!-- This javascript function would be invoked when the user submits the form data.
The function constructs a dynamic IMG tag, and pass the servlet
information in the source (src) attribute, with the complete form post data.
Once this is done, the servlet will directly return the image back ,
which will be captured into the img tag
Clever and avoids a full page refresh -->
<script language="Javascript">
function getquerystring() {
var form = document.forms['f1'];
//gather form data into Javascript variables
var word1 = form.Maths.value;
var word2 = form.Physics.value;
var word3 = form.Chemistry.value;
var word4 = form.Biology.value;
var word5 = form.English.value;
//form data is converted into a post string, the values would be used to create a dynamic chart
qstr = 'Maths=' + escape(word1) + '&Physics='+ escape(word2)+'&Chemistry=' + escape(word3)+'&Biology=' + escape(word4)+'&English=' + escape(word5);
var res='<img src="servlets/servlet/PieChartServlet?'+qstr+'" />';//IMG tag is constructed here
//set the DIV to the img tag
document.getElementById("imgHolder").innerHTML =res;
}
</script>
</head>
<body>
<form class="right_aligned" name="f1">
<label>Maths</label><input type=”text” name="Maths"><br/>
<label>Physics</label><input type=”text” name="Physics"><br/>
<label>Chemistry</label><input type=”text” name="Chemistry"><br/>
<label>Biology</label><input type=”text” name="Biology"><br/>
<label>English</label><input type=”text” name="English"><br/>
<!-- invoke the javascript function written above when the form is submitted -->
<input value="Go" type="button" onclick='JavaScript:getquerystring()'>
</FORM><br/><br/>
<!-- The final chart will be created and displayed below -->
<div id="imgHolder"></div>
</body>
</html>
This tutorial showed how to generate dynamic pie chart with JFreeChart servlet and at the same time, avoid a full page refresh at the browser. You can replace the HTML code given in our earlier tutorial (refer link at the top) if you are keen to avoid a complete refresh.
No comments:
Post a Comment