SVG, VML and chart on Extjs natively

[nouveauc]

Hi all.I'm beginner and speak french.So sorry for my code and the fault. I'm working presently on graphic on the good Extjs.I begin by writing a extension for svg.feature:can create rectangle, ellipse and circle and can paint with some color or gradian (radial or linear). It work on FF, Google chrome,Opera.For IE I'm writing the equivalent on VML.There are bugs and i'm :s .
GOALS:
create a graphics (Ext.drawing) in extjs for IE, FF,Opera, ... with a same code
create a chart (Ext.Chart) based on Ext.graphic with the possibility to update dynamicly when the linked Ext.data.Store changed;
create a game linbrary
and ... ouffffffffffffffffffffffffff
So I'm going back to work. I'll add stroke (pencil) ,ronded rectangle,path,text,text path for svg and all for VML
the code (t is first impression, it is not finish, so there are no comments and the code is not pretty):



Ext.namespace("Ext.Drawing");
Ext.Drawing.version='version 0.0.1';
Ext.Drawing.vmlGraphic=function(s){
this.surface=s;
var i=Ext.id();
this.svgid=i+'vml';
}
Ext.Drawing.vmlGraphic.prototype.createRect=function(config){

var r =document.createElement("v:rect");
r.style.top=config.y;
r.style.left=config.x;
r.style.width=config.width;
r.style.height=config.height;

if(!Ext.isEmpty(config.fill))
{
var d=this.createfill(config.fill);
r.fill=d;
}

return new Ext.Element(r);
}
Ext.Drawing.vmlGraphic.prototype.createEllipse=function(config){
var r=document.createElement("v:oval");
r.style.top=config.cy-config.ry/2;
r.style.left=config.cx-config.rx/2;
r.style.width=config.rx;
r.style.height=config.ry;
if(!Ext.isEmpty(config.fill))
{
r.fill=this.createfill(config.fill);
}
return new Ext.Element(r);
}
Ext.Drawing.vmlGraphic.prototype.createCircle=function(config){
var r=document.createElement("v:oval");
r.style.top=config.cy-config.r/2;
r.style.left=config.cx-config.r/2;
r.style.width=config.r;
r.style.height=config.r;
if(!Ext.isEmpty(config.fill))
{
r.fill=this.createfill(config.fill);
}
return new Ext.Element(r);
}
Ext.Drawing.vmlGraphic.prototype.createfill=function(config)
{
var f = document.createElement("v:fill");
f.on=true;

if(typeof config == "string"){
f.color=config;
f.type="solid";
}
else
{
if(!Ext.isEmpty(config.url))
return "url(#"+config.url+")";
else
{
if(config.type == "color" || !Ext.isEmpty(config.color)){
f.color=config.color;
f.type="solid";
}
else if(config.type == "linear"){
var stops="";
Ext.each(config.stops,function(it,ind,ar){
stops+=it.offset*100+"% "+it.color+","
});
f.colors=stops;
f.type="gradient";
}
else if(config.type == "radial"){
var stops="";
Ext.each(config.stops,function(it,ind,ar){
stops+=it.offset*100+"% "+it.color+","
});
f.colors=stops;
f.type="gradientradial";
}
}
}
return f;
}

Ext.Drawing.vmlGraphic.prototype.createRender=function(e)
{
if (!document.namespaces['vml']){
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
//var styleSheet = (document.styleSheets.length > 0) ? document.styleSheets[0] : document.createStyleSheet();
var styleSheet =document.createStyleSheet();
styleSheet.addRule('v\:* {behavior:url(#default#VML);}');
}
return e;

}




