I am trying to load a session data that is to be used to create a pie chart using Google Chart API.However I do not seem to be able to make it work.Can someone give me some guidance on how to do it?Below is the source code:
In AnalyzeUserClient.jsp:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
var sessionId = '<%= (HashMap<String, String>)request.getSession().getAttribute("hashMap") %>';
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
[sessionId],
]);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"Percentage of Category for User:"});
}
google.setOnLoadCallback(drawVisualization);
</script>
//HTML Code
<div id="visualization" style="width: 600px; height: 400px;"></div>
My data in the session looks like this:
{Environment=1, Education=1, Hospitality_Recreation=2, Disaster_Accident=1, Human Interest=3, Labor=1}
I've just complete something similar when adding a line chart to my Android application. I've modified my scenario to fit with yours;
var data = new google.visualization.DataTable();
// Slice-Value columns.
data.addColumn('string', 'Area');
data.addColumn('number', 'Value');
// Get the injected dataset.
var dataset = '<%= (HashMap<String, String>)request.getSession().getAttribute("hashMap") %>'; //
var mapSize = dataset.length;
for (var i = 0; i < mapSize; i++) { // Iterate over key-value pairs
var keyValuePair = dataset[i]; // Get the i'th value.
var keyValueArray = new String(keyValuePair).split("="); // Split on '='
data.addRow([keyValueArray[0], parseInt(keyValueArray[1])]); // Add record.
}
For completeness...
I've tested my approach in the Google Code Playground and it works. I added the code;
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
// Slice-value columns.
data.addColumn('string', 'Area');
data.addColumn('number', 'Value');
var dataset = new Array("Environment=1", "Education=1", "Hospitality_Recreation=2", "Disaster_Accident=1", "Human Interest=3", "Labor=1");
console.log(dataset);
var mapSize = dataset.length;
console.log(mapSize.toString());
for (var i = 0; i < mapSize; i++) { // Iterate over key-value pairs
var keyValuePair = dataset[i]; // Get the i'th value.
var keyValueArray = new String(keyValuePair).split("="); // Split on '='
data.addRow([keyValueArray[0], parseInt(keyValueArray[1])]); // Add record.
}
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"Area-Value plot for SO"});
}
Related
I have created a page with a registration form using bootstrap, and back end coding is done in Java. I don't want to use a database. When the user fills in the registration form and clicks on submit, all entered data should get stored in an Excel or csv file. Can anyone help me out?
i would recommend https://jsoup.org/ java library
Try This From:- http://www.databison.com/html-to-excel-using-javascript-and-excel-to-html-using-vba/
<script type="text/javascript">
function write_to_excel()
{
str="";
var mytable = document.getElementsByTagName("table")[0];
var row_Count = mytable.rows.length;
var col_Count = mytable.getElementsByTagName("tr")[0].getElementsByTagName("td").length;
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
for(var i=0; i < row_count ; i++)
{
for(var j=0; j < col_Count; j++)
{
str= mytable.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML;
ExcelSheet.ActiveSheet.Cells(i+1,j+1).Value = str;
}
}
}
</script></script></head>
<body>
<input type="submit" value="Export to EXCEL" onclick="write_to_excel();"/>
<table><tr><td>First</td><td>second</td></tr></table>
</body>
</html>
I have scriptet me a maps with markers based on a MySQL Table.
The position is in the Table.
Now, i would like to write with HTML in the InfoWindow, because it not show HTML on the InfoWindow on the Map.
downloadUrl('inc/map_bridge.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var ide = markerElem.getAttribute('id');
var desc = markerElem.getAttribute('beschreibung');
var type = markerElem.getAttribute('art');
var link = '<p>Klicke für weitere infos: Hier';
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = 'ID' + ide + ': ' + name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = desc + link
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
It show only so:
show example picture
the following i have in the MySQL-Table
first line<br>second line
If 'beschreibung' were the result of SELECT SQL, the reason is escaped SELECT
SQL result.
(I'm in short of reputation, so write in answer form.)
I'm trying to figure out how to parse a JSON feed into a table in Dart. I'm not sure if I should use a Map but if I do, I'm not sure how to approach extracting data. I want to have one cell to hold the assetID, then another for domain name, and another for IP address. Please let me know if you need more information.
Dart:
void loadData()
{
var url = "http://localhost:8080/***selectAll";
//call the web server asynchronously
var request = HttpRequest.getString(url).then(onDataLoaded);
}
void onDataLoaded(String response)
{
TableElement table = querySelector("#domainTableSelector");
//table.children.add();
var jsonString = response;
// print(jsonString);
List<String> list = new List<String>();
list.add(jsonString);
for (var x = 0; x < list.length; x++)
{
//create new table row
TableRowElement row = table.insertRow(x+1);
TableCellElement cell = row.insertCell(x);
cell.text = list.toString();
// print(list);
}
// Iterator itr= list.iterator();
//
// print("Displaying List Elements,");
//
// while(itr.hasNext())
// {
// print(itr.next());
// }
}
JSON
[{"serviceResponseValue":[{"assetId":"8a41250446b89b5f0146b04d49910023","oplock":0,"longitude":115.86,"domainName":"free-aus-trip.au","latitude":-31.95,"ipAddress":"6.0.0.6"},{"assetId":"8a49859246918966014691b1aac9000c","oplock":0,"longitude":-65.30,"domainName":null,"latitude":-24.18,"ipAddress":"4.0.0.4"},{"assetId":"8a49859246876566014691b1437512e4","oplock":0,"longitude":77.60,"domainName":"allmovies.cn","latitude":12.97,"ipAddress":"14.0.0.14"},{"assetId":"8a49850446b04b5f0146b04d49910000","oplock":0,"longitude":112.47,"domainName":"getrichez.cn","latitude":32.98,"ipAddress":"5.0.0.5"},{"assetId":"8a498592469189660146919b7a210006","oplock":0,"longitude":-37.61,"domainName":"googles.com","latitude":55.75,"ipAddress":null},{"assetId":"8a42250876b89b5f0876b04d49910763","oplock":0,"longitude":-68.90,"domainName":"lolcatzfun.net","latitude":-22.48,"ipAddress":"8.0.0.8"},{"assetId":"8a498592469189660146919f8d700008","oplock":0,"longitude":113.50,"domainName":"ccn.com","latitude":52.03,"ipAddress":null},{"assetId":"8a45250446b89b5f0876b04d49910187","oplock":0,"longitude":115.84,"domainName":"free-aus-trip.au","latitude":-31.86,"ipAddress":"7.0.0.7"},{"assetId":"8a49859246918966014691aeda76000a","oplock":0,"longitude":3.38,"domainName":"cashnow.net","latitude":6.52,"ipAddress":"2.0.0.2"},{"assetId":"8a49859246918966014691ae19df0009","oplock":0,"longitude":7.48,"domainName":"free-money.tv","latitude":9.07,"ipAddress":"222.222.222.222"},{"assetId":"8a498592469189660146919e09900007","oplock":0,"longitude":30.34,"domainName":"facebok.com","latitude":59.93,"ipAddress":"111.111.111.222"},{"assetId":"8a49859246918966014691b14375000b","oplock":0,"longitude":116.41,"domainName":null,"latitude":39.90,"ipAddress":"0.0.0.111"}],"messages":{"messages":[]}}]
To work with JSON, you have in dart a great thing : dart:convert => JSON
here some example of use:
var encoded = JSON.encode([1, 2, { "a": null }]);
var decoded = JSON.decode('["foo", { "bar": 499 }]');
I have done some thing but i'm not sure that is fit perfectly with your need
import 'dart:html';
import 'dart:convert';
void loadData()
{
var url = "http://localhost:8080/***selectAll";
//call the web server asynchronously
var request = HttpRequest.getString(url).then(onDataLoaded);
}
void onDataLoaded(String response)
{
TableElement table = querySelector("#domainTableSelector");
//table.children.add();
var jsonString = response;
// print(jsonString);
var jsonObject = JSON.decode(jsonString);
for (var x = 0; x < jsonObject.length; x++)
{
//create new table row
TableRowElement row = table.insertRow(x+1);
for (var d in jsonObject[x]["serviceResponseValue"]) {
TableCellElement cell = row.insertCell(x);
cell.text = d["assetId"];
cell = row.insertCell(x);
cell.text = d["domainName"];
cell = row.insertCell(x);
cell.text = d["ipAddress"];
print(d["assetId"]);
print(d["domainName"]);
print(d["ipAddress"]);
}
// print(list);
}
}
You parse JSON into a Dart data structure using
import 'dart:convert' show JSON;
var decoded = JSON.decode(jsonString);
see also How to handle JSON in Dart (Alexandres answer)
decoded is then a Dart data structure (lists, maps, values) that you can iterate over or investigate in the debugger. If you need further assistance please add a comment.
I am adding product details.
So for that with it I have to add product attribute, product feature with it.
I am loading all data of attribute from mysql table.
I am using one mechanism that first user have to select attribute category from list (select control), when user select category then as per it data of other list (select control) changes.
main category image :
sub attribute category :
I have added data like this in JavaScript array :
var at_category_id = [];
var at_category_name = [];
<%
List<Integer> aIDList = (List<Integer>) request.getAttribute("aID");
List<String> aNAMEList = (List<String>) request.getAttribute("aNAME");
for (int i = 0; i < aIDList.size(); i++)
{
%>
at_category_id.push(<%= aIDList.get(i) %>);
at_category_name.push(<%= aNAMEList.get(i) %>);
<%
}
%>
var option_str = document.getElementById('list_main_category');
for (var i=0; i<at_category_id.length; i++)
{
option_str.options[option_str.length] = new Option(at_category_id[i],at_category_name[i]);
}
I have done same like this for attribute and add data to JavaScript array.
var at_id = [];
var at_name = [];
<%
List<Integer> acIDList = (List<Integer>) request.getAttribute("acID");
List<String> acNAMEList = (List<String>) request.getAttribute("acNAME");
for (int i = 0; i < aIDList.size(); i++)
{
%>
at_id.push(<%= acIDList.get(i) %>);
at_name.push(<%= acNAMEList.get(i) %>);
<%
}
%>
but now how to move forward I don't know.
I want to do something like that.
Means when user click on first list that is main category how second list will be changed ?
any suggestion please.
The usual way would be to put a javascript action on the value changing for the first combo box.
At that point you can either (easy way) submit the whole form and then send back the new page with the extra value added or (slightly more complex) do an AJAX call to fetch the data and populate the new dropdown.
I am building a website which use geolocation code, It suppose to load mapCanvas and after user click on "Finde Me!" button get his location and set a center of a map based on user location. It's working fine with Firefox, Chrome, Safari, tested on regular PC and iPhone the only device doesn't work with it is any mobile phone with Android. here is a code:
<script src="http://maps.google.com/maps?file=api&v=3&key=YourKey"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(17, 25);
iconBlue.shadowSize = new GSize(1, 1);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(17, 25);
iconRed.shadowSize = new GSize(1, 1);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(50.061795,19.936924), 16);
// Change this depending on the name of your PHP file
GDownloadUrl("Your_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
function findLoc(){
if (!navigator.geolocation) {
alert('Sorry, your browser does not support Geo Services');
}
else {
// Get the current location
navigator.geolocation.getCurrentPosition(showMap);
}
}
function showMap(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var myPoint = new GLatLng(lat, lon);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(myPoint, 15);
GDownloadUrl("Your_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
}
I couldn't find any solution to make it work.
PS
There is no errors or statements giving any hint making it more understandable.
Device got GPS enable.
pleas help I've been trying to figure it out for 2 weeks
I'm afraid you just have an arduous old-fashioned debug in front of you. My approach would be to add visible output at various important points in the code (just before and after getCurrentPosition is called, and at the beginning of showMap, for instance) and narrow down from there just where the failure is occurring. Once you know what's failing you can probably develop an idea of why, but until you know that you're flailing in the dark.
(I've worked on a geolocation-based mobile webapp that supported Android, so in case you need any reassurance, there's nothing inherently impossible about your situation.)