javascript - jquery、js、cal(x) を使用して動的テーブルからグラフを描画する

Question

参加者がフロントエンドに数字を入力するセルフトラッキング フロントエンドを設計しています。これらはデータベースに書き込まれますが、すぐに視覚化できるようにしたいと考えています。いくつかの計算を行うために、jquery プラグインである calx を使用します (これにより、Excel のようなコンピューティングが可能になります)。だから私は次のようなフォームフィールドを持っています:

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

data-formula はボックスに値を表示します。この値 (ここではパーセント) をバー (ここで説明されているプログレスバーのようにhttp://jsfiddle.net/Z6k3C/ )として視覚化したいと思います。

問題は、私はjsとjqueryを使い始めたばかりで、データ式の値を次のコードスニペットに解析する方法がわからないため、入力された数値でバーが動的に変化することです(クリック時ではなく、変更時) )

$(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 + "%");
    }
});

あなたが私の問題を理解してくれることを願っています。あなたの助けを願っています。

敬具、ジョン