javascript - Draw a graph from a dynamic table using jquery, js and cal(x) -

i design selftracking frontend participants enter numbers frontend. whilst these written database want them instantly visualized. calculations use calx jquery plugin (which allows excel computing). have form fields like:

<td><input name="name1" type="text" id="cc3" size="10" data-formula="($bb3/$aa3)*100"> 

data-formula presents box value. want visualize value (here in percent) bar (like progressbar described here http://jsfiddle.net/z6k3c/).

the problem is, have started working js , jquery , cannot figure out how can parse value data-formula following code snippet bar changes dynamically entered numbers (not on click, on change)

$(function() { var colors = []; $("#slider").slider({     max  : 200,     value: 10,     slide: function(event, ui) {         colors = (ui.value < 20) ? ['#f00','#000'] : ['#ff0','#000'];         colors = (ui.value > 50 && ui.value < 100) ? ['#080','#fff'] : colors;          colors = (ui.value > 100) ? ['#808','#fff'] : colors;         $(".ui-progressbar-value").css({'width' : ui.value + "%", 'backgroundcolor' : colors[0] });         $(".ui-progressbar-text").css('color', colors[1]).text(ui.value + "%");     } }); 

i hope understand problem , hope help.

kind regards, jon

you can use keyup() input value after every key pressed

see: http://jsfiddle.net/z6k3c/78/

i had add change function slider dynamicly change progressbar.