Skip to main content

Posts

Showing posts with the label raphael

How can I combine objects in the Raphael javascript library?

Sorry for a long question but here goes. I am trying to modify the drag shapes around demo here: http://raphaeljs.com/graffle.html The demo works fine. What I want to do is put words inside the shapes and move the shape and text around as a composite single object. Here is the code for creating the objects: window.onload = function () { var dragger = function () { this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx"); this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy"); this.animate({"fill-opacity": .2}, 500); }, move = function (dx, dy) { var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy}; this.attr(att); for (var i = connections.length; i--;) { r.connection(connections[i]); } r.safari(); },

How can I combine objects in the Raphael javascript library?

Sorry for a long question but here goes. I am trying to modify the drag shapes around demo here: http://raphaeljs.com/graffle.html The demo works fine. What I want to do is put words inside the shapes and move the shape and text around as a composite single object. Here is the code for creating the objects: window.onload = function () { var dragger = function () { this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx"); this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy"); this.animate({"fill-opacity": .2}, 500); }, move = function (dx, dy) { var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy}; this.attr(att); for (var i = connections.length; i--;) { r.connection(connections[i]); } r.safari(); },

gRaphael Library: Can't Create Line Chart

I'm using the gRaphael JavaScript library, and am attempting to draw a simple line graph. The code I currently have on the page is: <script language="javascript" type="text/javascript"> var paper = Raphael(10, 50, 640, 480); paper.g.linechart(10,10,300,220,[1,2,3,4,5],[10,20,15,35,30]); </script> I found this code from a tutorial, located here: https://github.com/kennyshen/g.raphael/blob/master/examples/linechart/linechart_basic.html All the required files, raphael.js , g.raphael.js , and g.line.js , are included earlier on the page as well. When I view the page, it just shows up as a white screen. Would appreciate any help, thank you.