1

I would like to show a pie chart (using Highcharts library) inside a placemark's popup box (google earth desktop) from data taken from a mysql database residing on a live server.

The chart is intended to be dynamic and realtime.

From my research I found that I can do it using JSON formatted data taken from a php script in the server and sent to the HTML file pre-processed.

I put the html code (highcharts.html) inside the placemark popup and it refers to the retrieve_data.php file residing in the server .

The php file is fetching successfully the dummy data (if you access the address of the php script referenced inside the html code you can see them) so it seems that the JSON encoding is done.

The thing now is how to finally send them at the Google earth placemark (or the Google earth placemark to fetch them)....

Am I missing something in the communication with the server or I do something wrong??

note: this is my first contact with JSON data transfer!

Below are the files that i use.

Thank you all in advance for your help

<!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>

------------and the php file---------

<?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);
?>
4

1 回答 1

1

问题是这个 URL 是正确的（至少对我来说）：http ://diss.web44.net/retrieve_data.php

并且您的 JSON 将所有数字作为字符串，例如：["Direct Sales","20.00"]-> 20.00 是一个字符串，而应该是 nuber。更改它以获取数字并且可以正常工作。

于 2013-08-08T11:13:27.007 回答