Hi there,
I'm pretty new to Dojo/x and SVG, am wanting to create custom marker sizes for my chart dynamically, can create shapes/circles of the size I want but in order to create markers I need the SVG path segment string (I tried finding information how to calculate by hand but yikes!). I've scoured the internet for information but have come up empty.
Basically I'd like to do this (Unless there is an easier way that I am missing :)
var circle = surface.createCircle({ cx: 25, cy: 25, r: r})
.setFill([0,0,255,0.1])
.setStroke({ color: 'blue', width: 2})
;
or
var newPath= surface.createPath("").arcTo(25, 25, r, 0, 2*3.14, 1);
var n= newPath.rawNode;
var p= n.getPathSegAtLength(0); // not implemented OR SOMETHING LIKE THIS
then I'd use the path segment as the marker format in addSeries ...
Thanks for your help ...

The main issue is placement.
...the way the Markers system works in the charting Themes is this:
1. assume that your path will be moved to the exact point it will be centered on.
2. from there, do relative operations (as opposed to absolute) to create your marker definition.
The idea is that you can create one or a set of "marker paths" without having to deal with actually placing them on the plot itself. Of course, this leads to other issues (not in the least how to make them)...
Calculating by hand is actually not as difficult as it seems, since you'll be doing very small segments as it is.
In terms of tutorials, this one is probably a pretty good place to start: http://developer.mozilla.org/en/docs/SVG:Tutorial:Paths . In terms of how do you do relative movement (as opposed to absolute), in general if the command is in UPPERCASE, you're doing absolute, and if it's in lowercase it's relative.
You can also take a look at the default marker definitions in charting/Theme.js to see how I did it.
Looking to change the size of the marker
Thanks for your reply.
I am specifically wanting to change the size of the marker (circles), and so I am looking to customize the "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0" path segment. SVG is fairly straightforward, as your link suggests, using circle cx="10" cy="10" r="2" fill="red", for instance, but I have found that calculating the SVG path segment for various sized circles based on radius size to be daunting. If there is another way (calculation for instance) to change the marker radius size in the string above, that would be great. Or, if there is another way to change the marker size instead of using addSeries. that would be great, too!
Thank!
Yeah, sure.
The key in that string is the 3, 6 and 4. Probably the easiest thing to do is multiply all of those by an equal factor and use that. The size of the marker is pretty much determined by the numbers there. Like so:
m-6,0 c0,-8 12,-8 12,0 m-12,0 c0,8 12,8 12,0
(Circles are kind of a pain using paths, especially if you are starting from a center point.)
What the original string is saying is this:
move 3 units to the left;
create a cubic bezier by putting the first anchor 4 units above, putting two control points at 6 to the right and 4 above, and another 6 to the right
then move six to the left
and basically mirror the first one.
(units are arbitrary but in general you can equate them to pixels.)
Some of the arc controls are not the most straight-forward or stable, just so you know (I tried it, after a couple of hours I came up with this).
Cool decoding ...
That works well! And you didn't even have to take any square roots either :)
Thanks much for your help ...
So, one more Q while I have you here. Now that I can change the marker size, I am having trouble using addSeries for specific points i.e.
chart1.addSeries("Series " + String.fromCharCode(n++ +65), series[i][j], opts);
where opts contains my customized marker string. The marker points don't show up when trying to be used individually.
This is a long way for a busy programmer to get somemwhat of a semblance of a bubble chart ...
Ah. Hmm.
...might have been easier had you said you're trying to do bubble charts with this; that's sort of a different story and an interest hack you're trying to pull to make it work.
I just spoke with Eugene and though he said he's not going to do bubble charts in the near future, it's possible I can add them for Dojo 1.2; I had them in the 0.4 version of the charting engine, they aren't too hard to do when you're looking at just bubbles. Bear in mind that if and when I add them, the scaling factor of the circles will be against the Y axis and not the X. The main thing is figuring out how to pass the size of the bubble along with the rest of the data.
If you're looking for something different, let us know. Also, if you want to file a bug ticket in trac for this (http://trac.dojotoolkit.org guest/guest) and assign it to me (ttrenka), that'd be pretty useful.
Can't help you with the markers not showing up without seeing your code though; what you've got there isn't enough for me to go on.
Nevermind.
...it's in the nightly (should show up tonight); I needed to do something other than what I've been doing, so I added it. Series need to have { x, y, size } and size will be scaled according to the Y axis. Test will be in the 2dchart test.
It's my lucky day
Thanks! Will Check out ...
Bubble Charts
The bubble chart is great, thanks! Made a small mod to bubble.js to fix setting the fill color:
if(!run.fill || !run.stroke){
// need autogenerated color
color = run.dyn.color = new dojo.Color(t.next("color"));
}
// 20080424 KSC:
else if (run.fill)
color= run.fill;
otherwise custom fill wasn't being set :)
Thanks much!
File me a bug at trac.
http://trac.dojotoolkit.org/ , guest/guest.
Submit the code fix and assign it to ttrenka, I'll take care of it. Thanks.
Posted code fix ...
... but couldn't see how to assign it to you.
I assigned it to Tom.
I assigned it to Tom.