mondomjm
04-06-2005, 05:00 AM
OK friends.
I am going to appeal for some help. Not the usual kind (I don't have any current issues!), but some open-source spirit coding help. I am looking for some people who want to help and give input on a graphing class. After playing with 3.0b2 I have come up with the basics for a simple but dynamic pie charting class (I thought I would tackle the hardest one first...this code took about 1 hour to do last night...basically, if we can draw the elements, we can do the rest). The rudimentary "proof of concept" methods I post here will be refined in the next few weeks to include much of the functionality of the celebrated xmlcharts from maani.us. If this works, I would like to submit it to the pros here at laszlo systems for consideration of inclusion. Many of us feel this is a must have feature that can help propel this platform forward fast.
I don't know if there is a process for something being an official effort, or if there are other efforts going, but I will be doing this regardless of anyone "signing up to help", so I will be coordinating this, and I thought I would throw this out to see if there were any Laslovians who:
a: want to make this a reality faster
b: want to cut their teeth on some drawing api stuff
c: want to feel the satisfaction of giving back via open source
I could use :
A good javascript person or two
A good visual designer to help with look and feel
A tester
Here is the initial scope:
LGAPI (Laszlo Graphing API...let me know if I can't do that with the name...)
Initial Graph types: Pie, Column, Bar, Line, Scatter, Hi-Lo-Close, Stacked Bar, Stacked Column, Area, Polar, Bubble
Future Considerations: 3D versions (heck, it's just isometric drawing folks, which is just more math!)
Features: Binding to an XML dataset; Legend Control; Axis Control and Labels; Titles; Pop-Up tags; Drill Down, etc.
Here is some proof of concept code:
The class:
<class name="lgapi_pie" extends="drawview">
<method name="draw_pie" args="origin_x,origin_y,radius,pct_1,pct_2,pct_3">
<![CDATA[
//declare internal variables
var start_ang, incl_ang, slice_clr
start_ang = 0;
incl_ang = 0;
//all of the code below will be replaced with input arg array looping code
//start at horizontal
start_ang = start_ang + incl_ang;
incl_ang = pct_1 * 3.6;
slice_clr = 0x0000FF;
//draw slice
this.draw_slice(origin_x, origin_y, start_ang, incl_ang, radius, slice_clr);
//reset start angle for slice 2
start_ang = start_ang + incl_ang;
incl_ang = pct_2 * 3.6;
slice_clr = 0xFF00FF;
//draw slice
this.draw_slice(origin_x, origin_y, start_ang, incl_ang, radius, slice_clr);
//reset start angle for slice 3
start_ang = start_ang + incl_ang;
incl_ang = pct_3 * 3.6;
slice_clr = 0x00FFFF;
//draw slice
this.draw_slice(origin_x, origin_y, start_ang, incl_ang, radius, slice_clr);
]]>
</method>
<method name="draw_slice" args="origin_x,origin_y,start_ang,incl_ang,radius,slice_ clr">
<![CDATA[
//declare internal variables
var seg_ang, theta, ang, half_ang, incl_ang, segments
var start_x, start_y, end_x, end_y, ctrl_x, ctrl_y
//move to origin point
this.beginPath();
this.moveTo(origin_x, origin_y);
//limit arc to a full circle
if(Math.abs(incl_ang) > 360) {
incl_ang = 360;
}
//divide into a clean number of segments for good arc quality
segments = Math.ceil(Math.abs(incl_ang) / 45);
seg_ang = incl_ang / segments;
//convert degrees to radians
theta = -(seg_ang / 180) * Math.PI;
ang = -(start_ang / 180) * Math.PI;
//draw the arc segments (already!)
if(segments > 0) {
start_x = origin_x + Math.cos(start_ang / 180 * Math.PI) * radius;
start_y = origin_y + Math.sin(-start_ang / 180 * Math.PI) * radius;
this.lineTo(start_x, start_y);
for (var i = 0; i < segments; i++) {
ang += theta;
half_ang = ang - (theta / 2);
end_x = origin_x + Math.cos(ang) * radius;
end_y = origin_y + Math.sin(ang) * radius;
ctrl_x = origin_x + Math.cos(half_ang) * (radius / Math.cos(theta/2));
ctrl_y = origin_y + Math.sin(half_ang) * (radius / Math.cos(theta/2));
this.quadraticCurveTo(ctrl_x, ctrl_y, end_x, end_y);
}
//finish with the line to origin and fill
this.lineTo(origin_x, origin_y);
this.linewidth=2;
this.strokeStyle=0x000000;
this.stroke();
this.fillStyle=slice_clr;
this.fill();
}
]]>
</method>
</class>
Here is a test lzx:
<canvas bgcolor="#FFFFFF" width="600" height="400">
<include href="lgapi/lgapi_pie.lzx"/>
<view>
<lgapi_pie id="test">
<method event="oninit" >
test.draw_pie(200,200,75,75,20,5);
//test.draw_slice(200,200,330,30,100,0x0000ff);
</method>
</lgapi_pie>
</view>
</canvas>
Please respond to this post (or email mail me through the board) if you are interested in this...
Thanks....and thanks to the pros for including the Drawing API...
I am going to appeal for some help. Not the usual kind (I don't have any current issues!), but some open-source spirit coding help. I am looking for some people who want to help and give input on a graphing class. After playing with 3.0b2 I have come up with the basics for a simple but dynamic pie charting class (I thought I would tackle the hardest one first...this code took about 1 hour to do last night...basically, if we can draw the elements, we can do the rest). The rudimentary "proof of concept" methods I post here will be refined in the next few weeks to include much of the functionality of the celebrated xmlcharts from maani.us. If this works, I would like to submit it to the pros here at laszlo systems for consideration of inclusion. Many of us feel this is a must have feature that can help propel this platform forward fast.
I don't know if there is a process for something being an official effort, or if there are other efforts going, but I will be doing this regardless of anyone "signing up to help", so I will be coordinating this, and I thought I would throw this out to see if there were any Laslovians who:
a: want to make this a reality faster
b: want to cut their teeth on some drawing api stuff
c: want to feel the satisfaction of giving back via open source
I could use :
A good javascript person or two
A good visual designer to help with look and feel
A tester
Here is the initial scope:
LGAPI (Laszlo Graphing API...let me know if I can't do that with the name...)
Initial Graph types: Pie, Column, Bar, Line, Scatter, Hi-Lo-Close, Stacked Bar, Stacked Column, Area, Polar, Bubble
Future Considerations: 3D versions (heck, it's just isometric drawing folks, which is just more math!)
Features: Binding to an XML dataset; Legend Control; Axis Control and Labels; Titles; Pop-Up tags; Drill Down, etc.
Here is some proof of concept code:
The class:
<class name="lgapi_pie" extends="drawview">
<method name="draw_pie" args="origin_x,origin_y,radius,pct_1,pct_2,pct_3">
<![CDATA[
//declare internal variables
var start_ang, incl_ang, slice_clr
start_ang = 0;
incl_ang = 0;
//all of the code below will be replaced with input arg array looping code
//start at horizontal
start_ang = start_ang + incl_ang;
incl_ang = pct_1 * 3.6;
slice_clr = 0x0000FF;
//draw slice
this.draw_slice(origin_x, origin_y, start_ang, incl_ang, radius, slice_clr);
//reset start angle for slice 2
start_ang = start_ang + incl_ang;
incl_ang = pct_2 * 3.6;
slice_clr = 0xFF00FF;
//draw slice
this.draw_slice(origin_x, origin_y, start_ang, incl_ang, radius, slice_clr);
//reset start angle for slice 3
start_ang = start_ang + incl_ang;
incl_ang = pct_3 * 3.6;
slice_clr = 0x00FFFF;
//draw slice
this.draw_slice(origin_x, origin_y, start_ang, incl_ang, radius, slice_clr);
]]>
</method>
<method name="draw_slice" args="origin_x,origin_y,start_ang,incl_ang,radius,slice_ clr">
<![CDATA[
//declare internal variables
var seg_ang, theta, ang, half_ang, incl_ang, segments
var start_x, start_y, end_x, end_y, ctrl_x, ctrl_y
//move to origin point
this.beginPath();
this.moveTo(origin_x, origin_y);
//limit arc to a full circle
if(Math.abs(incl_ang) > 360) {
incl_ang = 360;
}
//divide into a clean number of segments for good arc quality
segments = Math.ceil(Math.abs(incl_ang) / 45);
seg_ang = incl_ang / segments;
//convert degrees to radians
theta = -(seg_ang / 180) * Math.PI;
ang = -(start_ang / 180) * Math.PI;
//draw the arc segments (already!)
if(segments > 0) {
start_x = origin_x + Math.cos(start_ang / 180 * Math.PI) * radius;
start_y = origin_y + Math.sin(-start_ang / 180 * Math.PI) * radius;
this.lineTo(start_x, start_y);
for (var i = 0; i < segments; i++) {
ang += theta;
half_ang = ang - (theta / 2);
end_x = origin_x + Math.cos(ang) * radius;
end_y = origin_y + Math.sin(ang) * radius;
ctrl_x = origin_x + Math.cos(half_ang) * (radius / Math.cos(theta/2));
ctrl_y = origin_y + Math.sin(half_ang) * (radius / Math.cos(theta/2));
this.quadraticCurveTo(ctrl_x, ctrl_y, end_x, end_y);
}
//finish with the line to origin and fill
this.lineTo(origin_x, origin_y);
this.linewidth=2;
this.strokeStyle=0x000000;
this.stroke();
this.fillStyle=slice_clr;
this.fill();
}
]]>
</method>
</class>
Here is a test lzx:
<canvas bgcolor="#FFFFFF" width="600" height="400">
<include href="lgapi/lgapi_pie.lzx"/>
<view>
<lgapi_pie id="test">
<method event="oninit" >
test.draw_pie(200,200,75,75,20,5);
//test.draw_slice(200,200,330,30,100,0x0000ff);
</method>
</lgapi_pie>
</view>
</canvas>
Please respond to this post (or email mail me through the board) if you are interested in this...
Thanks....and thanks to the pros for including the Drawing API...