Here is the Javascript using jQuery that fetch and format the data to be processed by Flot.

$(document).ready(function() { 

    $.getJSON('w3s_getdata.php', function(json) { 

        var plot_data = new Array();
        var plot_ticks = new Array(); 

        for (var i in json) {
            i = parseInt(i);
            plot_data.push([i, json[i].visitors]);
            plot_ticks.push([i+0.5, json[i].dates]);
        } 

        $.plot($("#placeholder"),
             [
                {"data": [[0, 0]]},
                {"data": [[0, 0]]},
                {"data": [[0, 0]]},
                {"data": [[0, 0]]},
                {"data": [[0, 0]]},
                 {
                     label: "Last 20 days visits",
                     bars: {"show": "true"},
                     data: plot_data
                 }
             ],
            {
                 xaxis: {
                   ticks: plot_ticks
                }
             }
         );
    });
});

Sample JSON data

[
    {"dates":"24 feb","visitors":"5"},
    {"dates":"25 feb","visitors":"21"},
    {"dates":"26 feb","visitors":"14"},
    {"dates":"27 feb","visitors":"45"},
    {"dates":"28 feb","visitors":"20"},
    {"dates":"29 feb","visitors":"18"},
    {"dates":"01 mar","visitors":"9"},
    {"dates":"02 mar","visitors":"7"},
    {"dates":"03 mar","visitors":"42"},
    {"dates":"04 mar","visitors":"17"},
    {"dates":"05 mar","visitors":"15"},
    {"dates":"06 mar","visitors":"9"},
    {"dates":"07 mar","visitors":"15"},
    {"dates":"08 mar","visitors":"3"},
    {"dates":"09 mar","visitors":"3"},
    {"dates":"10 mar","visitors":"19"},
    {"dates":"11 mar","visitors":"15"},
    {"dates":"12 mar","visitors":"11"}
]

PHP source code

Here is the little script I use to grab informations from my old fashioned eXTReMe tracking stats.

$a = strtolower(file_get_contents("http://extremetracking.com/open;unique?login=ncrovatt")); 

$pattern = '|.*  (\d+\s[a-z]{3},\s[a-z]{3})  .*|im';
preg_match_all($pattern, $a, $matches); 

$pattern = '|.*  (\d+\s[a-z]{3}),\s[a-z]{3}  .*
        <font face=arial size=2><b>  (\d+)  |im'; 

foreach($matches[0] as $k => $v) {
    preg_match_all($pattern, $v, $res);
    $data[] = array('dates' => $res[1][0], 'visitors'=> $res[2][0]);
} 

print_z(array2json($data));
</b></font>

Demo: http://blog.shinylittlething.com/workshop/flot_intro/
Source: http://blog.shinylittlething.com/workshop/flot_intro/

Related Listings:

1. jQuery + Flot = Plots, Canvas, Charts Flot is a pure Javascript plotting library for jQuery. It...
2. Accessible Charts with Canvas and jQuery Script Data visualization in HTML has long been tricky to achieve....
3. Flot – Plotting for jQuery Flot is a pure Javascript plotting library for jQuery. It...
4. Simple Accessible Charts Easy, fast, accessible way to display simple Data and beautify...
5. XML SWF Charts XML/SWF Charts is a simple, yet powerful tool to create...

Do you like this post?

Email: