Display a Google chart in a popup window + pass parameters to the chart through a hyperlink/button

Question 1

It's about to get ugly...read on at your own risk !
Seriously, it's not a particularly elegant solution, but it might work for you (based on your specific requirements, which at the moment of writing are not very clear to me).

You could use a custom data-* attribute (let's call it data-chart-data) in each <a> element you want to display a chart and store there some serialized data.
(For my illustration I used a simple scheme: separating table rows with | and separating cell-data with ,).)

<a href="#data" class="chartLink" 
        data-chart-data='"Year","Sales","Expenses"|"2004",1000,400'>
    Show Chart
</a>

Then, on the JS part, you need to pass the chart-data as parameter to the drawVisualization() function.

Accessing the chart-data (using HTML5): aElem.dataset.chartData
Accessing the chart-data (no HTML5): aElem.getAttribute("data-chart-data")

Unfortunately, you will need some custom function to convert the chart-data from string representation to a JS array. Here is my sample function that expects values of type integer (anything not enclosed in ") and string (anything enclosed in "):

function strToArr(str) {
    var arr = [];
    var rows = str.split("|");
    for (var i = 0; i < rows.length; i++) {
        var row = [];
        var regex = new RegExp("^\"(.*)\"$");
        var values = rows[i].split(",");
        for (var j = 0; j < values.length; j++) {
            var value = values[j].trim();
            row.push(regex.test(value) 
                    ? RegExp.$1 
                    : parseInt(value, 10));
        }
        arr.push(row);
    }
    return arr;
}

Of course, you should modify this function to cover your needs.
In similar fashion, you could serialize the "options" and pass them as parameter to drawVisualization() too.

See, also, this short demo.

Question 2

There's three solutions: getting the data from the user, generating the data and visualisation from a server-side script, or obtaining the data after the script is loaded, via ajax.

From the user. Add a form to the page. Using javascript events, when the user has entered their data, you process it and refresh the visualisation.
From a server. Use a server-side language, e.g. PHP or ASP.net, to get the data from where it is - an outside source, a database... The server would obtain the data, then reformat it in the list of arrays Google chart expects.
Via Ajax. You still need a server-side script to pick up the data where it is, but ajax results in more flexibility. A client script requests the data from the server. When the server sends it back, a callback function starts off the charting.

Question 3

Since Now Bootstrap is a popular front-end development framework,they provide a pop-window action in a nice modal . Following will be the best solution (what I was expected) for my question.And I'm posting this answer because others can get a clear understanding about the solution for the above question. cheers! :)

Inclusion of relevant CDNs

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

Script for Google visualization chart

<script>
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawVisualization);
    function drawVisualization(year,value1,value2) {
         var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],[year,value1,value2],]);
             var options = {title: 'Company Performance',hAxis: {title:'Year',titleTextStyle:color: 'red'}}};

new google.visualization.ColumnChart(document.getElementById('chart_div')).draw(data, options);
          }
    </script>

Bootstrap essentials

    <body>
<h1>POP UP Google Chart Using Bootstrap </h1>
<button class="btn btn-primary btn-lg" onclick="drawVisualization('2004',50,35)" data-toggle="modal" data-target="#myModal">
  Launch Google Chart
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Pop Up</h4>
      </div>
      <div class="modal-body">
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</body>