Solved

problem with a json results

Posted on 2014-11-09
2
551 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 83

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

911 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

23 Experts available now in Live!

Get 1:1 Help Now