从外部json代码向amcharts图表添加数据

Question

I've got a chart that needs to be manipulated with data from the database. Therefore I have converted the data from the database to JSON string. the problem is that I don't know how to integrate the JSON data I received right into the chart.

These are the files needed to make this work:

The php & PDO query:

    <?php 
/*host = 'localhost' Namecheap default. Could also use 127.0.0.1 */ 

try { 
$connection= new PDO('mysql:host=localhost;dbname=clicrckc_andfit','clicrckc_osherdo','3563077'); 
$connection->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); 
$sql="SELECT answer_vegitable,answer_cigarettes,answer_workout FROM answers where user_id=58";  
$row=$connection->prepare($sql); 
$row->execute(); 
$result=$row->fetchAll(PDO::FETCH_ASSOC); 
$main = array('data'=>$result,'value'=>array("bgcolor"=>"#f1fff1","message"=>"All records displayed")); 
echo json_encode($main); 
$connection = null; 
    } 

    catch (PDOException $e) { 
    print "Error!: " . $e->getMessage() . "<br/>"; 
    die(); 
} 

?>

The HTML & JS needed for chart creation and manipluation:

 <title>Statistics Chart</title> <script src="../amcharts_3.13.1.free/amcharts/amcharts.js" type="text/javascript"></script> <script src="../amcharts_3.13.1.free/amcharts/serial.js" type="text/javascript"></script> <script type="text/javascript"> AmCharts.loadJSON = function("barClustered.php") { // create the request if (window.XMLHttpRequest) { // XMLHttpRequest object is the keystone of AJAX, and it is used to exchange small //amounts of data with the server. // IE7+, Firefox, Chrome, Opera, Safari (modern browsers). var request = new XMLHttpRequest(); } else { // code for IE6, IE5 var request = new ActiveXObject('Microsoft.XMLHTTP'); } // load it // the last "false" parameter ensures that our code will wait before the // data is loaded request.open('GET',"barClustered.php", false); //Type of request,The acutal URL, asynchronously or not? request.send(); // Send request to the server. // Adding code after the send method in case of synchronous request (like the one above). // parse and return the output return eval(request.responseText); // responseText is getting the response data as a string. }; </script> <!-- The chart code --> <script> var chart; var chartData = [ { "questions": "Vegtables Eaten", "This Week": 30.1, "Last Week": 23.9, "2 Weeks Ago": 27.5 }, { "questions": "Workout (Minutes)", "This Week": 29.5, "Last Week": 25.1, "2 Weeks Ago": 26.4 }, { "questions": "Cigarettes smoked", "This Week": 24.6, "Last Week": 25, "2 Weeks Ago": 28 } ]; AmCharts.ready(function () { // SERIAL CHART chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; chart.categoryField = "questions"; chart.startDuration = 1; chart.plotAreaBorderColor = "#DADADA"; chart.plotAreaBorderAlpha = 1; // this single line makes the chart a bar chart chart.rotate = true; // AXES // Category var categoryAxis = chart.categoryAxis; categoryAxis.gridPosition = "start"; categoryAxis.gridAlpha = 0.1; categoryAxis.axisAlpha = 0; // Value var valueAxis = new AmCharts.ValueAxis(); valueAxis.axisAlpha = 0; valueAxis.gridAlpha = 0.1; valueAxis.position = "top"; chart.addValueAxis(valueAxis); // GRAPHS // first graph var graph1 = new AmCharts.AmGraph(); graph1.type = "column"; graph1.title = "This Week"; graph1.valueField = "This Week"; graph1.balloonText = "This Week:[[value]]"; graph1.lineAlpha = 0; graph1.fillColors = "#ADD981"; graph1.fillAlphas = 1; chart.addGraph(graph1); // second graph var graph2 = new AmCharts.AmGraph(); graph2.type = "column"; graph2.title = "Last Week"; graph2.valueField = "Last Week"; graph2.balloonText = "Last Week:[[value]]"; graph2.lineAlpha = 0; graph2.fillColors = "#81acd9"; graph2.fillAlphas = 1; chart.addGraph(graph2); // Third graph var graph3 = new AmCharts.AmGraph(); graph3.type = "column"; graph3.title = "2 Weeks Ago"; graph3.valueField = "2 Weeks Ago"; graph3.balloonText = "2 Weeks Ago:[[value]]"; graph3.lineAlpha = 0; graph3.fillColors = "#9972C1"; graph3.fillAlphas = 1; chart.addGraph(graph3); // LEGEND var legend = new AmCharts.AmLegend(); chart.addLegend(legend); chart.creditsPosition = "top-right"; // WRITE chart.write("chartdiv"); }); </script> 

 <script src="http://www.click-and-fit.me/amcharts_3.13.1.free/amcharts/serial.js"></script> <script src="http://click-and-fit.me/amcharts_3.13.1.free/amcharts/amcharts.js"></script> <body> <div id="chartdiv" style="width:500px; height:600px;"></div> </body> 

These are the 2 files above in action:

http://click-and-fit.me/barClustered.php

Statistics Chart

Here's a screenshot of the 3 rows from the database I would like to show in the chart:

http://www.codingforums.com/redirect-to/?redirect=http%3A%2F%2Fimgbox.com%2FHfD1PuTQ

Currently the chart is filled with manually inputted data in a JSON format. How do I get the JSON string from the php file to be manipluated within the cart data? tried to look all over amcharts documentation and could not still understand how to do it.

Thanks in advance!

Answer 1

Try the following:

Change

AmCharts.loadJSON = function("barClustered.php") {
    if (window.XMLHttpRequest) {
        var request = new XMLHttpRequest();
    } else {
        var request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    request.open('GET', "barClustered.php", false);
    request.send();
    return eval(request.responseText);
};

to

AmCharts.loadJSON = function(url) {
    if (window.XMLHttpRequest) {
        var request = new XMLHttpRequest();
    } else {
        var request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    request.open('GET', url, false);
    request.send();
    return eval(request.responseText);
};

Change

chart.dataProvider = chartData;

to

chart.dataProvider = AmCharts.loadJSON('http://click-and-fit.me/barClustered.php');