Ext.Drawing.svgGraphic=function(s){
this.surface=s;
var i=Ext.id();
this.svgid=i+'svg';
}
Ext.Drawing.svgGraphic.prototype.createRect=function(config){

var r =document.createElementNS("http://www.w3.org/2000/svg","rect");
r.setAttribute("x",config.x);
r.setAttribute("y",config.y);
r.setAttribute("width",config.width);
r.setAttribute("height",config.height);
if(!Ext.isEmpty(config.fill))
{
r.setAttribute("fill",this.createfill(config.fill));
}
return new Ext.Element(r);
}
Ext.Drawing.svgGraphic.prototype.createEllipse=function(config){
var r=document.createElementNS("http://www.w3.org/2000/svg","ellipse");
r.setAttribute("cx",config.cx);
r.setAttribute("cy",config.cy);
r.setAttribute("rx",config.rx);
r.setAttribute("ry",config.ry);
if(!Ext.isEmpty(config.fill))
{
r.setAttribute("fill",this.createfill(config.fill));
}
return new Ext.Element(r);
}
Ext.Drawing.svgGraphic.prototype.createCircle=function(config){
var r=document.createElementNS("http://www.w3.org/2000/svg","circle");
r.setAttribute("cx",config.cx);
r.setAttribute("cy",config.cy);
r.setAttribute("r",config.r);
if(!Ext.isEmpty(config.fill))
{
r.setAttribute("fill",this.createfill(config.fill));
}
return new Ext.Element(r);
}
Ext.Drawing.svgGraphic.prototype.createfill=function(config)
{
if(typeof config == "string")
return config;
else
{
if(!Ext.isEmpty(config.url))
return "url(#"+config.url+")";
else
{
if(config.type == "color" || !Ext.isEmpty(config.color))
return config.color;
else if(config.type == "linear"){
var grad=document.createElementNS("http://www.w3.org/2000/svg","linearGradient");

if(Ext.isEmpty())
grad.id=Ext.id();
else
grad.id=config.id;

if(!Ext.isEmpty(config.x1))
grad.setAttribute("x1",config.x1);
if(!Ext.isEmpty(config.x1))
grad.setAttribute("y1",config.y1);
if(!Ext.isEmpty(config.x1))
grad.setAttribute("x2",config.x2);
if(!Ext.isEmpty(config.x1))
grad.setAttribute("y2",config.y2);
Ext.each(config.stops,function(it,ind,ar){
var st=document.createElementNS("http://www.w3.org/2000/svg","stop");
st.setAttribute("offset",it.offset);
st.setAttribute("style","stop-color:"+it.color);
grad.appendChild(st);
});
this.surface.defs.appendChild(grad);
return "url(#"+grad.id+")";
}
else if(config.type == "radial"){
var grad=document.createElementNS("http://www.w3.org/2000/svg","radialGradient");

if(Ext.isEmpty())
grad.id=Ext.id();
else
grad.id=config.id;

grad.setAttribute("cx",config.cx);
grad.setAttribute("cy",config.cy);
grad.setAttribute("fx",config.fx);
grad.setAttribute("fy",config.fy);
grad.setAttribute("r",config.r);
Ext.each(config.stops,function(it,ind,ar){
var st=document.createElementNS("http://www.w3.org/2000/svg","stop");
st.setAttribute("offset",it.offset);
st.setAttribute("style","stop-color:"+it.color);
grad.appendChild(st);
});
this.surface.defs.appendChild(grad);
return "url(#"+grad.id+")";
}
}
}
}

Ext.Drawing.svgGraphic.prototype.createRender=function(e)
{
var el=document.createElementNS("http://www.w3.org/2000/svg","svg");
el.setAttribute("width",this.surface.width+"px");
el.setAttribute("height",this.surface.height+"px");
e.insertFirst(el);
var def=document.createElementNS("http://www.w3.org/2000/svg","defs");
el.appendChild(def);
this.surface.defs=def;
return el;
}




