Solved

problem with a json results

Posted on 2014-11-09
2
527 Views
Last Modified: 2014-11-09
hi
i am making an ajax call to get a data to present in in a morris chart. i return a json_encode. but it returns with a double quote, and i am not sure why it isn't working.

this is my ajax call:
        $.ajax({
            type: 'POST',
            url: 'functions/charts.php',
            data: {
                "action":"bardaily"
            },
            datatype: 'json',
            success: function (data) {
            
                console.log(data);

                
                    var donut = new Morris.Donut({
                    element: 'sales-chart',
                    resize: true,
                    colors: ["#3c8dbc", "#f56954", "#3ea847"],
                    data: data,
                    hideHover: 'auto'
                });
   

            },
            beforeSend: function () {
                $('form#myform p#statusp ').prepend("<p class='loadit' ></p>");
            },
            complete: function () {
                $("p.loadit").fadeOut();
            }
        });

Open in new window


and in my php i have for now this:
        $values = array(
            array( 'label' => "air" , 'value' => 12) ,
            array( 'label' => "light" , 'value' => 40),
            array( 'label' => "rest" , 'value' => 20 )
            );
        echo json_encode($values);

Open in new window


i don't get any error messages but the chart isn't there. when i compare the data i get from the php and the the expected data, the difference is with the double quote.

what am i missing here?
0
Comment
Question by:derrida
2 Comments
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 40430994
Try this demo to see if it helps you any.
PHP-JSON-display.php
<?php 
$values = array(
	array( 'label' => "air" , 'value' => 12) ,
	array( 'label' => "light" , 'value' => 40),
	array( 'label' => "rest" , 'value' => 20 )
	);
$data = json_encode($values);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>PHP JSON display</title>
</head>
<body>
<h1>PHP JSON display</h1>
<pre>
<?php echo $data."<br><br>"; ?>

<p id="demo"></p>
<script type="text/javascript">
var text = '<?php echo $data; ?>'

var obj = JSON.parse(text);

for(var ii=0;ii<3;ii++) {
document.getElementById("demo").innerHTML +=
obj[ii].label + " : " +
obj[ii].value + "<br>"
}
</script>

</pre>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:derrida
ID: 40431007
hi
first thanks

i took the variables how you extracted them to use it in the data section but now i get that : SyntaxError:
missing variable name
      for(var ii=0;ii < theData.length;ii++) {
in firebug.

theData is the obj.

this is the code i tried:
                    var donut = new Morris.Donut({
                    element: 'sales-chart',
                    resize: true,
                    colors: ["#3c8dbc", "#f56954", "#3ea847"],
                    data: [
                         for( var ii=0;ii < theData.length;ii++) {
                         {label: theData[ii].label , value: theData[ii].value},
                        }
                    ],
                    hideHover: 'auto'
                });

Open in new window


the expected data section should look like this:
    var donut = new Morris.Donut({
        element: 'sales-chart',
        resize: true,
        colors: ["#3c8dbc", "#f56954", "#3ea847"],
        data: [
            {label: "this is label one", value: 12},
            {label: "this is label two", value: 30},
            {label: "this is label three", value: 20}
        ],
        hideHover: 'auto'
    });

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now