26 comments found.
Hello, there are few questions i would want to ask regarding this plugin.
1. Is it Live on the page (which means once i change it in the backend, the changes reflect instantly (e.g. hooking it with a real time database such as couchdb or firebase)
2. Can it be used with wordpress? thanks.
Very Cool! How would you integrate this with wordpress?
Well, if you include the GraphUp script in your theme you can just use it as in any other site. GraphUp can then be applied to tables inside your WP posts. I don’t see a big problem there.
Great plugin! I have a dynamic range to adjust the duration of my table. However, when the max value changes down then up (ie: max: 1000 to 500 to 1000 again), and I call the initializer, it does not graph correctly going back up… Is there a way to clear values in the chart?
Thanks for your feedback. There’s no built-in way to reset everything but this could be achieved by declaring a custom painter. However, that’s may not even by necessary. I just ran a simple test from the browser js-console (see below) where I changed the value of a cell in my first demo and then reapplied graphup to the table and the colors where nicely updated.
$('#table1 td').first().text('9999'); // Increase the max value
$('#table1 td').graphup({}); // Reapply GraphUp
Whoops, double post… Thanks for the quick reply!!
The issue happens when I dynamically change the decrease and then increase. Check out the pictures below:
https://www.dropbox.com/s/b9ur5n2oo59m4h1/Start.png?dl=0 https://www.dropbox.com/s/1zba1hpljusj5i2/middle.png?dl=0 https://www.dropbox.com/s/3slj7ky0gio883c/end.png?dl=0
It actually looks like it’s drawing a new graph over top of the old graphs…
The “bars” painter adds a few div elements to the cell in order to style it correctly: it takes care of the cell padding and the absolute positioning of the bar graph. You can see the relevant code in jquery.graphup.js around line 234.
I assume the problem is that when repainting the cells, another set of div elements is wrapped around the previous ones, etc. In order to prevent this you first have to reset the cell to its original content. No built-in function is available for that. However, if you add a custom “callBeforePaint” function (see the options), you can undo the previous paint by removing the added divs.
Awesome! Thanks for the tip!
Hello a few questions,
1. Can data from Csv files be copied into table? 2. Are you able to put links in one of the colums?
Thanks in advance
1. However you create the HTML table with its contents is up to you. You could use PHP to generate a table based on csv data. This is not something GraphUp does, but it sure can work with the resulting table.
2. Yes. You need to select the table cells you want to use for GraphUp, so you can ignore certain cells with other data.
Is there some way to force single values from getting painted with the lowest color value. For example when I have only one color value like 16 and no other cleaned values in the table it is not painted. How do I force it to get the color corresponding to the lowest end of the color map.
That would require a custom painter.
I have a setup where I call graphup more than once for some table rows and it doesn’t seem to be supported. After the first call, the color background gets taller than the cell itself and overlaps with the following rows.
I’m using bar displays.
Right, only a single Graphup “painter” is to be applied to a table cell. You can create your own painters, though.
Any chance of an update for Datatables using jQuery UI. The bg colours work but the cells don’t seem to be using the correct font colour and styles. {Demo 1}
Never worked with datatables in jQuery UI. I may have a look. Thanks.
No sure why this is happening but the table cell data left aligns when I switch a table from “fill” to “bubbles” or “bars”. Looks like hell. When I toggle back to “fill” everything is OK again. Even if I “hardcode” a style for each cell such as “text-align:center”, bars and bubbles override it while fill does not. (All cells are the same size) Same issue in both Chrome and IE 10.
Toggling through the color works fine though.
I replied to your mail. Web inspector tools, like Firebug, should help a lot to identify the exact CSS problem.
I added this to the $cell.html…
‘ ’ + $cell.html() + ‘ ‘
Since I could not get the callBeforePaint to override the left-justified, gray/white lettering. Adding the inline style to the code in the js file worked, so I’m happy.
‘ ’ + $cell.html() + ‘ ‘
div style=”position:relative; text-align:center; color:#000000; z-index:2;”>’ + $cell.html() +
Can I suggest a small change to the core code at line 57?
// Load the cleaner and loader function var cleaner = $.isFunction(o.cleaner) ? o.cleaner : $.fn.graphup.cleaners[o.cleaner]; var painter = $.isFunction(o.painter) ? o.painter : $.fn.graphup.painters[o.painter];
Then custom anonymous functions can be used as cleaners and painters without having to assign them to the graphup object. Useful if it’s a throwaway, one-time use type cleaner.
Great plugin though, thanks 
Thanks for the tip. This change could go into a next version.
Hi! Great script man
1. I’m displaying four bubblegraphs on the same page, in the last three the numbers inside the bubbles get pushed down about 10px. How do we fix that?
2. For some wierd reason I’m getting it to work in Chrome but not in Firefox (but your demo code works fine in FF). Any ideas on how to find the problem?
Hard to pinpoint the problem for both problems. The most practical way for debugging is using the web inspector (or another tool like Firebug) to tweak the CSS for specific elements on the page.
Hi Geert,
Yes, I’m using Firebug. What I finally found was a bug actually, but it’s not browser related – I was using different datasets to test with.
It’s if you run $(’<item>’).graphup(); on a table that only contains zeros, then you get “f is not defined” error and all jQuery in the web app breaks down. Not good.
I’m now checking for this in my PHP before $(’<item>’).graphup(); is run, but I suggest you add it to the backlog – either a bugfix or a mention of this in the documentation.
Except for that, thank you for a superb plugin.
Okay, good catch.
Hello, I am using some other charts now, and need help/sample code to integrate with ASP MVC.
I need samples 1- To connect/populate/serve/send data to your charts from MVC app, both static and realtime updates. 2- Detect user changes/zoom/settings, and post data/settings back to server.
thanks
I just wanted to point out that this GraphUp jQuery plugin works completely on the client side, purely JavaScript. The data itself could come from a server, sure, but that’s outside the scope of this script. This script excepts there to be an HTML table of data, then it works with that. Hope you understand. Thanks.
I am requesting you show a sample on which function call in your library and how I can populate that data.
You can view some demos here: http://www.geertdedeckere.be/shop/graphup/
is it possible to pull in information from a csv and insert a graph with this information into an individual post?
Graphup works based on HTML tables that contain numeric data. However you create those tables doesn’t matter. You could generate a table from a CSV file that you loop over in PHP , for example. That part is not something the script takes care of though. Hope I made things clear enough for you. Thanks for asking.
is it possible to pull in information from a csv and insert a graph with this information into an individual post?
I’ve purchased youra license but I can not make it work. I waznt to use it in asp.net website. Have you suggestion or example?
Whatever serverside technology you are using (asp, php, etc.) doesn’t matter. The script is based on jQuery. The best examples are my online demos. Hope this helps.
hehehehehee….i swear you gat me busted…now i wanna know how extendable it your script? can more bar option be added like bar charts, lines, pie charts etc?
The script provides clean ways to extend it. For example, you can declare your own color maps, cleaners and painters. It is just a matter of declaring a new property on the applicable object.
$.fn.graphup.painters.my_new_painter = function($cell, o) { }
The cleaner functions take the value of a table cell and convert is to a real javascript number on which calculations can be done. For example, ”$5.00” gets converted to the number 5 by the “strip” cleaner which simply strips out all non numeric characters.
The painters take the cleaned value and apply some CSS magic to it to create charts, bar or bubbles.
Note that I provided ample comments in the source code so you can really look at the existing code for good examples.
Hi?
i have a presale question.
Sorry, you have to buy the script first before I answer your presale question.
Just kidding, lol. Feel free to ask.
Hello, is it possible to animate the graph using jquery?
Regards,
Greg
Hi Greg, animating the graphs is not a built-in option. The graphs (bars, circles, whatever) are given an explicit width/height immediately when the plugin does its magic. If you don’t mind to dig into the plugin’s code and know some jQuery, it is a matter of calling jQuery’s animate() method when the graphs are built.
hi there. great script!!! i wonder if it is possible to connect to a mysql database…catch the data from the tables and use the script for presentation? it woul be great if you could give me any advice on that one. best wishes!
Hi, thanks. Well, GraphUp just needs an HTML table filled with data. If your data is stored in a database, you need to find a way (with PHP for example) to generate a table from that data. From that point GraphUp takes over.
hi,
doesn’t work on tables echoed in php… 
Why not? How you generate your HTML tables on the serverside should not be of influence to the script on the clientside. Feel free to clarify your problem if needed. Thanks.
Hello, Before I buy, I’d like to know how the plugin deals with negative numbers. Ideally, I’d like negative bars to go the opposite way to positive bars. Is this possible?
Thanks, Andrew
Sorry, this is not a built-in feature. You may be able to create your own painters to accomplish it but you’ll need some javascript/CSS skills.
This item was featured on CodeCanyon
Elite Author
Contact the Envato Market Help Team