How to put JSON data in html / javascript grid table

Question

I have the following JSON-formatted data:

    [
{
    "ID": "00:50:c2:63:10:1a",
    "start": "1349773838277760",
    "end": "1349773838277770",
    "startArea": "areaStart",
    "endArea": "areaEnd",
    "duration": "10"
},
{
    "ID": "00:50:c2:63:10:1a",
    "start": "1349773838277760",
    "end": "1349773838277780",
    "startArea": "areaStart",
    "endArea": "areaEnd",
    "duration": "20"
},
{
    "ID": "00:50:c2:63:10:1a",
    "start": "1349773838277760",
    "end": "1349773838277780",
    "startArea": "areaStart",
    "endArea": "areaEnd",
    "duration": "20"
}]

How can I display this data nicely in a html data table?

Is there a plugin for jQuery that can help me?

My basic approach is this:

http://jsfiddle.net/LKkSJ/

Answer 1

Have a look at:

http://www.1stwebdesigner.com/css/top-jquery-chart-libraries-interactive-charts/

http://codecanyon.net/item/graphup-jquery-plugin/108025?ref=1stwebdesigner

These are solutions that are very good for these kinds of tables

Answer 2

I would recommend dataTables, you can feed in a javascript array. Click here