afficher données sur un graphique via un datepicker

Bonjour,
j'ai fais un graphique dynamique à l'aide de google chart api pour afficher des données dans 2 courbe provenant d'une bdd. J'ai ensuite rajouté en dessous un datepicker. J'aimerais pourvoir afficher des données d'une date a une autre sur mon graphique en sélectionnant 2 dates puis en cliquant sur un bouton go par exemple. Le soucis c'est que je bloque complétement sur la façon de pouvoir faire ça.
Je vous montre le code de mon graphique ainsi que celui du datepicker pour ceux qui voudraient le voir.
J’espère ne pas trop abuser, je demande pas une solution toute faite mais quelques conseils remarque si vous en avez une je ne crache pas dessus hein ;)
Merci d'avance pour votre aide.

code du datepicker:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<title>Default jQuery datepicker</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.21.custom/css/ui-lightness/jquery-ui-1.8.21.custom.css">
<script src="jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.21.custom/development-bundle/ui/i18n/jquery.ui.datepicker-fr.js" type="text/javascript"></script>
<script>
$(function() {
$( "#datepickerbegin" ).datepicker();
});
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
});
$(function() {
$( "#datepickerend" ).datepicker();
});
</script>
</head>
<body>
<form name="date" method="GET" action=""><p>Sélectionner les dates: <input id="datepickerbegin" name="datepickerbegin" type="text"> >> <input id="datepickerend" name="datepickerend" type="text"><input name="submit" type="submit" value="GO" /></p></form>
</body>
</html>

code du graphique:

Code:

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
 
<center><script type="text/javascript" src="https://www.google.com/jsapi"></script></center>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        <?php echo "['Date', 'Hits Gbot', 'Url'],"; ?>
<?php
while ($row = mysql_fetch_assoc($result)) {
echo "['".$row['log_date']."', ".$row['nb'].", ".$row['url']."],";        
//echo "['".$row['log_date']."', ".$row['nb']."'.$row['url']."],";
 
}
?>
        ]);
        var options = {
          title: 'Crawl GoogleBot'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script></center>
 
<div class=graph id="chart_div" style="width: 100%; height: 300px; align:center;"></div>