|
JavaScript - Google Api Visualization Help
I started using Google API Visualizations to create a bar chart which was very easy because of the code examples google gives but then I realised instead of setting the values I want within the html I wanted a form which would let you input the values you want for the bar chart.
I made it look like this: Using this code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<SCRIPT LANGUAGE="JavaScript">
function UpdateChart (form) {
var TeamA = form.TeamA.value;
var TeamB = form.TeamB.value;
var TeamC = form.TeamC.value;
var TeamD = form.TeamD.value;
}
</SCRIPT>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['barchart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Score');
data.addRows(4);
data.setValue(0, 0, 'Team A');
data.setValue(0, 1, 500);
data.setValue(1, 0, 'Team B');
data.setValue(1, 1, 300);
data.setValue(2, 0, 'Team C');
data.setValue(2, 1, 70);
data.setValue(3, 0, 'Team D');
data.setValue(3, 1, 150);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data, {title: 'Scores', legend: 'none'});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<form name="input" method="get">
Team A:
<input type="text" name="TeamA" value="0" size="1">
<br>Team B:
<input type="text" name="TeamB" value="0" size="1">
<br>Team C:
<input type="text" name="TeamC" value="0" size="1">
<br>Team D:
<input type="text" name="TeamD" value="0" size="1">
<br>
<INPUT TYPE="button" NAME="btnUpdate" Value="Update" onClick="UpdateChart(this.form)">
</form>
</body>
</html>
However, instead of the values I've bolded I want the values from the form to be used. I've never really used Javascript before so I'm not sure what to do. Any help would be appreciated. Similar TutorialsHey all, I want to be able to update the line chart of google visualizations. Here is my code in question: http://jsfiddle.net/YCqyG/5/ Click the button called "click" and suddenly chart disappears. thanks for response Hello, I am looking for some strong resources about the topics above. I am trying to create a map for my website that visualizes Americas opinions on who will win the 2012 election... Obama vs the Republicans. I have a data set that will be the base, but I would like to update the map as users take the accompanying poll and as the data set changes. Any ideas or information would be awesome! Thanks Hi all, I had posted earlier on the NaN issue. I have worked some more on my test file. Basically I want the user to select an option depending on whether he/she has Paracetamol in syrup or drops form. Once this is selected, automatically a different div for syrup or for drops should be seen depending on what the user selected earlier. After this on pushing the calculate button, the output should be appropriate depending on the strength of the solution either for drops or syrup. I have put together what I think code that should work but it stubbornly refuses to do otherwise. I have attached the relevant file. If it doesn't work, obviously there is something wrong but what it is eludes me. Any help will be appreciated greatly, Thanks, I have a page with a GoogleMap with a GoogleBar and I would like the GoogleBar to appear with something written in it already and to have that search executed. In other words, I would like to "write something to the GoogleBar and press Enter" automatically as soon as the map loads. How can I do this? btw: By GoogleBar, I mean the search bar that appears on the map after using the enableGoogleBar() function. Hi, I'm not sure where I have translated this incorrectly. I have one google map embedded on my page which works fine. But I wanted to add a second one. I thought the easiest way to do this would be to have a second page which is called later on with all the details on it for the second map. However although I think (this I presume is where I went wrong) I have replicated the instructions correctly the place holder for the second map just remains blank. This is the code for my called page with the instructions for the second map: PHP Code: <?php echo $_POST['Map'] . '<br />'; ?> <div id="placemap_canvas"></div> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html {height:250px} body {height:250px} #placemap_canvas {width:100%; height:150px;} </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" /> </script> <script type="text/javascript"> var latlng = new google.maps.LatLng ( <?php include("dbconnect.php"); $result = mysql_query("SELECT * FROM regions WHERE RegionPId='{$_POST['Map']}'"); while($row = mysql_fetch_array($result)){ echo $row['maplink']; } mysql_close($con); ?> ); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("placemap_canvas"), myOptions); } </script> And this is the script of the main page, just in case I would be better off keeping them both in one place. Code: <head>
<script type="text/javascript">
function loadSubPlace(File,ID,Msg,Eile,EID,Esg){
loadXMLDoc1(File,ID,Msg);
var mimer = setTimeout(function(){loadXMLDoc1(Eile,EID,Esg)},5000);
}
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {height:250px}
body {height:250px}
#map_canvas {width:30%; height:250px;}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng (
<?php
include("dbconnect.php");
$result = mysql_query("SELECT * FROM countries
WHERE Country='{$_SESSION['Country']}'");
while($row = mysql_fetch_array($result)){
echo $row['Map'];
}
mysql_close($con);
?>);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div class="countryright" id="map_canvas">
include("dbconnect.php");
$snowball=explode(';',$_POST['syringa']);
$turnsol=$snowball[1];
$violet =$snowball[2];
$wakerobin=$snowball[3];
global $turnsol;
global $violet;
global $wakerobin;
echo '<center><b><big>' . $wakerobin. '</big></b></center><br /><br />';
$result=mysql_query("SELECT * FROM regions
WHERE country='{$turnsol}' AND region='{$violet}' AND place='{$wakerobin}' AND sub !=''
ORDER BY sub ASC");
while($row = mysql_fetch_array($result)){
$wheat="{$row['RegionPId']};{$turnsol};{$violet};{$wakerobin};{$row['sub']}";
$tigerlilly=$row['RegionPId'];
echo '<input type="button" class="button3" name="place" id="place" value="' . $row['sub'] . '" onclick="loadSubPlace(\'getPlace.php\',\'txtHintPlaceSub\',\'hepatica=' . urlencode($wheat) . '\',\'getPlaceMap.php\',\'placemapcanvas\',\'Map=' . urlencode($tigerlilly) . '\');" />';
}
echo '<input type="button" class="button3" name="addplace" id="addplace" value="Add Place" onclick="loadXMLDoc1(\'getAddPlaceSub.php\',\'txtHintPlaceSub\', encodeURI(\'addsubplace=' . $_POST['syringa'] . '\'));" />';
echo '<br /><br /><div id="txtHintPlaceSub"></div><br /><br />';
mysql_close($con);
?>
I've cut out the script that doesn't relate to this so I hope I haven't missed anything important. Can the Google API replace scraping? You can get blocked by Google if you scrape, but can you get the same info from the Google API at no risk?
i take an google suggestions code. view source... i hope that is the best "ajax google suggestions" code created... and try to understand it. someone can help to understand that javascript ? write remarks... formated code file attached + : Link1 Hello everyone! I've searched a lot of places for a script like this and found nothing. Here's my situation. My site uses a main iframe that changes as you click links. However, Google links to all my pages, I only want it to access a few (because some pages are only meant to be viewed via iframe). I'm looking for a JavaScript that will detect if the page is being viewed in an iframe, if it is, it should take no action, but if it's no, it should redirect to a different page. Is this possible??? Hi guys, I'm trying to run this sample file that i got from the google docs. I want to write a stock ticker from google finances xml feed and this is a sample they had. Code: <?xml version="1.0" encoding="utf-8"?>
<Module>
<ModulePrefs title="hellofinance">
<Require feature="finance"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
Hello world!
Here is your portfolio:<br/>
GOOG: <span id=_IG_SYM1_l></span> (<span id=_IG_SYM1_c></span>)<br/>
AAPL: <span id=_IG_SYM2_l></span> (<span id=_IG_SYM2_c></span>)<br/>
INTC: <span id=_IG_SYM3_l></span> (<span id=_IG_SYM3_c></span>)<br/>
<script>
var quote = new google.finance.Quote();
quote.enableDomUpdates( { 'GOOG' : '_IG_SYM1', 'AAPL' : '_IG_SYM2',
'INTC' : '_IG_SYM3' } );
quote.getQuotes(["GOOG", "AAPL", "INTC"]);
</script>
]]>
</Content>
</Module>
my problem is i don't know how to execute it so i can see how it works. I tried sticking this code within a php file and it returns an error on the first line for unexpected t-string. So i tried changing the extension to xml and it just displays the code but does not execute. I'm stumped. Any help is appreciated. Thanks P.S. - Yes i do have the zend gdata framework installed and running on my server and is working correctly according to their test. Hi, I have a table with FROM and TO columns and a column with MAP/DIRECTIONS link. When a user clicks on the link, it should display Map and Directions on the iframe on the same page. How can I achieve this using Google map and directions API? Thanks Is there a javascript that when I mouse over a object like the the magnifying glass that can be seen after a google search that will display a preview image and then make that image clickable to pull up that webpage/file? TYIA James Hi there, I know too little of JavaScript to get the Google Maps API working. I hope someone can help me out! My goal is to display an address. In the example on google, you can input it through a form: http://code.google.com/apis/maps/doc...ng-simple.html I would like the map to show the location+marker when I open the page, not after clicking a submit button. However, I only want an address in my html. I want the API to convert it in a LatLng format. Hopefully, someone can take the time to look at it. It's all in the source code of the page mentioned above, I believe. Thanks! Hello, I think I am posting this in the right spot! I'm trying to add google translate to my mobile website... Because, I want an easy way for koreans to read it. It's a mobile site by dudamobile so my editing ability is limited.. the issue I am having is it works but it is throwing off my scrolling ability and page size and the toolbar and banner was spanning my webite to a very large area which threw off the look of the site. I was able to remove the banner (which I didnt need) by inputing this code into the CSS body {top: 0px !important; position: static !important; } .goog-te-banner-frame {display:none !important} but the drop down bar still has a spand the size a full sized website for some reason I pasted in the following code provided by google translate for the site: <div id="google_translate_element"></div><script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: 'zh-CN,zh-TW,en,de,ja,ko,th', layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element'); } </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> Is there any code that can be added to restrict the size of this bar? again the translate option works outside of this. Thanks Dave Hi I have just started looking at the Google maps, and have atutorial that will get the co-ordinates. What I want this to do, is then populate two fields on a form one called longitude and one called latitude Code: function usePointFromPostcode(postcode, callbackFunction) {
localSearch.setSearchCompleteCallback(null,
function() {
if (localSearch.results[0]) {
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
var point = new GLatLng(resultLat,resultLng);
callbackFunction(point);
}else{
alert("Postcode not found!");
}
});
localSearch.execute(postcode + ", UK");
}
Any ideas/tips would be be much appreciated I am designing a site where users can submit a location. I want to use Google Maps with a draggable marker which posts the lat, lon when dropped on a position. I was wondering if anyone knows of a tutorial or could point me in the direction of anything similar. Hello guyz! I need to fetch some images whit custom sizes in Google Images, this is the API from Google that let me search end fetch images: Code: /*
* How to search for images and restrict them by size.
* This demo will also show how to use Raw Searchers, aka a searcher that is
* not attached to a SearchControl. Thus, we will handle and draw the results
* manually.
*/
google.load('search', '1');
function searchComplete(searcher) {
// Check that we got results
if (searcher.results && searcher.results.length > 0) {
// Grab our content div, clear it.
var contentDiv = document.getElementById('content');
contentDiv.innerHTML = '';
// Loop through our results, printing them to the page.
var results = searcher.results;
for (var i = 0; i < results.length; i++) {
// For each result write it's title and image to the screen
var result = results[i];
var imgContainer = document.createElement('div');
var title = document.createElement('h2');
// We use titleNoFormatting so that no HTML tags are left in the title
title.innerHTML = result.titleNoFormatting;
var newImg = document.createElement('img');
// There is also a result.url property which has the escaped version
newImg.src = result.tbUrl;
imgContainer.appendChild(title);
imgContainer.appendChild(newImg);
// Put our title + image in the content
contentDiv.appendChild(imgContainer);
}
}
}
function onload() {
// Our ImageSearch instance.
var imageSearch = new google.search.ImageSearch();
// Restrict to extra large images only
imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
google.search.ImageSearch.IMAGESIZE_MEDIUM);
// Here we set a callback so that anytime a search is executed, it will call
// the searchComplete function and pass it our ImageSearch searcher.
// When a search completes, our ImageSearch object is automatically
// populated with the results.
imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);
// Find me a beautiful car.
imageSearch.execute("Subaru STI");
}
google.setonloadCallback(onload);
But all I could find about restricted images sizes is this: Code: imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
google.search.ImageSearch.IMAGESIZE_MEDIUM);
My problem is that I need custom fixes images sizes, not between a range of values like the above script was giving me... Google API reference says that: Code: google.search.ImageSearch.RESTRICT_IMAGESIZE - When this is specified as the value of type, the image search results will be restricted to images with certain pixel dimensions. Valid optional values for this type are as follows: * google.search.ImageSearch.IMAGESIZE_SMALL - restrict to small images, icons * google.search.ImageSearch.IMAGESIZE_MEDIUM - restrict to medium images * google.search.ImageSearch.IMAGESIZE_LARGE - restrict to large images * google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE - restrict to extra large images Those who wants to play whit Google Playground, this is the link: Code: http://goo.gl/sPs2 Could some one help me get that images whit fixed sizes? I am making a dynamic google map and need to pass in a JS Object that has latitude, longitude, address, name, and a link. The JS Object will be getting those values from a DB and may have up to 15 recordsets. I need to know how to separate that out into it's entities to include in the Map API regardless of how many recordsets there are.
Hi, Can anyone help define the difference between the 2 scripts below and help identify what is/should happen for each? Code: <script type="text/javascript">
var _gaq = _gaq || [];
//NHG COMMENT: if there is an existing account, then it needs to be incorporated within this tag.
//The xx-xxxx-x par represents the google account code that needs to be inserted
// if there is no existing tag in place, then take out the 2 follwoing lines marked (1) and (2)and (3)
(1) _gaq.push(['_setAccount', 'XX-XXXXXX-X']);
(2) _gaq.push(['_setDomainName', 'MYSUBDOMAIN.domain.com']);
(3) _gaq.push(['_trackPageview']);
NHG COMMENT: This is the global tag and everything below this MUST NOT BE CHANGED
_gaq.push(['_setAccount', UA-16522538-1']);
_gaq.push(['_setDomainName', 'domain.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Code: // copy and paste the tag below
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'XX-XXXXXX-X']);
_gaq.push(['_setDomainName', 'MYSUBDOMAIN.domain.com']);
_gaq.push(['_trackPageview']);
_gaq.push(['_setAccount', UA-16522538-1']);
_gaq.push(['_setDomainName', 'domain.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
I am using jMapping(http://vigetlabs.github.com/jmapping/) for using jQuery with google maps. What I'm trying to do is add an event listener so that when you click on a marker it will call a function I made within the jMapping function. Does anyone have any clues? everything I've tried doesn't work.
Hi, I have just set up google analytics on my website but it is showing tracking unknown symbol in the status. Is it just the case of it taking time to set up or should it work straight away. Thanks Tyler |
|||||||