Flot line graph and a large JSON data blob not formatted to Flot API specs

I'm using Flot to plot a line graph and my data set is a rather large JSON blob array that looks something like (truncated for brevity purposes):

    [{"load_data": 5047, "url": "http://this.com", "timestamp": "2010-12-03 17:06:45", "formatted_timestamp": 1291396005000, "load_time": 4359}, 
{"load_data": 8658, "url": "https://that.com", "timestamp": "2010-12-03 17:06:24", "formatted_timestamp": 1291395984000, "load_time": 7516}, 
{"load_data": 7372, "url": "https://theother.com, "timestamp": "2010-12-03 17:06:22", "formatted_timestamp": 1291395982000, "load_time": 7372}]

So Flot according to their example in the API doc likes their JSON formatted like:

  {
    label: "y = 3",
    data: [[0, 3], [10, 3]]
  }

Where they want the da开发者_如何转开发ta into tuples to plot against the x,y axis which is understandable.

My question is how would I parse through the forementioned JSON blob to get "formatted_timestamp" to represent the x axis and then "load_data" to represent the y? Meaning create a series similar to the FLOT json structure and the series of values into the graph?

This function would do the trick when given an array like you described:

function format(source) {
    var i, l,
        dest = [],
        row;

    for(i = 0, l = source.length; i < l; i++) { 
        row = source[i];
        dest.push([row.formatted_timestamp, row.load_data]);
    }
    return dest;
}

Not sure whether I got the question correctly, but this is how I create a flot x-y graph:

data:[[1, 0],[2, 0] .... ] -> 1 and 2 are the values of the x axis..

<script language="javascript" type="text/javascript">
$(function () {
var data = [{label:'my funky label',data:[[1, 0],[2, 0],[3, 0],[4, 0],[5, 18.125],[6, 20.625],[7, 15.4375],[8, 18.5625],[9, 22.375],[10, 13.5625],[11, 20.1875],[12, 5.5]]}];
var options = {
    legend: {
        show: true,
        margin: 10,
        backgroundOpacity: 0.5
    },
    points: {
        show: true,
        radius: 4
    },
    lines: {
        show: true
    },
   grid: { hoverable: true, clickable: true , color: "#999"} 
};

var plotarea = $("#plotarea");
plotarea.css("height", "450px");
plotarea.css("width", "600px");
$.plot( plotarea , data, options );
});
</script>