Comments on: Graph data from an HTML table using jQuery and flot

By: Plugins jQuery para manejo de tablas HTML | Diseño web, accesibilidad, usabilidad, posicionamiento y optimización web - AlmacenPlantillasWeb Blog

Fri, 25 Dec 2009 11:15:20 +0000

[...] Gráficos de datos desde tablas HTML usando jQuery y flot [...]

By: Geech

Geech — Mon, 21 Dec 2009 17:22:08 +0000

For everyone that is having IE issues.

Make sure you have added the include that is in the flot read me file.)

Hopefully that should solve your IE problems.

By: 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables | Afif Fattouh - Web Specialist

Sun, 20 Dec 2009 10:52:54 +0000

[...] Graph data from an HTML table using jQuery and flot [...]

By: 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables | tripwire magazine

Sat, 19 Dec 2009 13:24:35 +0000

[...] Graph data from an HTML table using jQuery and flot [...]

By: Phil

Phil — Fri, 06 Nov 2009 09:37:18 +0000

Hi, Rebecca.
Great plug in BTW.
In reply to Eva and Reiwoldt, I had the same problem with dates but have had success with the following.

$(’#myTable’).graphTable({series: ‘columns’, width:’50%’, position:’replace’,xaxisTransform:function(s){return(Date.parse(s));}},{xaxis:{mode:’time’}}); $(this).remove();

The xaxisTransform function gives the data to graphTable as epoch format (i.e milliseconds from 01/01/1970), from dates supplied from a database in the form of yyyy/mm/dd hh:mm:ss.
xaxis mode is a flot argument and needs to be separated from the graphTable args.

Eva if you haven’t solved this try

$(’#table1′).graphTable({series: ‘columns’}, {xaxis: { mode: “time” } });

as I think your syntax is giving the xaxis mode as a graphTable argument.

Hope this helps, I’m little more than a hobbyist but have struggled with the same issues and now got mine working so I’m passing it on.

By: Eva

Eva — Thu, 01 Oct 2009 00:19:37 +0000

Hi, I got the same question as Reiwoldt ..
I got date data transform into epoch format but there are not parsed as date values , should I used xaxisTrasform or dataTransform .
I tried :
$(’#table1′).graphTable({series: ‘columns’, xaxis: { mode: “time” } });
but it didn’t work .

Thanks eva

By: Reiwoldt

Reiwoldt — Fri, 04 Sep 2009 13:57:56 +0000

Hi, I am creating a table from a recordset so as to obtain dynamic data from a database, then using graphtable to graph the results. This works fine apart from the fact the xaxis that is made up of datetime values are not being parsed as date values. I have them written into the table using Javascript time formatting e.g. 1250944202000 but this is not then converted to a readable date.

Do I need to use a transformation arg? If so what would this look like?

Thanks

By: Sammy

Sammy — Sat, 22 Aug 2009 15:42:19 +0000

The Demo on Flot fails when using IE 8. The debugger shows line 152 as being the problem.

canvas = window.G_vmlCanvasManager.initElement(canvas);

An application that I developed works fine in IE 7 as well as IE 6.

Hopefully the author will look into this.

By: Duncan

Duncan — Wed, 29 Jul 2009 08:00:45 +0000

After 2 days i finally figured it out!!!!

change:
171 colData[colData.length] = [x,y];
to
171 colData[colData.length] = [test_x,test_y];

By: Duncan

Duncan — Wed, 29 Jul 2009 06:39:14 +0000

Hi,

I seem to be having the issue that Noel, Charles and Peter had with the Bar Graph not showing up. I have made some changes in the code and even explicitly put:

174 tableData[tableData.length] = {label: label, data: colData};
175> $.extend(true,tableData[tableData.length-1],seriesArgs_);

which applies the seriesArgs_ to all series, then i used the following to call the function:

flotoptions={xaxis:{mode:’time’}};
flotseriesoptions={points:{show:true}, bars:{show: true, barWidth:24*60*60*1000}};

$(”table”).graphTable({},flotoptions, flotseriesoptions);

This does not seem to solve the problem, has anyone see what’s wrong?