StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjquery drag and resize bar chart
text
Body
copied!<p>im stuck resolving an issue.</p> <p>i want to build a bar chart using raphaeljs or another, the main funccionality is that once drawn, the bars should be resizable by the mouse dragging and be able to get their current value once the drag stopped. i have tried the bellow code but its not working.</p> <pre><code> function drawchart() { var data = [1,2,3]; /* * Create an instance of raphael and specify: * the ID of the div where to insert the graph * the width * the height * Tip: Remember that the reference point (0, 0) is at the top left position. */ var r = Raphael("holder",600,300); // start, move, and up are the 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 will be called with dx and dy this.attr({x: this.ox + dx, y: this.oy + dy}); this.sizer.attr({x: this.sizer.ox + dx, y: this.sizer.oy + dy}); }, up = 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 will be called with dx and 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 a popup element on top of the bar this.flag = r.g.popup(this.bar.x, this.bar.y, (this.bar.value || "0") + "%").insertBefore(this); }, function() { // hide the popup element with an animation and remove the popup element at the end this.flag.animate({opacity: 0}, 300, function () {this.remove();}); }); /* * Define the default text attributes before writing the labels */ r.g.txtattr = {font:"12px Fontin-Sans, Arial, sans-serif", fill:"#000", "font-weight": "bold"}; // iterate over all the bar for (var i = 0; i < chart.bars[0].length; i++) { var bar = chart.bars[0][i]; // if the value of the bar is greater or equals to 15 we change the color to red if (bar.value >= 15) { bar.attr("fill", "#bf2f2f"); bar.attr("stroke", "#bf2f2f"); } } } </code></pre> <p>any kind of help will be appreciated.</p> <p>thanks in advance</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload