First, remove the 'onchange="drawChart(this.value)"' attribute from your
<select> element, and give your <select> elements ID's:
<select name="Parametr" id="Parametr">...</select>
<select name="Sistem" id="Sistem">...</select>
Then in javascript, hook up change event handlers to your <select> elements:
google.setOnLoadCallback(function () {
function updateChart () {
var parameter = $('Parametr').val();
var system = $('Sistem').val();
drawChart(parameter, system);
}
$('Parametr').change(updateChart);
$('Sistem').change(updateChart);
// if you want the chart to draw on page load, call it here:
drawChart(< default value for parameter >, <default value for system >);
});
Your drawChart function needs to accept two parameters:
function drawChart (parameter, system) {
// use parameter and system, get your data, and draw your chart
}
On Friday, June 13, 2014 11:10:35 AM UTC-4, Vincenzo Diligente Tizzani
wrote:
> Hi,i have a question.
> This is my index.php:
> <html>
> <head>
> <meta charset="UTF-8">
> <title>Prova</title>
>
>
>
> <!--Load the AJAX API-->
> <script type="text/javascript" src="https://www.google.com/jsapi
> "></script>
> <script type="text/javascript" src="//
> ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
> <script type="text/javascript">
>
> // Load the Visualization API and the piechart package.
> google.load('visualization', '1', {'packages':['corechart']});
>
> // Set a callback to run when the Google Visualization API is loaded.
> google.setOnLoadCallback(drawChart);
>
> function drawChart(num) {
> var json = $.ajax({
> url: "prova.php",
> data: "q="+num,
>
> dataType:"json",
> async: false
> }).responseText;
>
>
> // Create our data table out of JSON data loaded from server.
> var datachart = new google.visualization.DataTable(json);
>
> var options = {
>
> is3D: 'true',
> width: 800,
> height: 600
>
> };
> var chart = new
> google.visualization.PieChart(document.getElementById('chart_div'));
> chart.draw(datachart,options);}
>
>
> </script>
>
> <form>
> <select name="Parametr" onchange="drawChart(this.value)">
> <option value="">Select a Parameter:</option>
> <option value="Param1">Parametr1</option>
> <option value="Param2">Parametr2</option>
> <option value="Param3">Parametr3</option>
>
> </select>
> <select name="Sistem" >
> <option value="">Select a Component:</option>
> <option value="comp1">Component1</option>
> <option value="comp2">Component2</option>
> <option value="comp3">Component3</option>
> </select>
> </form>
>
>
> </head>
>
> <body>
> <div id="chart_div" style="width: 500px; height: 500px;"></div>
>
> </body>
> </html>
>
> how do I pass two values to the function drawChart?
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
