JavaScript - Google Visualization Doesn't Update Chart (jsfiddle Example Provided)

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'm trying to make a similar form to what Craigslist uses where you can mail to a user provided email and make it look like it came from whatever email address the user provides. I've looked at the code from the Craigslist page and can't seem to find the correct program they are using.

I've been out of the game for a while and saying my coding is rusty is an understatement. Any help would be appreciated.

Can anyone help me get a start to make a tournament chart that assighs a value to each player and depending on that value it beats a other player.

Hi,
I was wondering if someone could help me out by providing me with the code which allows the chart to slide on (click on Report a Link , right next to the search box):
http://www.watchseries-online.com/20...x9-improv.html

I need to imporove the way this functions on my site.
Here is how the report a link functions on my site:

1. go to
http://tehcake.com/video/Simpsons/6x9
Look right below the video and right above the chatbox
" Report Broken Episode/ Problem "

if you click on the link, it takes you to another pages where the form is located.
I would like to change it so that when a user clicks on
" Report Broken Episode/ Problem ", then it simply relveals a sliding down chart that operates like the one found at

http://www.watchseries-online.com/20...x9-improv.html

(where it says :
[!] REPORT A LINK in red text, to the left of the searchbox
click on that, then click submit. It is not only better looking but also submits without even leaving the page)

Hi,

I would like to use the following chart in my webpage

http://people.iola.dk/olau/flot/examples/visitors.html

the data being used in the chart example above looks like this:

[1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], ...

I guess that the long number is the date?!

The data I have is:

a date that is coming from my database which was added using the date(); object

and

a numerical figure such as 21.365 or 30.432 or 36.856

here is my code below currently in a list format (HTML):