Ext.Drawing.Surface=Ext.extend(Ext.BoxComponent,{
initComponent : function(){
Ext.Drawing.Surface.superclass.initComponent.call(this);
if(Ext.isIE)
this.graphic=new Ext.Drawing.vmlGraphic(this);
else
this.graphic=new Ext.Drawing.svgGraphic(this);
},
onRender : function(ct, position){
Ext.Drawing.Surface.superclass.onRender.call(this, ct, position);
this.el=Ext.get(this.renderTo);
this.render=this.graphic.createRender(this.el);
if(!this.width){
var sz = this.el.getSize();
this.setSize(sz.width, this.height || sz.height);
}

},
// private
onDestroy : function(){

}
});
Ext.reg('surface', Ext.Drawing.Surface);
use: (bug in IE)


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XTech SVG Demo</title>
<link href="../sivom/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="../sivom/ext/adapter/ext/ext-base.js"></script>
<script language="javascript" src="../sivom/ext/ext-all.js"></script>
<script language="javascript" src="../drawing/Graphic.js"></script>
<script language="javascript">
Ext.onReady(function(){

var sur=new Ext.Drawing.Surface(
{
width:600,
height:600,
renderTo:'essdiv'
}
);

var m= sur.graphic.createRect({
x:20,
y:30,
width:200,
height:300,
fill:{
type:"linear",
stops:[{offset:"0",color:"#FFFF00"},{offset:"0.75",color:"#0000FF"},{offset:"1",color:"#F0F0FF"}]
}
});
var r=sur.graphic.createCircle({
cx:100,
cy:50,
r:100,
fill:"red"
});
sur.render.appendChild(m.dom);
sur.render.appendChild(r.dom);

});
</script>
</head>
<body id="body" style="border: 1px solid black; position: absolute; z-index: 0; left: 5%; top: 5%; width: 90%; height: 90%;">
<div id="essdiv"></div>
</body>
</html>
screenshot10075

[nelius]

great idea, have you thought of using canvas instead of svg?

Which license will you place this stuff under?

[Jowood]

document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

// Add required css rules
var style = document.createStyleSheet();
style.addRule('v\\:*', "behavior: url(#default#VML);");

[nouveauc]

I fix the IE bug.
you can create rectangle,ellipse,circle and fill with color and gradient(radial and linear).I also add stroke(pen or border).
furtue works:
fix different orientation of gradient between ff(horizontal) and ie(vertical)
add group
add path
add pie
etc...:-?
I have so much work to do about;so i return ;(:|bye
here is the code
10357
here is the screenshot:
for ie 10358
and for firefox10359

[mystix]

=P~ =P~ =P~

great stuff! i'm watching this thread in eager anticipation :)

[Jowood]

=D>
nice work!

[jay@moduscreate.com]

=P~ =P~ =P~

great stuff! i'm watching this thread in eager anticipation :)

ditto ;)

[mjlecomte]

FYI, the developers appear to have some stuff in svn for Ext3 for charting.

[jay@moduscreate.com]

... yes but that requires flash

[nouveauc]

I try to start the charting with my dirty drawing code.The code also dirty and very very very incomplete.I also add some code on drawing;i add text.
Drawing:
rectangle ie(yes) ff(yes)
rond rectangle ie(yes) ff(yes)
line ie(yes) ff(yes)
ellipse ie(yes) ff(yes)
circle ie(yes) ff(yes)
polyline ie(no) ff(yes)
path ie(incomplete,i code because i need in chart) ff(no)
gradiant ie(yes) ff(yes)

Charting:
bar chart(work but incomplete)

NB:the chart update when the store change.In example play to change "price" value=D>
here ie screenshot
10495
here ff screenchot
10494
here the code10496
bye,see next

[mabello]

I have not checked out your code yet, but the outcomes are very good in my opinion.
Keep up the good work!

[nouveauc]

