jQuery / Flot

posted Mar 29, 2013, 7:40 AM by Nico Kruithof   [ updated Mar 29, 2013, 7:40 AM ]
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>

ċ
performance_plot.tgz
(93k)
Nico Kruithof,
Mar 29, 2013, 7:40 AM
v.1
Comments