javascript - jquery drag and resize bar chart -

javascript - jquery drag and resize bar chart -

im stuck resolving issue.

i want build bar chart using raphaeljs or another, main funccionality 1 time drawn, bars should resizable mouse dragging , able current value 1 time drag stopped. have tried bellow code not working.

function drawchart() { var info = [1,2,3]; /* * create instance of raphael , specify: * id of div insert graph * width * height * tip: remember reference point (0, 0) @ top left position. */ var r = raphael("holder",600,300); // start, move, , drag functions start = function () { // storing original coordinates this.ox = this.attr("x"); this.oy = this.attr("y"); this.attr({opacity: 1}); this.sizer.ox = this.sizer.attr("x"); this.sizer.oy = this.sizer.attr("y"); this.sizer.attr({opacity: 1}); }, move = function (dx, dy) { // move called dx , dy this.attr({x: this.ox + dx, y: this.oy + dy}); this.sizer.attr({x: this.sizer.ox + dx, y: this.sizer.oy + dy}); }, = function () { // restoring state this.attr({opacity: .5}); this.sizer.attr({opacity: .5}); }, rstart = function () { // storing original coordinates this.ox = this.attr("x"); this.oy = this.attr("y"); this.box.ow = this.box.attr("width"); this.box.oh = this.box.attr("height"); }, rmove = function (dx, dy) { // move called dx , dy this.attr({x: this.ox + dx, y: this.oy + dy}); this.box.attr({width: this.box.ow + dx, height: this.box.oh + dy}); }; var chart = r.g.barchart(5, 5, 200, 280, data, {stacked: false, type: "square"}).label(['a','b','c']); chart.drag(move, start, up); chart.hover(function() { // create popup element on top of bar this.flag = r.g.popup(this.bar.x, this.bar.y, (this.bar.value || "0") + "%").insertbefore(this); }, function() { // hide popup element animation , remove popup element @ end this.flag.animate({opacity: 0}, 300, function () {this.remove();}); }); /* * define default text attributes before writing labels */ r.g.txtattr = {font:"12px fontin-sans, arial, sans-serif", fill:"#000", "font-weight": "bold"}; // iterate on bar (var = 0; < chart.bars[0].length; i++) { var bar = chart.bars[0][i]; // if value of bar greater or equals 15 alter color reddish if (bar.value >= 15) { bar.attr("fill", "#bf2f2f"); bar.attr("stroke", "#bf2f2f"); } } }

any kind of help appreciated.

thanks in advance

javascript jquery jquery-ui jquery-plugins raphael