Loading PHP inside JS array using setInterval and jQuery load

Question

The code below displays a pie chart using flot charts. It works perfectly but I need to place the data generated (abcdata) dynamically using PHP and then use a setInterval to refresh the data every 5 seconds. The data is not showing in index.php and the pie chart disappears. I believe it has got something to do with the var abdata variable being loaded via jQuery but I'm not sure how to solve it.

My intention is to load the data (abdata) via PHP and refresh the data every few seconds.

// Code in index.php 

setInterval(function() {

    $(".test").load("test.php");

}, 1000); 


// Code in the test.php file: 

var abdata = [
  { label: "B",  data: 90}, // The data values are queried using PHP and SQL
  { label: "C",  data: 112},
  { label: "A",  data: 112}
];

if($("#chart").length)
{
    $.plot($("#chart"), abdata,
    {
            series: {
                    pie: {
                            innerRadius: 0.5,
                            show: true
                    }
            },
            legend: {
                show: false
            },
            colors: ["#f29020","#434343", "#3fbed3"]
    });
}

I would be grateful if anyone could help out! Thanks in advance!

Karan Punamiya · Accepted Answer · 2013-10-13 05:43:55Z

1

Instead of loading data using load(), you can use ajax() to return the abdata value as json and then use that value.

// Code in index.php 

setInterval(function() {
    $.ajax({
        type:"GET",
        url:"test.php",
        success:function(response) {
            var abdata = $.parseJSON(response);
            if($("#chart").length)
            {
                $.plot($("#chart"), abdata,
                {
                        series: {
                            pie: {
                                innerRadius: 0.5,
                                show: true
                            }
                        },
                        legend: {
                            show: false
                        },
                        colors: ["#f29020","#434343", "#3fbed3"]
                });
            }          
        }
    });
}, 1000); 


// Code in the test.php file: 

$abdata = array(
  array( 'label'=> "B",  'data'=> 90), // The data values are queried using PHP and SQL
  array( 'label'=> "C",  'data'=> 112),
  array( 'label'=> "A",  'data'=> 112)
);
echo json_encode($abdata);

answered Oct 13, 2013 at 5:43

Karan Punamiya

8,9331 gold badge28 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raja Over a year ago

Wow thank you very much @karan! It worked! May I ask how would you manage multiple pie charts in one page? Would I have to do a separate ajax call for each chart? Thanks!

Karan Punamiya Over a year ago

You can add the data per chart as elements in the php array, as in 0=>firstchart,1=>secondchart, then use each of the element by looping over the JSON received.

Collectives™ on Stack Overflow

Loading PHP inside JS array using setInterval and jQuery load

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related