Php 单击按钮后绘制谷歌图表_Php_Jquery_Mysql_Google Visualization

Php 单击按钮后绘制谷歌图表

php jquery mysql google-visualization

Php 单击按钮后绘制谷歌图表,php,jquery,mysql,google-visualization,Php,Jquery,Mysql,Google Visualization,当我点击一个按钮时，我需要绘制谷歌图表，但我发现它很难工作。我创建了一个组合图，可以同时显示散点图和折线图我想创建一个按钮，在鼠标点击时显示这个图形。我尝试使用jquery按钮，但图表没有出现。你能帮帮我吗以下是谷歌图表代码： <html> <head> <title>Google Charts </title> <script src="http://ajax.googleapis.com/aj

当我点击一个按钮时，我需要绘制谷歌图表，但我发现它很难工作。我创建了一个组合图，可以同时显示散点图和折线图

我想创建一个按钮，在鼠标点击时显示这个图形。我尝试使用jquery按钮，但图表没有出现。你能帮帮我吗

以下是谷歌图表代码：

<html>
    <head>
        <title>Google Charts </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script>
        $(document).ready(function(){
            $(".btn").click(function(){
                google.load(
                    "visualization", 
                    "1", 
                    {
                        "packages": [ "corechart" ], 
                        "callback": drawChart
                    }
                );
                google.setOnLoadCallback(drawChart);

                <?php
                    $sql = mysql_connect("localhost","root","");
                    if(!$sql)
                    {
                        echo "Connection Not Created";
                    }

                    $con = mysql_select_db("PRJ");

                    if(!$sql)
                    {
                        echo "Database Not Connected";  
                    }

                    $sql = "select * from CF";
                    $result = mysql_query($sql);

                    $count=0;
                    while($row = mysql_fetch_array($result))
                    {
                        $a[]=$row['x'];
                        $b[]=$row['y'];
                        $count++;
                    }

                    $tot=0;
                    $toty=0;
                    $xsqtot=0;
                    $ysqtot=0;
                    $xytot=0;

                    for ($i=0;$i<$count;$i++)
                    {
                        $tot = $tot + $a[$i];
                        $toty = $toty + $b[$i];
                        $xpow[] = $a[$i] * $a[$i];
                        $ypow[] = $b[$i] * $b[$i];
                        $xsqtot = $xsqtot + $xpow[$i];
                        $ysqtot = $ysqtot + $ypow[$i];
                        $product[] = $a[$i] * $b[$i];
                        $xytot = $xytot + $product[$i];
                    }

                    $p = (($tot*$toty)-($count*$xytot))/(($tot*$tot)-($count*$xsqtot));
                    $q = (($xytot*$tot)-($xsqtot*$toty))/(($tot*$tot)-($count*$xsqtot));

                    for ($i=0;$i<$count;$i++)
                    {
                        $cfy[]=($p*$a[$i])+$q;  
                    }

                    $ct=sizeof($a);
                ?>

                var x=new Array();
                <?php
                    for ($i=0;$i<$count;$i++){
                        echo "x[$i]=".$a[$i].";\n";
                    }
                ?>
                                var y=new Array();
                <?php 
                    for ($i=0;$i<$count;$i++){
                        echo "y[$i]=".$b[$i].";\n";
                    }
                ?>

                var z=new Array();
                <?php 
                    for ($i=0;$i<$count;$i++){
                        echo "z[$i]=".$cfy[$i].";\n";
                    }
                ?>

                function drawChart() 
                {
                    var data = new google.visualization.DataTable();
                    data.addColumn('number', 'independent');
                    data.addColumn('number', 'dependent');
                    data.addColumn('number', 'Corrected');
                    for(var i=0;i<x.length;i++)
                    {
                        data.addRows([[x[i],y[i],z[i]]]);
                    }      

                    var options = {
                        'title': 'LAT VS LONG ',
                        'vAxis': {
                            title: 'Dependent variable (Y)'
                        },
                        hAxis: {
                            title: 'Independent variable (X)'
                        },
                        'width':550,
                        'height':400,
                        seriesType:'scatter',
                        series: {
                            1: {
                                type: 'line'
                            }
                        },
                    };
                    var chart = new google.visualization.ComboChart(document.getElementById('chart'));
                    chart.draw(data, options);
                }
            });
        });
    </script>
    </head>
    <body>
    <button class="btn">Plot chart!</button>
    <div id="chart" style="width: 900px; height: 500px;"></div>
    </body>
</html>


谷歌图表
$（文档）.ready（函数（）{
$（“.btn”）。单击（函数（）{
google.load(
“可视化”，
"1", 
{
“包”：[“corechart”]，
“回调”：绘图图
}
);
setOnLoadCallback（drawChart）；
var x=新数组（）；
var y=新数组（）；
var z=新数组（）；
函数绘图图（）
{
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'independent'）；
data.addColumn（'number'，'dependent'）；
data.addColumn（'number'，'Corrected'）；
对于（var i=0；iCn anyon epls建议我可能的答案。我在使此代码正常工作时面临很多困难CN anyon epls建议我可能的答案。我在使此代码正常工作时面临很多困难