thanks,i work on line and pie chart actually.
i want also add interraction and animation. For example click on element (bar,pie or point) fire the event(it's possible for drawing shape.)

[galdaka]

thanks,i work on line and pie chart actually.
i want also add interraction and animation. For example click on element (bar,pie or point) fire the event(it's possible for drawing shape.)

Live examples:

http://www.jadacosta.es/extjs/examples/drawing&charting/chartingsample.html

http://www.jadacosta.es/extjs/examples/drawing&charting/drawingsample.html

[nouveauc]

and another chart(line chart):D
here the code:
10550
here the screenshot
10549

[galdaka]

and another chart(line chart):D
here the code:
10550
here the screenshot
10549

And here is the live example: http://www.jadacosta.es/extjs/examples/drawing&charting/linechart.html

;)

Thanks in advance,

[nteller]

Hi nouveauc,

This is great ! Tr

[nouveauc]

[quote=nteller;252536]Hi nouveauc,

This is great ! Tr

[nteller]

What about this: http://raphaeljs.com/
and this: http://www.lutanho.net/svgvml3d/index.html
and this: http://svglbc.datenverdrahten.de/?code=circle&znr=on (Code-Examples)

Here are resources: http://www.wdvl.com/Authoring/Languages/XML/SVG/
http://www.svgx.org/library/

Till then ...

[Brendan Carroll]

What I would love to see is an extension that can match dojox.gfx. I work in the mapping world and this type client-side drawing is essential, including drawing polygons, line, points etc... In fact, one of the major players in the field has recently released a Javascript API which could work well with Ext. Sadly, they've bundled Dojo into thier Api and of course it blows. They are getting lots of traction, however, and I'd love to see Ext steel some of the thunder and show what a robust library is capable of.


http://forums.esri.com/Thread.asp?c=158&f=2396&t=266058

http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jssamples_start.htm

-BC

[wwwtd]

and another chart(line chart):D
here the code:
10550
here the screenshot
10549
why it don't have x direction and only have y direction ? can anyone fixed it? thx~

[shubhabratam]

good work... any latest updated code? Any feature on drawing arrows?

[wwwtd]

can anyone fix the problem with x derection display？？？？？？

[nouveauc]

good work... any latest updated code? Any feature on drawing arrows?
Sorry if I was absent. I'm working on some project on my entreprise.
Actually ,for ext.drawing ,I' want to develop Ext.Drawing.domHelper,Ext.Drawing.domQuery,Ext.Drawing.Element,Ext.Drawing.component and all API that do the programation same like Extjs. I'm not a big developper (for the moment) so it's taking a long times.Please wait.....thansk you for your comprehension:)

[wwwtd]

Sorry if I was absent. I'm working on some project on my entreprise.
Actually ,for ext.drawing ,I' want to develop Ext.Drawing.domHelper,Ext.Drawing.domQuery,Ext.Drawing.Element,Ext.Drawing.component and all API that do the programation same like Extjs. I'm not a big developper (for the moment) so it's taking a long times.Please wait.....thansk you for your comprehension:)
hi～。can you fix your program?why not it can't display the number under line???
and can you help me ?

[wittsparks]

Thanks for the great submission!

I'm using your code to dynamically generate small images in my application. Instead of picking a div by id from the HTML as you did in your original example, I need to create them on the fly. This is what I'm doing:


var mydiv = document.createElement('div');
document.body.appendChild(mydiv);
var element = new Ext.Element(mydiv);
element.setWidth(config.parentWidth);
element.setHeight(config.parentHeight);
var surface = new Ext.Drawing.Surface({El:element})
var r = surface.render;
var svg = r.getRoot();
var circle = r.createShape({
type: "circle"
,fill: {color:"#"+config.fillColor}
,stroke: {
color: "#"+config.strokeColor
,width: config.strokeWidth
}
});

This is not working quite right in IE, and I suspect that it has to do with the document.createElement problems that IE seems to have. I haven't been successful trying to draw entirely with Ext objects (i.e. var element = new Ext.Element('div'))

Has anyone used this library dynamically, and if so could you share your approach?

Thanks!

[chalu]

Great work man, take a look at this though (http://www.ejschart.com/)

[wittsparks]

I tried using Ext.DomHelper to generate the divs, but it still didn't work right in IE. I ended out ditching the drawing library and going a different route using pngs with transparent cutout shapes to allow a background color to show through. I can elaborate if anyone is curious.

For the record, the drawing library worked great, except for my wierd special case, and I'm sure it could be fixed with a better understanding of Ext/Javascript./:)

[haizi]

nice :D

[Gabriel Nolasco]

Thanks, you saved my day!




document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

// Add required css rules
var style = document.createStyleSheet();
style.addRule('v\\:*', "behavior: url(#default#VML);");

[nouveauc]

Hello there are a new version of Ext.Drawing. This is a important version because the librairy use a object programation.there are also add a ext component.I' ll post it when i fix the problems with ie ( may be only for ie8). I will start a new version of Ext.Charting based of the philosophy of protovis but use Ext.data.store ,work for all web broswes (ie with ie because use Ext.Drawing). Sorry but you may wait a few times :((.

[PSB]

bug in 485 and 506 line:

var xd=w-getWidth(); -> var xd=w-s.getWidth();
var yd=h-.getWidth(); -> var yd=h-s.getWidth();