This example shows how to load a cvs file into the browser and then plot the data. Javascript allows easy manipulation of the data and the plots. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>P2T2 performance</title> <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.csv-0.71.js"></script> </head> <body> <div id="placeholder" style="width:600px;height:300px;"></div> <script type="text/javascript"> var plot_data = []; function createPlot(csv_data) { var data = $.csv.toArrays(csv_data, {separator:";"}); var processed_data = {}; data.map(function (elem) { if (!(elem[0] in processed_data)) processed_data[elem[0]] = [] return processed_data[elem[0]].push([ elem[1], elem[2] ]); }); var processed_data2 = {}; for (var key in processed_data) { var data0 = processed_data["Euclidean Delaunay"]; var data1 = processed_data[key]; var data = [] for (var i=0; i<.25*data1.length; ++i) { data.push([data0[i][0], data1[i][1]/data0[i][1]]); } processed_data2[key] = data; } for (var key in processed_data) { plot_data.push({ label : key, data : processed_data[key], lines : { lineWidth: 1 }, shadowSize: 0 }); } $.plot($("#placeholder"), plot_data, { legend: { position: "nw" } } ); } $.get('performance.txt', createPlot); </script> </body> </html> |
Things to remember >