Javascript Google绘制了php、mysql和ajax的图表_Javascript_Php_Html_Mysql_Ajax

Javascript Google绘制了php、mysql和ajax的图表

javascript php html mysql ajax

Javascript Google绘制了php、mysql和ajax的图表,javascript,php,html,mysql,ajax,Javascript,Php,Html,Mysql,Ajax,尽我最大的努力但我就是想不出来。。。我希望用户在数据库中搜索genename。然后用新的genename数据更新google气泡图。文件：[ 我已经植入了ajax部分，所以搜索后用新数据更新气泡图是必须做的 HTML load（'current'，{'packages'：['corechart']}）； google.charts.setOnLoadCallback（drawSeriesChart）；函数drawSeriesChart（）{ var jsonData=$.ajax({ ur

尽我最大的努力但我就是想不出来。。。我希望用户在数据库中搜索genename。然后用新的genename数据更新google气泡图。文件：[

我已经植入了ajax部分，所以搜索后用新数据更新气泡图是必须做的

HTML


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawSeriesChart）；
函数drawSeriesChart（）{
var jsonData=$.ajax({
url:“getData.php”，
数据类型：“json”，
异步：false
}).responseText；
var data=google.visualization.arrayToDataTable（jsonData）；
var chart=new google.visualization.BubbleChart（document.getElementById（'series\u chart\u div'）；
图表绘制（数据、选项）；
}
变量选项={
标题：“随机标题”，
hAxis:{title:'水平轴'}，
变量：{title:'vertical axis'}，
气泡：{textStyle:{fontSize:11}}
};
}
基因名称：

PHP

你能发布$myArray[]
的结果吗？我忘了返回这个问题。我通过将index.html更改为index.php并嵌入html来解决它。然后将php行回送到图表中。你能发布$myArray[]的结果吗？我忘了回到这个问题。我通过将index.html改为index.php并嵌入html来解决这个问题。然后将php行回送到图表中。
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {
      var jsonData = $.ajax({
        url: "getData.php",
        dataType: "json",
        async: false
        }).responseText;


      var data = google.visualization.arrayToDataTable(jsonData);

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
      var options = {
        title: 'random title',
        hAxis: {title: 'horizontal axis'},
        vAxis: {title: 'vertical axis'},
        bubble: {textStyle: {fontSize: 11}}
      };


    }
</script>
  </head>
    <body>

        <form action="getData.php" method="post">
          Genename:<input type="text" name="gene" value=""><br>
          <input type="submit" value="Submit"> 
        </form>

        <div id="series_chart_div" style="width: 900px; height: 500px;"></div>
    </body>
</html>

<?php

$search_value=$_POST["gene"];
$mysqli = new mysqli('localhost','root','usbw','mydb');
$myArray = array();
if ($result = $mysqli->query("SELECT * FROM transcriptome WHERE genename LIKE '%$search_value%'")) {

    while($row = $result->fetch_row()) {
            $myArray[] = $row;


    } //json encode and return to chart.

    //this is how the data looks like hardcoded without the ajax part "['".$row['genename']."', 2, ".$row['TA11MEAN'].", 'control', ".$row['TA11STD']."],";
//2 is position on x-axis + control is groupname
}

$result->close();
$mysqli->close();
?>