Displaying values from a database (using mySQL) on a Flot graph

Question

I'm trying to read in values from a db using php (mySQL) then have them show on a graph in flot. I know the values are read in correctly and I'm not getting any errors but the graph won't show. Little help?

Thanks in advance.

<?php
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
    $graphdata[] =  array( (int)$row[0], (int)$row[1] );
}
?>
/////

<div id="placeholder" style="width:600px;height:300px"></div>

<script language="javascript" type="text/javascript">

var dataset1 = <?php echo json_encode($graphdata);?>;
var data = [
            {
                label: "Random Values",
                data: dataset1
            }
        ];
var plotarea = $("#placeholder");

        $.plot( plotarea , data);
</script>

bpeterson76 · Accepted Answer · 2011-07-21 14:51:47Z

1

The contents of your pastebin show that the JSON string you're outputting is invalid JSON.

var data = [{ label: "Random Values",data: dataset1}];

will validate if it's changed to:

var data = [{"label": "Random Values","data": "dataset1"}]

That's just an example, but I suspect that Flot is looking for a slightly different format, so you'll have to verify exactly what they're looking for against their documentation. I'm going through the same exercise right now with FusionCharts, so I'm feeling your pain. jsonlint.com is your friend on this one, output your JSON and verify it frequently. I'd also recommend that to initially get it working, start with just a string of JSON (even one that you copy from their examples) that you put right in your code. Get the chart working first, then work on getting your PHP to duplicate the example JSON string separately.

answered Jul 21, 2011 at 14:51

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

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

2 Comments

Jen Over a year ago

I got the chart working with a set js array (using my original code) then tried to fill the array from the database then it broke, so i know the chart drawing is right. The only place I can think the problem is is in the conversion but it looks ok to me

bpeterson76 Over a year ago

Why don't you output your json string from PHP along with the code to build the string (append to your answer) and we can de-bug it from there.

Arend · Accepted Answer · 2011-07-21 12:53:41Z

0

Try delaying creating the graph until the DOM is loaded:

jQuery(document).ready(function ($){
    var plotarea = $("#placeholder");
    $.plot( plotarea , data);
});

answered Jul 21, 2011 at 12:53

Arend

3,7722 gold badges29 silver badges38 bronze badges

2 Comments

Arend Over a year ago

Can you post a sample of it to jsfiddle? (Just copy the output of your php, including the serialized mysql data). I'll have a look

Jen Over a year ago

I was taking data from a local db so instead of doing that i ran it locally and here is the output pastebin.com/HeeuTi4Z does this help? If not I can try figuring out jsfiddle

Collectives™ on Stack Overflow

Displaying values from a database (using mySQL) on a Flot graph

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related