<html><body>
<script type="text/javascript" language="javascript">
function onMapClicked(name, title, value) {
makeRequest('ajaxChart.jsp?target=bar&title='+title, function(http_request) { updateHTML(http_request,"chart01"); });
}
function onBarClicked(rowLabel, colLabel) {
makeRequest('ajaxChart.jsp?target=pie&title='+colLabel, function(http_request) { updateHTML(http_request,"chart02"); });
}
function onPieClicked(rowLabel, colLabel) {
makeRequest('ajaxChart.jsp?target=gauge&title='+colLabel, function(http_request) { updateHTML(http_request,"chart03"); });
}
</script>
<script type="text/javascript" language="javascript">
function makeRequest(url, onComplete) {
var http_request = false ;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
}
}
if (!http_request) {
window.alert("Cannot create an XML HTTP instance");
return false;
}
http_request.onreadystatechange = function() {
if(http_request.readyState == 4) {
onComplete(http_request);
}
}
http_request.open('GET', url, true);
http_request.send(null);
}
function updateHTML(http_request, elementId) {
if (http_request.status == 200)
document.getElementById(elementId).innerHTML = http_request.responseText;
else
alert("ERROR: "+http_request.status+" "+http_request+" "+http_request.responseText);
}
</script>
<table border=0 width=640>
<tr>
<td><div style="position:relative; left:0 ; top:0" ><%@ include file="ajaxChart.jsp" %></div></td>
<td><div style="position:relative; left:0 ; top:0" ID=chart01 name=chart01></div></td></tr>
<tr><td colspan=2> </td></tr>
<tr>
<td><div style="position:relative; left:0 ; top:0" ID=chart02 name=chart02></div></td>
<td><center><div style="position:relative; left:0 ; top:0" ID=chart03 name=chart03></div></center></td>
</tr>
</table>
</body></html>
ajaxChart.jsp
<%@ page import = "com.gp.api.jsp.MxServerComponent" %>
<%@ page import = "com.gp.api.jsp.MxChartDescription"%>
<%@ page import = "com.gp.api.styles.chart.*"%>
<%@ page import = "com.gp.api.model.*"%>
<%
MxServerComponent svr = MxServerComponent.getDefaultInstance(application);
MxChartDescription myChart = svr.newImageSpec();
String target = request.getParameter("target");
if(target == null)
target = "map";
if("bar".equalsIgnoreCase(target)) {
myChart.width = 320 ;
myChart.height= 230 ;
myChart.type = "PNG" ;
myChart.style = " <frameChart is3D=\"false\"><title halign=\"Left\"> <decoration style=\"None\"/></title> <frame xDepth=\"12\" yDepth=\"11\"/> <yAxis scaleMin=\"0\"> <labelFormat pattern=\"#,##0.###\"/> <parseFormat pattern=\"#,##0.###\"/> </yAxis> <legend allowSpan=\"true\" equalCols=\"false\" halign=\"Right\" isMultiline=\"true\"> <decoration style=\"None\"/> </legend> <elements action=\"javascript:onBarClicked('$(rowLabel)','$(colLabel)')\" place=\"Default\" drawShadow=\"true\"> <morph morph=\"Grow\"/> <column index=\"1\"> <paint color=\"#99FFCC\"/> </column> <column index=\"2\"> <paint color=\"#CC99FF\"/> </column> <column index=\"3\"> <paint color=\"#CCFF99\"/> </column> <column index=\"4\"> <paint color=\"#FF99CC\"/> </column> <![CDATA[Year: $(colLabel)\nSales: $(value)M]]></elements> <paint palette=\"Pastel\" isVertical=\"true\" min=\"47\" max=\"83\"/> <insets right=\"5\"/> </frameChart>" ;
MxFrameChartStyle style = (MxFrameChartStyle) MxChartStyle.read(myChart.style,null);
style.title.text.value = request.getParameter("title");
myChart.style = style.toXML();
MxStandardChartModel model = new MxSampleChartModel(1,5).asStandardModel();
for(int i=0;i<5;i++)
model.setValueAt(0,i, (int)(Math.random()*200));
myChart.model = model.toXML();
}
if("map".equalsIgnoreCase(target)) {
myChart.width = 320 ;
myChart.height= 230;
myChart.type = "PNG" ;
myChart.style = "<map font=\"Arial-10\" source=\"/home/vadim/website/WebCharts50/examples-server/usa.map\" action=\"javascript:onMapClicked('$(name)','$(title)', '$(value)')\"><paint palette=\"Pastel\" isVertical=\"true\" min=\"47\" max=\"83\"/> <insets right=\"5\"/> </map>" ;
myChart.model = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<map name=\"USA\"><item name=\"States\" popup=\"$(title)\\n$(value)\"><item name=\"AK\" value=\"1.0\" backColor=\"#D75717\"/>\n <item name=\"AL\" value=\"6.0\" backColor=\"#51608E\"/>\n <item name=\"AR\" value=\"3.0\" backColor=\"#51608E\"/>\n <item name=\"AZ\" value=\"8.0\" backColor=\"#51608E\"/>\n <item name=\"CA\" value=\"11.0\" backColor=\"#D75717\"/>\n <item name=\"CO\" value=\"2.0\" backColor=\"#657086\"/>\n <item name=\"CT\" value=\"7.0\" backColor=\"#657086\"/>\n <item name=\"DE\" value=\"4.0\" backColor=\"#7A7F7F\"/>\n <item name=\"FL\" value=\"5.0\" backColor=\"#CC6600\"/>\n <item name=\"GA\" value=\"9.0\" backColor=\"#7A7F7F\"/>\n <item name=\"HI\" value=\"1.0\" backColor=\"#7A7F7F\"/>\n <item name=\"IA\" value=\"1.0\" backColor=\"#8E8F77\"/>\n <item name=\"ID\" value=\"2.0\" backColor=\"#8E8F77\"/>\n <item name=\"IL\" value=\"2.0\" backColor=\"#CC2200\"/>\n <item name=\"IN\" value=\"2.0\" backColor=\"#8E8F77\"/>\n <item name=\"KS\" value=\"3.0\" backColor=\"#A39E70\"/>\n <item name=\"KY\" value=\"4.0\" backColor=\"#A39E70\"/>\n <item name=\"LA\" value=\"4.0\" backColor=\"#A39E70\"/>\n <item name=\"MA\" value=\"5.0\" backColor=\"#A39E70\"/>\n <item name=\"MD\" value=\"5.0\" backColor=\"#B7AE68\"/>\n <item name=\"ME\" value=\"5.0\" backColor=\"#B7AE68\"/>\n <item name=\"MI\" value=\"5.0\" backColor=\"#B7AE68\"/>\n <item name=\"MN\" value=\"5.0\" backColor=\"#B7AE68\"/>\n <item name=\"MO\" value=\"6.0\" backColor=\"#CBBD60\"/>\n <item name=\"MS\" value=\"6.0\" backColor=\"#CBBD60\"/>\n <item name=\"MT\" value=\"6.0\" backColor=\"#CBBD60\"/>\n <item name=\"NC\" value=\"7.0\" backColor=\"#E0CD59\"/>\n <item name=\"ND\" value=\"7.0\" backColor=\"#E0CD59\"/>\n <item name=\"NE\" value=\"7.0\" backColor=\"#E0CD59\"/>\n <item name=\"NH\" value=\"7.0\" backColor=\"#E0CD59\"/>\n <item name=\"NJ\" value=\"8.0\" backColor=\"#F1D372\"/>\n <item name=\"NM\" value=\"8.0\" backColor=\"#F1D372\"/>\n <item name=\"NV\" value=\"8.0\" backColor=\"#F1D372\"/>\n <item name=\"NY\" value=\"8.0\" backColor=\"#F1D372\"/>\n <item name=\"OH\" value=\"9.0\" backColor=\"#F4DC51\"/>\n <item name=\"OK\" value=\"9.0\" backColor=\"#F4DC51\"/>\n <item name=\"OR\" value=\"9.0\" backColor=\"#F4DC51\"/>\n <item name=\"PA\" value=\"9.0\" backColor=\"#F4DC51\"/>\n <item name=\"RI\" value=\"9.0\" backColor=\"#EEC145\"/>\n <item name=\"SC\" value=\"10.0\" backColor=\"#EEC145\"/>\n <item name=\"SD\" value=\"10.0\" backColor=\"#EEC145\"/>\n <item name=\"TN\" value=\"10.0\" backColor=\"#EEC145\"/>\n <item name=\"TX\" value=\"10.0\" backColor=\"#E9A73A\"/>\n <item name=\"UT\" value=\"10.0\" backColor=\"#E9A73A\"/>\n <item name=\"VA\" value=\"10.0\" backColor=\"#E38C2E\"/>\n <item name=\"VT\" value=\"10.0\" backColor=\"#E38C2E\"/>\n <item name=\"WA\" value=\"11.0\" backColor=\"#D23D0C\"/>\n <item name=\"WI\" value=\"11.0\" backColor=\"#DD7223\"/>\n <item name=\"WV\" value=\"11.0\" backColor=\"#DD7223\"/>\n <item name=\"WY\" value=\"11.0\" backColor=\"#DD7223\"/></item></map>";
}
if("pie".equalsIgnoreCase(target)) {
myChart.width = 320 ;
myChart.height= 240 ;
myChart.type = "PNG" ;
myChart.style = " <pieChart depth=\"Double\" type=\"Doughnut\" isLeveled=\"true\" angle=\"226\"> <dataLabels placement=\"Inside\"/> <legend placement=\"Bottom\" halign=\"Right\"> <decoration style=\"None\"/> </legend> <elements action=\"javascript:onPieClicked('$(rowLabel)','$(colLabel)')\" drawOutline=\"false\" drawShadow=\"true\"> <morph morph=\"Grow\"/> </elements> <paint palette=\"Sunburn\" paint=\"Plain\" isVertical=\"true\" min=\"52\" max=\"100\"/> <title placement=\"Bottom\" halign=\"Left\" decoration=\"None\"/> </pieChart>" ;
MxPieChartStyle style = (MxPieChartStyle) MxChartStyle.read(myChart.style,null);
style.title.text.value = request.getParameter("title");
myChart.style = style.toXML();
MxStandardChartModel model = new MxSampleChartModel(1,4).asStandardModel();
for(int i=0;i<4;i++) {
model.setColLabelAt(i,"Q"+(i+1));
model.setValueAt(0,i, (int)(Math.random()*200));
}
myChart.model = model.toXML();
}
if("gauge".equalsIgnoreCase(target)) {
myChart.width = 240 ;
myChart.height= 240 ;
myChart.type = "PNG" ;
myChart.style = " <gauge axisPlacement=\"Separate\" font=\"Arial-11-bold\"> <knobStyle size=\"45\"> <paint minColor=\"#CCCCCC\"/> </knobStyle> <handStyle type=\"Bar\" placement=\"Inner\" width=\"8\" tailSize=\"0\"> <paint shadowOffsetX=\"0\" shadowOffsetY=\"0\" minColor=\"#80FFFFFF\" maxColor=\"#80FF0000\" angle=\"90\"/> </handStyle> <dialStyle> <paint minColor=\"#CCCCCC\" maxColor=\"#E9E9E9\"/> </dialStyle> <edgeStyle innerSize=\"8\"> <outer minColor=\"#6699CC\" maxColor=\"#99CCFF\"/> <inner minColor=\"#99CCFF\" maxColor=\"#6699CC\"/> </edgeStyle> <axisStyles index=\"1\" labelPlacement=\"Outside\" angleMargin=\"10\" isReversed=\"true\"/> <axisStyles index=\"0\" labelPlacement=\"Outside\" angleMargin=\"10\"/> </gauge>" ;
myChart.model = "<XML type=\"default\">\n<COL>Label</COL>\n<COL>Label</COL>\n<ROW col0=\"10.0\" col1=\"40.0\">Sample 0:</ROW>\n<ROW col0=\"1.0\" col1=\"0.0\">Label</ROW>\n</XML>";
MxStandardChartModel model = MxChartModel.fromXML(myChart.model,null);
model.setValueAt(0,0,Math.random()*100);
model.setValueAt(0,1,Math.random()*100);
myChart.model = model.toXML();
}
response.setDateHeader ("Expires", 0);
response.setHeader("Cache-Control","no-cache, no-store, must-revalidate");
out.write(svr.getImageTag(myChart,"getimage.jsp?image="));
%>
|
