[SOLVED] load data in google piechart

load data in google piechart

I am trying to make a piechart with the google piechart api..I am making this all clientside(html and javascript only)

What I want to do is the following when my webpage loads: load the chart with data, but when I select some other topic through a dropdownlist it should load other data in the chart...

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var Samplevalue =document.getElementById("SampleVAL").value;
function drawChart() {

  if(Samplevalue.value="ergo01")
  {
    var data = google.visualization.arrayToDataTable([
    ['Soort', 'Aantal'],
    ['Escherichia', 12.10],
    [' Ruminococcus', 6.44],
    ['Christensenellaceae', 6.15],
    ['Oscillospira', 13.20],
    ['Faecalibacterium', 15.50],
    ['Bacteroides', 3.07],
    ['Coprococcus', 1.02],
    ['Bacteroides', 1.00],
    ['Akkermansia', 0.81],
    ['Comamonas', 0.69]
                                                    ]);
  }

else if(Samplevalue.value="ergo02")
  {
    var data = google.visualization.arrayToDataTable([
    ['Soort', 'Aantal'],
    ['Escherichia', 25.10],
    [' Ruminococcus', 60.44],
    ['Christensenellaceae', 66.15],
    ['Oscillospira', 103.20],
    ['Faecalibacterium', 15.50],
    ['Bacteroides', 3.07],
    ['Coprococcus', 1.02],
    ['Bacteroides', 1.00],
    ['Akkermansia', 0.81],
    ['Comamonas', 0.69]
                                                  ]);
  }

else {
  var data = google.visualization.arrayToDataTable([
  ['Soort', 'Aantal'],
  ['Escherichia', 25.10],
  [' Ruminococcus', 60.44],
  ['Christensenellaceae', 66.15],
  ['Oscillospira', 103.20],
  ['Faecalibacterium', 15.50],
  ['Bacteroides', 3.07],
  ['Coprococcus', 1.02],
  ['Bacteroides', 1.00],
  ['Akkermansia', 0.81],
  ['Comamonas', 0.69]
    alert("hier");                                            ]);
    }


var options = {
title: 'My Daily Activities',

};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<script>
function myFunction() {
    
    var e = document.getElementById("SampleVAL").value;
//var strUser = e.options[e.selectedIndex].value;
alert(e);
}

</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<select id="SampleVAL" value="none">
  <option value="ergo01">sample1</option>
<option value="ergo02">sample2</option>
<option value="ergo03">sample3</option>
</select>
<button onclick="drawChart()">Try it</button>
</body>
</html>

The issue was that the chart wasn't loading, thanks to @Sourabh Agrawal its working now...I would like this chart to like a little bit more fancy... I am trying to animate it according to google documents .. I should add in the chart options block the following: >>animation:{ >>duration: 1000, easing: 'out', but somehow it isn't working I want my chart to animate as the chart in the following link: navels.yourwildlife.org/explore-your-data Is this possible with google charts?

Solution

here is the js Fiddle link to your problem.

https://jsfiddle.net/b7rax1jc/

while comparing values you use "==" and not "=" "=" is for assignment.

2.SampleVAL already contains the value of dropsown so you dont need to use SampleVAL.value when comparing

var Samplevalue =document.getElementById("SampleVAL").value;
if(Samplevalue == "ergo1")