将谷歌图表保存为php服务器上的图像

时间:2017-06-03 05:36:04

标签: mysql charts google-visualization png

我创建了一个从MySQL获取数据的谷歌图表。每当图表呈现时,我想将其作为图像保存到我的PHP服务器。我已经通过一些代码打印图表作为png图像。但我不知道如何将它保存在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>

1 个答案:

答案 0 :(得分:0)

<Button x:Name="facebookBtn" Grid.Column="1" Grid.Row="5" Image="facebook_btn.png"/> 事件中,将图片字符串发回服务器...

'ready'

然后在php中,从帖子中获取图像字符串并保存...

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');
  });
});

帖子字段名称需要与发送数据时使用的密钥相匹配

js

$imgStr = $_POST['imgStr'];

php

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