Archive for the ‘ JQuery ’ Category

Flot Example: Format data in Flot readable JSON

I recently started learning the flot library.  Unfortunately, there aren’t any good examples of how to format the data with JSON in a flot friendly manner.  Below is some basic code that should retrieve data from a database, format it and then JSON encode it. I’ve written the example mostly in psuedo-code, most beginners should be able to pick up the key points of the following example.

 

The script below simply returns JSON, you should create this script in a web accessible directory:

getDataforFlot.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
$mergedData = array();
 
//Get the first set of data you want to graph from the database
$databaseData1 = someFunctionToGetDataFromDatabase($id);
 
//loop through the first set of data and pull out the values we want, then format
foreach($databaseData1 as $r)
{
    $x = $r['x_value'];
    $y = $r['y_value'];
    $data1[] = array ($x, $y);
}
 
//send our data values to $mergedData, add in your custom label and color
$mergedData[] =  array('label' => "Data 1" , 'data' => $data1, 'color' => '#6bcadb');
 
//Get the second set of data you want to graph from the database
$databaseData2 = someFunctionToGetDataFromDatabase($id);
 
 
foreach($databaseData2 as $r)
{
    $x = $r['x_value'];
    $y = $r['y_value'];
    $data2[] = array ($x, $y);
}
 
//send our data values to $mergedData, add in your custom label and color
$mergedData[] = array('label' => "Data 2" , 'data' => $data2, 'color' => '#6db000');
 
 
//now we can JSON encode our data
echo json_encode($mergedData);
?>

Next, just put the following JQuery into your page to render the data using AJAX:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function(){
 
    $.ajax({
                // usually, we'll just call the same URL, a script
                // connected to a database, but in this case we only
                // have static example files so we need to modify the
                // URL
                url: "/getDataforFlot.php",
                method: 'GET',
                dataType: 'json',
                success: onOutboundReceived
            });
 
    function onOutboundReceived(series) {
        var length = series.length;
        var finalData = series;
        var options = {
            lines: { show: true },
            points: { show: true, hoverable:true },
            grid: { hoverable: true, clickable: true }
        };
        $.plot($("#YOUR-DIV-ID-HERE), finalData, options);
    }
});
Unfortunately you don't have Adobe Flash-Player.... Klicken Sie hier fü kostenlosen Adobe Flash-Player.