Code:

 <script type="text/javascript" charset="utf-8">
        
      var html5rocks = {};
      html5rocks.webdb = {};
      html5rocks.webdb.db = null;
      
      html5rocks.webdb.open = function() {
        var dbSize = 10 * 1024 * 1024; // 10MB
        html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
      }
      
      html5rocks.webdb.createTable = function() {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("ALTER TABLE bmical ADD bmires INTEGER");
          tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 TEXT, weight1 TEXT, bmires TEXT, added_on DATETIME)", []);
        });
      }
      
      html5rocks.webdb.addTodo = function(todoText) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          var weight1 = document.getElementById("weight1").value;
          
        var height2 = todoText / 100
  		var BMI = weight1  / (height2 * height2)
        
        var BMI = BMI;
		var bmires = BMI.toFixed(3);
          
          
          var addedOn = new Date();
          tx.executeSql("INSERT INTO bmical(height1, weight1, bmires, added_on) VALUES (?,?,?,?)",
              [todoText, weight1, bmires, addedOn],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
         });
      }
      
      html5rocks.webdb.onError = function(tx, e) {
        alert("There has been an error: " + e.message);
      }
      
      html5rocks.webdb.onSuccess = function(tx, r) {
        // re-render the data.
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      
      html5rocks.webdb.getAllTodoItems = function(renderFunc) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("SELECT * FROM bmical ORDER BY added_on DESC", [], renderFunc,
              html5rocks.webdb.onError);
        });
      }
      
      html5rocks.webdb.deleteTodo = function(id) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          tx.executeSql("DELETE FROM bmical WHERE ID=?", [id],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
          });
      }
      
      function loadTodoItems(tx, rs) {
        var rowOutput = "";
        var todoItems = document.getElementById("todoItems");
        for (var i=0; i < rs.rows.length; i++) {
          rowOutput += renderTodo(rs.rows.item(i));
        }
      
        todoItems.innerHTML = rowOutput;
      }
      
      
      
      function renderTodo(row) {
        return "<li>On: " + row.added_on + " Height: " + row.height1 + " Weight: " + row.weight1 + " BMI: " + row.bmires + "<a class='delete' href='javascript:void(0);'  onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a></li>";
      }
      
      function init() {
        html5rocks.webdb.open();
        html5rocks.webdb.createTable();
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      function addTodo() {
        var height1 = document.getElementById("height1");
        html5rocks.webdb.addTodo(height1.value);
        height1.value = "";
      }
    </script>

the 2 variables I'd like to use a bmires, addedOn

is there a ways in javascript to create graphs chart? i can't seem to find a code on the internet

Hey all i am in need of some help trying to figure out how to pass a string into an array field for a chart. The chart i am using is this [http://www.highcharts.com/]

Here is the chart code:
Code:

 function drawChart(theDATA)
    {
        var chart = new Highcharts.Chart({
            chart: {renderTo: 'container',defaultSeriesType: 'column'},
            title: {text: 'March 2010 Confirmed User Visit\'s'},
            xAxis: {categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']},
            yAxis: {min: 0,title: {text: 'User Visit\'s'}},
            legend: {layout: 'vertical',backgroundColor: '#FFFFFF',style: {left: '100px',top: '70px',bottom: 'auto'}},
            tooltip: {formatter: function() {return this.y;}},
            plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},
                series: [{name: 'Confirmed Users Visit\'s',
                data: theDATA.split(',')
            }]
        }); 
    }

With the code above, you would think that theDATA would work but it does not display the data within it.

Say that theDATA is '2,5,4,7,8,9'. If i had this:
Code:

data: [2,5,4,7,8,9]

Then it would work just fine. But if i use those same numbers...
Code:

theData = "2,5,4,7,8,9"
data: theDATA.split(',')

It does nothing on the chart...

So what am i doing wrong????

David

I run a christian ministry that mentors kids. One aspect of this is tracking their chores. All of the online sticker charts we have used over the yrs have vanished. Currently we are using one that only puts checkmarks in the squares and the kids are bored with it. So I want to create a clickable table that puts an icon in the cells on click. I know a little html and ive designed websites with a visual editor. If someone could please point me in the right direction where I would even begin to learn how to create the script I described it would be greatly appreciated.


In case it is not clear what I would like to create this video shows the most recent site we used.( hopefully including the link is not advertising since the site shown in the video is gone. If it is I apologize) It is no longer up. Hence my wanting to create a similar script that can be added to our church's website. thanks again for any guidance.

a bit of an aside please don't just suggest we use an app. I know there are apps out that do what I described and more but, an online version is preferable because the kids don't live with their mentors. Also some of them only have computer access at the library. so it is unreasonable to expect them to have a smart phone or tablet.





Reply With Quote




01-10-2015, 10:42 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Well, just to start with, you are going to need "baqkend" code. That is, you will need a database where all the information can be recorded and server-side code to maintain and access that information. The most likely candidate for this would be a MySQL database and PHP code to interface to it and to produce the web pages.

You really have no choice but to do it this way: If the child used the exact same computer *AND* had an account on that computer, then you could do it by saving the information on that computer. But with a library-based computer, (a) accounts are anonymous, not assigned [typically] and (b) the child may not be able to use the exact same computer on subsequent days.

By doing the bulk of the work on a server, you ensure that any computer (or pad or phone) can access the same information and present the same interface (or perhaps a modified interface for smaller screens).

This is *NOT* a trivial task. Never mind the pretty graphics: Just the code behind the scenes is enough that nobody is going to do it in a few days (or at least is not going to get it right in a few days).

You have to locate a host ($$ per month/year), get a domain name ($$ per year), create a database, create the tables in that database, write the PHP code to modify the database, write the PHP code to access the database, write the PHP code to create the HTML pages, create the icons and other graphics for the pages, and so on.

Hi everyone,

I am new to web development. The company I am working for would like to develop a data analysis web interface. This interface would take information from a mySQL database from certain queries and then save the data into an array. After this the data would be exported to Microsoft Excel where a Chart would be created and then uploaded to the web interface.

So far I have been able to store the mySQL data into an array but I have been having trouble trying to determine if you can in fact use javascript to tell Excel to create the chart.

Any help would be greatly appreciated.

I am really new to coding and am trying to include a flowchart that I have created on my site. There is a series of 5 questions with 2 possible answers for each question. Can anyone help me with some coding that would let me show only the first question and based on how they answer that, the flow chart would open up to the second question and once they answer the second question, it opens up to the third question and so on?

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?

This is a script which has a window slide down on the page and a user can choose yes/no to continue. It works in all browsers other than IE...any help please? If you need more info, please let me know. Thanks.

<script language="JavaScript" type="text/javascript">
<!--
var allowpop=1;
function popWin(){
var ppl="popLayer";var objppl=findObj(ppl);
if (objppl==null){return;}// if the layer does not exist, do nothing.
var args=arguments,movetoX=parseInt(args[0]),movetoY=parseInt(args[1]),movespeed=parseInt(args[2]);
var cycle=10,pxl="";
if(!document.layers){objppl=objppl.style;}
if(objppl.tmofn!=null){clearTimeout(objppl.tmofn);}
var pplcoordX=parseInt(objppl.left),pplcoordY=parseInt(objppl.top);
var xX=movetoX,yY=movetoY;if((pplcoordX!=movetoX)||(pplcoordY!=movetoY)){
var moveX=((movetoX-pplcoordX)/movespeed),moveY=((movetoY-pplcoordY)/movespeed);
moveX=(moveX>0)?Math.ceil(moveX):Math.floor(moveX);movetoX=pplcoordX+moveX;
moveY=(moveY>0)?Math.ceil(moveY):Math.floor(moveY);movetoY=pplcoordY+moveY;
if((parseInt(navigator.appVersion)>4||navigator.userAgent.indexOf("MSIE")>-1) && (!window.opera)) {pxl="px";}
if (moveX!=0){eval("objppl.left='" + movetoX + pxl + "'");}
if (moveY != 0) {eval("objppl.top = '" + movetoY + pxl + "'");}
var sFunction = "popWin(" + xX + "," + yY + "," + movespeed+ ")";
objppl.tmofn = setTimeout(sFunction,cycle);
}
}
function findObj(theObj, theDoc){
var p, i, foundObj;
if(!theDoc) theDoc = document;
if((p = theObj.indexOf("?")) > 0 && parent.frames.length)
{theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}
function hideLayer(layername){
layer=findObj(layername);
if(layer.style){layer=layer.style;}
layer.visibility='hidden'; }

// -->
</script>