在Chart中显示mysql数据库中的数据

Question

I'm using AmCharts to create a pie chart.
I'm trying to assign data from my mysql database to the variable chartData that has the fields country and liters. How can I assign my mysql data to chartdata?

 <script>
    var chart;
    var legend;



    var chartData = [{
    "country": "Czech Republic",
    "litres": 156.9
    },
    {
    "country": "Ireland",
    "litres": 131.1
    },
    {
    "country": "Germany",
    "litres": 115.8
    },
    {
    "country": "Australia",
    "litres": 109.9
    },
    {
    "country": "Austria",
    "litres": 108.3
    },
    {
    "country": "UK",
    "litres": 65
    },
    {
    "country": "Belgium",
    "litres": 50
    }
    ];

     AmCharts.ready(function () {
     // PIE CHART
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    chart.titleField = "country";
    chart.valueField = "litres";



  // LEGEND
   legend = new AmCharts.AmLegend();
        legend.align = "center";
        legend.markerType = "circle";
        chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
        chart.addLegend(legend);

        // WRITE
        chart.write("chartdiv");
    });
// changes label position (labelRadius)
function setLabelPosition() {

if (document.getElementById("rb1").checked) {


 chart.labelRadius = 30;


 chart.labelText = "[[title]]: [[value]]";


     } else {


 chart.labelRadius = -30;

    chart.labelText = "[[percents]]%";
    }
    chart.validateNow();
}


 // makes chart 2D/3D


function set3D() {
   if (document.getElementById("rb3").checked) {
        chart.depth3D = 10;
        chart.angle = 10;
    } else {
        chart.depth3D = 0;
        chart.angle = 0;
    }
    chart.validateNow();
}

// changes switch of the legend (x or v)
  function setSwitch() {
    if (document.getElementById("rb5").checked) {
    legend.switchType = "x";
 } else {
   legend.switchType = "v";
    }
 legend.validateNow();

}



     </script>

Answer 1

You cannot directly access your mysql database from javascript. You will have to ask your server for some data. Typicaly, you will want to get JSON formated data (using ajax) :

Javascript (using .getJSON()):

$.getJSON('/get-my-data.php', function(json) {
    var chart;
    var legend;

    var chartData = json;

    AmCharts.ready(function () {
        chart = new AmCharts.AmPieChart();
        chart.dataProvider = chartData;

        // code ...
    });
});

get-my-data.php (using mysqli) :

$mysqli = new mysqli("localhost", "my_user", "my_password", "my_database");

$stats = array();

$query = "
    SELECT `country`, `litres`
    FROM `mytable`
";
$statement = $mysqli->prepare($query);

$result = $statement->get_result();
while ($data = $result->fetch_assoc())
{
    $stats[] = $data;
}

echo json_encode($stats);