Drop Down Menu And Visualization

I'm trying to to add a drop-down box menu in which i will make my choice in order to visualize data. My visualization works fine without the drop-down box but when i put them toget

Solution 1:

I believe that the JavaScript you've written is syntactically invalid.

You've written function f1() { "string" } where "string" looks like a JSON string. I think that you meant to write code that would invoke a function that would pass this string as a parameter, but I don't know the syntax of the service you're using.

<scripttype="text/javascript"src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">functionf1(){
 {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AihqKzH-MgAndERnaFVsYk1RLUM3S0pDSmNjcEQ4M1E&transpose=0&headers=0&range=A2%3AB13&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}}],"booleanRole":"certainty","animation":{"duration":0},"useFirstColumnAsDomain":true,"hAxis":{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},"isStacked":false,"width":454,"height":285},"state":{},"chartType":"AreaChart","chartName":"\u0393\u03c1\u03ac\u03c6\u03b7\u03bc\u03b1 1"} 
 }
 </script>

Solution 2:

<scripttype="text/javascript">functionallagi() {
    if (document.getElementById("d4ropdown1").value == "s1" )
   {
    alert ("1");
   }
 elseif (document.getElementById("selection02").value == "s2")
  {
   document.getElementById("VisualizationDisplay").style.display = "block";
   }
  elseif (document.getElementById("selection03").value == "s3")
  {
   alert("3");
  }
  elseif (document.getElementById("selection04").value == "s4")
  {
   alert("4");
  }
  }
</script><divid="VisualizationDisplay"style="display:none"><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">
 {"dataSourceUrl":"https://docs.google.com/spreadsheet/tq?key=0AihqKzH-MgAndERnaFVsYk1RLUM3S0pDSmNjcEQ4M1E&   transpose=0&headers=0&range=A2%3AB13&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}}],"booleanRole":"certainty","animation":{"duration":0},"useFirstColumnAsDomain":true,"hAxis":{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},"isStacked":false,"width":454,"height":285},"state":{},"chartType":"AreaChart","chartName":"\u0393\u03c1\u03ac\u03c6\u03b7\u03bc\u03b1 1"} </script></div><divid="logo"><selectid="d4ropdown1"onchange="allagi()"><optionid="selection01"value="s1">Selection01</option><optionid="selection02"value="s2">Selection02</option><optionid="selection03"value="s3">Selection03</option><optionid="selection04"value="s4">Selection04</option></select></div>

This is just an hack ... it works as you want it...but I am sure there should be a better way of doing it..sorry if I wasn't helpful...