2013-08-07 63 views
1

我想显示一个饼图(使用Highcharts库)地标的弹出框(谷歌地球桌面)内从驻留在现场服务器上的MySQL数据库获取的数据。highcharts JSON谷歌地球

该图表旨在动态和实时。

从我的研究,我发现我可以使用JSON从PHP脚本在服务器中取出并送至HTML文件预处理格式的数据做。

我把HTML代码(highcharts.html)地标弹出式内,它是指驻留在服务器上的文件retrieve_data.php。

php文件被成功获取虚拟数据(如果你访问HTML代码中提到的PHP脚本的地址,你可以看到他们),所以它似乎JSON编码完成。

的事情,现在是如何最终在谷歌地球地标(或谷歌地球的地标来接他们)给他们....

我缺少的东西与服务器的通信或者我做了什么错误??

注:这是我的JSON数据传输第一次接触!

下面是我使用的文件。

谢谢大家提前对你的帮助

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

     <script> 
     $(document).ready(function() { 
      var options = { 
       chart: { 
        renderTo: 'container', 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false 
       }, 
       title: { 
        text: 'gjcgjcgjcgjj' 
       }, 
       tooltip: { 
        formatter: function() { 
         return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
        } 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         dataLabels: { 
          enabled: true, 
          color: '#000000', 
          connectorColor: '#000000', 
          formatter: function() { 
           return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
          } 
         } 
        } 
       }, 
       series: [{ 
        type: 'pie', 
        name: 'Browser share', 
        data: [] 
       }] 
      } 

<!-- maybe the correct file address is http://diss.web44.net/retrieve_data.php --> 
       $.getJSON("http://diss.web44.net/home/a1964573/public_html/retrieve_data.php", function(json) { 
       options.series[0].data = json; 
       chart = new Highcharts.Chart(options); 
      }); 



     }); 
     </script> 


     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    </head> 

    <body> 
     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
    </body> 

</html> 

------------和PHP文件---------

<?php 

$hostname = "host"; 
$username = "user"; 
$pass  = "pass"; 
$db  = "awesomedb"; 

$connection = mysql_connect($hostname,$username,$pass); 

if (!$connection) 
{ 
    die('Could not connect: ' . mysql_error()); 
} 

mysql_select_db($db, $connection); 

$result = mysql_query("SELECT sensorID,temp FROM ccdata"); 

$rows = array(); 
while($r = mysql_fetch_array($result)) { 
    $row[0] = $r[0]; 
    $row[1] = $r[1]; 
    array_push($rows,$row); 
} 

print json_encode($rows, JSON_NUMERIC_CHECK); 

mysql_close($connection); 
?> 

回答

1

的问题是,这个URL是正确的一个(至少对我来说):http://diss.web44.net/retrieve_data.php

而且你的JSON有所有数字为字符串,例如: - > 20.00是一个字符串,而应该是nuber。改变这一点,以获得数字,并会正常工作。

+0

你好帕维尔,谢谢你的回答,这是正确的。我设法通过安装PHP版本5.3.3及以上版本来实现它。然而,当我在谷歌地球地标气球内传输相同的代码时,它不显示任何内容。是我必须做的其他事情吗? –

+0

在那个链接:http://diss.web44.net/retrieve_data.php我仍然可以看到字符串instaed数字。控制台中是否有错误? –

+0

我已经放弃了这个网址,说实话。我现在将它们托管在我的服务器中。我上面描述的最可能与GoogleEarth有关。通用电气以外的工作完美。图形内部只有当链接指向高层html文件时才会显示。并且它显示了GE内部的图形,如浏览器。 –