2017-06-03 10 views
0

MySQLからデータを取得するGoogleのチャートを作成しました。グラフをレンダリングするたびに自動的にPHPサーバにイメージとして保存したいと思います。私は、PNG画像としてチャートを印刷するコードをいくつか使っていましたが、PHPサーバに保存する方法はわかりません。誰か助けてもらえますか?ここでGoogleのグラフをPHPサーバの画像として保存

はMYSQLからチャートをレンダリングする私のコードです:

<html> 
<head> 
<title>Google Charts </title> 
     <script src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 


google.charts.load('current', {packages: ['corechart']}); 
    google.charts.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 LF"; 
$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', 'TRENDLINE'); 

for(var i=0;i<x.length;i++) 
{ 
    data.addRows([[x[i],y[i],z[i]]]); 
}  

    var options = {'title':'LAT VS LONG ', 
vAxis: {title: 'X'}, 
     hAxis: {title: 'Y'}, 
     'width':550, 
     'height':400, 
seriesType:'scatter', 
series: {1: {type: 'line'}}, 
}; 


    var curve_chart = document.getElementById('curve_chart'); 
var chart=new google.visualization.ColumnChart(curve_chart); 
google.visualization.events.addListener(chart, 'ready', function() { 
     curve_chart.innerHTML = '<img src="' + chart.getImageURI() + '">'; 
     console.log(curve_chart.innerHTML); 
     }); 
    chart.draw(data, options); 
} 


</script> 

</head> 
<body> 
    <div id="curve_chart" style="width: 900px; height: 500px;"></div> 
</body> 
</html> 
+0

は – WhiteHat

+0

... AJAX使用してサーバーに戻す画像列を投稿

JS

imgStr: chart.getImageURI() // <-- imgStr 

phpのデータを送信する際に使います。 。 –

答えて

0

'ready'イベント内で、サーバーに戻す画像列を投稿...

google.visualization.events.addListener(chart, 'ready', function() { 
    $.ajax({ 
    type: 'POST', 
    url: 'saveImage.php', 
    data: { 
     // send image string as data 
     imgStr: chart.getImageURI() 
    }, 
    }).success(function(response) { 
    console.log('image saved'); 
    }); 
}); 

その後、PHPで、取得投稿の画像文字列を保存して保存してください。

$imgStr = $_POST['imgStr']; 

投稿フィールド名はキーに一致する必要があります私は戻って画像の文字列を投稿する方法がわからない

$imgStr = $_POST['imgStr']; // <-- post field name 'imgStr' 
+0

助けてもらえますか?AJAXを使ってphpに保存したbase64画像の文字列を保存する例がたくさんあるはずです。 – WhiteHat

+0

私はあなたが上記のことをしていましたが、私の中に保存されている画像は見つかりませんでした。サーバ。私も実際にコードを理解することはできません。上記のコードを参考にして投稿して、AJAX呼び出しを実装する場所とsaveImage.phpの実際の内容を簡単に理解することができます。 –

関連する問題