jQuery + jFlot - Plots, Canvas and Charts

Last 20 days visitors (example chart)

Javascript source code

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

$(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.
Please, see Ajax, Json et compression Gzip article for print_z() and array2json() functions :

$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>&#160;&#160;(\d+)&#160;&#160;|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));
			

Please, feel free to contact me if you have any question or comment about this page | Syntax coloration powered by Chili