File "GetDataSelectScatterChart.jsp"
Full Path: /home/analogde/www/Design/fileman/Fusion/Picker/js/integrations/java/samples/WebContent/jsp/GetDataSelectScatterChart.jsp
File size: 10.4 KB
MIME-type: text/html
Charset: utf-8
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@page import="fusioncharts.FusionCharts" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../Styles/ChartSampleStyleSheet.css" rel="stylesheet" />
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<title>FusionCharts | Get data from select scatter chart and show them in tabular format</title>
</head>
<body>
<script>
onRenderComplete = function (evtObj, argObj) {
// creating div for controllers
var controllers = document.createElement('div');
controllers.setAttribute('id', 'controllers');
controllers.style.display = "inline-block";
controllers.innerHTML = "<div id='tableView-1' style='width:500px;display:none;margin-left:0px;max-height:250px;overflow:scroll;border: 1px solid #CCCCCC;margin: 3px;float: left;display:none; color: #666666;font-family:'Arial','Helvetica';font-size: 12px;'></div>";
//Display container div and write table
document.getElementById("showData").appendChild(controllers);
// argObj.container.parentNode.insertBefore(controllers, argObj.container.nextSibling);
/*
* getDataFromChart method prepares the
* tabular string from selection and
* write in a div and display it.
*/
evtObj.sender.getDataFromChart = function() {
var i,
j,
str,
ds = "",
dataArr,
flagData = false,
objDataset = evtObj.sender.getJSONData && evtObj.sender.getJSONData().dataset,
tableContainer = document.getElementById("tableView-1");
//Form tabular string
str = "<div style='margin:3px;font-family:'Arial','Helvetica';font-size: 12px;'> Data is returned by the chart as Array. The data is converted into tabular format using JavaScript.</div>";
str += '<table border="1" cellpadding="1" cellspacing="0" bordercolor="#ffffff" width="100%">';
for (i in objDataset) {
dataArr = objDataset[i].data;
if (dataArr.length > 0) {
flagData = true;
str += ' <tr>';
str += ' <td width="20%" style="font-weight: bold;font-size: 14px;vertical-align: top;text-align:right;padding: 3px" color="' + objDataset[i].color + '">' + objDataset[i].seriesname + '</td>';
ds = '<table border="1" cellpadding="1" cellspacing="0" bordercolor="' + objDataset[i].color + '" width="100%">';
ds += '<tr>';
ds += '<td width="20%" style="font-weight: bold;font-size: 12px;background-color: #EEEEEE;text-align:center"> Id</td>';
ds += '<td width="40%" style="font-weight: bold;font-size: 12px;background-color: #EEEEEE;text-align:center"> Price (in USD)</td>';
ds += '<td width="40%" style="font-weight: bold;font-size: 12px;background-color: #EEEEEE;text-align:center"> Quantity Sold</td>';
ds += '</tr>';
for (j = 0; j < dataArr.length; j++) {
var id = String(dataArr[j].id),
price = String(dataArr[j].x),
qty = String(dataArr[j].y);
ds += '<tr>';
ds += '<td width="20%" align="center">' + id + '</td>';
ds += '<td width="40%" align="center">$' + price + ' </td>';
ds += '<td width="40%" align="center">' + qty + ' units</td>';
ds += '</tr>';
}
ds += '</table>';
str += ' <td width="80%" style="padding: 3px">' + ds + '</td>';
str += ' </tr>';
}
}
str += '</table>';
if (!flagData) {
str = "No Data Selected";
}
tableContainer.style.display = "block";
tableContainer.innerHTML = str;
}
},
onBeforeDataSubmit = function (evtObj, argObj) {
evtObj.sender.getDataFromChart();
},
onDataRestored = function (evtObj, argObj) {
document.getElementById("tableView-1").style.display = "none";
document.getElementById("tableView-1").innerHTML = "";
}
</script>
<h3>Get data from select scatter chart and show them in tabular format</h3>
<div id ="chart"></div>
<div id ="showData"></div>
<div><span><a href="../Index.jsp">Go Back</a></span></div>
<%
String jsonData;
jsonData = "{ \"chart\": { \"theme\": \"fusion\", \"caption\": \"Products Sold vs. Price points\", \"subcaption\": \"Harry's SuperMart - Last Week\", \"yaxisname\": \"Quantity Sold\", \"xaxisname\": \"Price(In US $)\", \"xaxismaxvalue\": \"1000\", \"xaxisminvalue\": \"100\", \"yaxismaxvalue\": \"200\", \"xnumberprefix\": \"$\", \"ynumbersuffix\": \" units\", \"showcanvasborder\": \"1\", \"canvasborderthickness\": \"0.4\", \"canvasborderalpha\": \"50\", \"showXAxisLine\": \"0\", \"showformbtn\": \"1\", \"formAction\": \"#\", \"submitdataasxml\": \"1\" }, \"categories\": [ { \"verticallinecolor\": \"666666\", \"verticallinethickness\": \"1\", \"alpha\": \"40\", \"category\": [ { \"label\": \"$100\", \"x\": \"100\", \"showverticalline\": \"0\" }, { \"label\": \"$200\", \"x\": \"200\", \"showverticalline\": \"1\" }, { \"label\": \"$300\", \"x\": \"300\", \"showverticalline\": \"1\" }, { \"label\": \"$400\", \"x\": \"400\", \"showverticalline\": \"1\" }, { \"label\": \"$500\", \"x\": \"500\", \"showverticalline\": \"1\" }, { \"label\": \"$600\", \"x\": \"600\", \"showverticalline\": \"1\" }, { \"label\": \"$700\", \"x\": \"700\", \"showverticalline\": \"1\" }, { \"label\": \"$800\", \"x\": \"800\", \"showverticalline\": \"1\" }, { \"label\": \"$900\", \"x\": \"900\", \"showverticalline\": \"1\" }, { \"label\": \"$1000\", \"x\": \"1000\", \"showverticalline\": \"0\" } ] } ], \"dataset\": [ { \"drawline\": \"0\", \"seriesname\": \"Televisions\", \"color\": \"#6baa01\", \"anchorsides\": \"3\", \"anchorradius\": \"4\", \"anchorbgcolor\": \"#6baa01\", \"anchorbordercolor\": \"#6baa01\", \"data\": [ { \"id\": \"TV_1\", \"y\": \"559\", \"x\": \"714\" }, { \"id\": \"TV_2\", \"y\": \"293\", \"x\": \"988\" }, { \"id\": \"TV_3\", \"y\": \"231\", \"x\": \"970\" }, { \"id\": \"TV_4\", \"y\": \"528\", \"x\": \"142\" }, { \"id\": \"TV_5\", \"y\": \"95\", \"x\": \"800\" }, { \"id\": \"TV_6\", \"y\": \"515\", \"x\": \"813\" }, { \"id\": \"TV_7\", \"y\": \"444\", \"x\": \"928\" }, { \"id\": \"TV_8\", \"y\": \"592\", \"x\": \"238\" }, { \"id\": \"TV_9\", \"y\": \"229\", \"x\": \"959\" }, { \"id\": \"TV_10\", \"y\": \"238\", \"x\": \"521\" }, { \"id\": \"TV_11\", \"y\": \"285\", \"x\": \"222\" }, { \"id\": \"TV_12\", \"y\": \"524\", \"x\": \"863\" }, { \"id\": \"TV_13\", \"y\": \"422\", \"x\": \"820\" }, { \"id\": \"TV_14\", \"y\": \"344\", \"x\": \"894\" }, { \"id\": \"TV_15\", \"y\": \"510\", \"x\": \"800\" }, { \"id\": \"TV_16\", \"y\": \"132\", \"x\": \"785\" }, { \"id\": \"TV_17\", \"y\": \"381\", \"x\": \"214\" }, { \"id\": \"TV_18\", \"y\": \"210\", \"x\": \"961\" }, { \"id\": \"TV_19\", \"y\": \"496\", \"x\": \"575\" }, { \"id\": \"TV_20\", \"y\": \"330\", \"x\": \"847\" }, { \"id\": \"TV_21\", \"y\": \"436\", \"x\": \"893\" }, { \"id\": \"TV_22\", \"y\": \"406\", \"x\": \"157\" }, { \"id\": \"TV_23\", \"y\": \"125\", \"x\": \"349\" }, { \"id\": \"TV_24\", \"y\": \"450\", \"x\": \"818\" }, { \"id\": \"TV_25\", \"y\": \"455\", \"x\": \"615\" }, { \"id\": \"TV_26\", \"y\": \"328\", \"x\": \"256\" }, { \"id\": \"TV_27\", \"y\": \"188\", \"x\": \"460\" }, { \"id\": \"TV_28\", \"y\": \"565\", \"x\": \"350\" }, { \"id\": \"TV_29\", \"y\": \"149\", \"x\": \"582\" }, { \"id\": \"TV_30\", \"y\": \"425\", \"x\": \"970\" } ] }, { \"seriesname\": \"Cell Phones\", \"color\": \"#f8bd19\", \"anchorsides\": \"4\", \"anchorradius\": \"4\", \"anchorbgcolor\": \"#f8bd19\", \"anchorbordercolor\": \"#f8bd19\", \"data\": [ { \"id\": \"Mob_1\", \"y\": \"335\", \"x\": \"156\" }, { \"id\": \"Mob_2\", \"y\": \"339\", \"x\": \"927\" }, { \"id\": \"Mob_3\", \"y\": \"328\", \"x\": \"847\" }, { \"id\": \"Mob_4\", \"y\": \"1\", \"x\": \"177\" }, { \"id\": \"Mob_5\", \"y\": \"246\", \"x\": \"175\" }, { \"id\": \"Mob_6\", \"y\": \"368\", \"x\": \"441\" }, { \"id\": \"Mob_7\", \"y\": \"146\", \"x\": \"200\" }, { \"id\": \"Mob_8\", \"y\": \"347\", \"x\": \"482\" }, { \"id\": \"Mob_9\", \"y\": \"1\", \"x\": \"463\" }, { \"id\": \"Mob_10\", \"y\": \"63\", \"x\": \"440\" }, { \"id\": \"Mob_11\", \"y\": \"77\", \"x\": \"211\" }, { \"id\": \"Mob_12\", \"y\": \"108\", \"x\": \"824\" }, { \"id\": \"Mob_13\", \"y\": \"44\", \"x\": \"850\" }, { \"id\": \"Mob_14\", \"y\": \"77\", \"x\": \"712\" }, { \"id\": \"Mob_15\", \"y\": \"15\", \"x\": \"199\" }, { \"id\": \"Mob_16\", \"y\": \"333\", \"x\": \"836\" }, { \"id\": \"Mob_17\", \"y\": \"31\", \"x\": \"482\" }, { \"id\": \"Mob_18\", \"y\": \"90\", \"x\": \"604\" }, { \"id\": \"Mob_19\", \"y\": \"294\", \"x\": \"716\" }, { \"id\": \"Mob_20\", \"y\": \"241\", \"x\": \"870\" }, { \"id\": \"Mob_21\", \"y\": \"258\", \"x\": \"421\" }, { \"id\": \"Mob_22\", \"y\": \"186\", \"x\": \"456\" }, { \"id\": \"Mob_23\", \"y\": \"255\", \"x\": \"327\" }, { \"id\": \"Mob_24\", \"y\": \"203\", \"x\": \"995\" }, { \"id\": \"Mob_25\", \"y\": \"35\", \"x\": \"792\" } ] } ] }";
FusionCharts scatter = new FusionCharts(
"selectscatter",
"scatter_chart",
"500",
"400",
"chart",
"json",
jsonData
);
scatter.addEvent("renderComplete", "onRenderComplete");
scatter.addEvent("beforeDataSubmit", "onBeforeDataSubmit");
scatter.addEvent("dataRestored", "onDataRestored");
%>
<%=scatter.render()%>
</body>
</html>