Follow

jQuery + Flot - Plots, Canvas and Charts

Last 20 days visitors (example chart)


loading...
Loading and processing data, please wait...

Javascript source code

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>&#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));