Start line:  
End line:  

Snippet Preview

Snippet HTML Code

Stack Overflow Questions
dojo.provide("dojo.widget.svg.Chart");
dojo.require("dojo.widget.HtmlWidget");
dojo.require("dojo.widget.Chart");
dojo.require("dojo.html.layout");
dojo.require("dojo.math");
dojo.require("dojo.svg");
dojo.require("dojo.gfx.color");
dojo.require("dojo.json");
dojo.widget.defineWidget("dojo.widget.svg.Chart",[dojo.widget.HtmlWidget,dojo.widget.Chart],function(){
this.templatePath=null;
this.templateCssPath=null;
this._isInitialize=false;
this.hasData=false;
this.vectorNode=null;
this.plotArea=null;
this.dataGroup=null;
this.axisGroup=null;
this.properties={height:0,width:0,defaultWidth:600,defaultHeight:400,plotType:null,padding:{top:10,bottom:2,left:60,right:30},axes:{x:{plotAt:0,label:"",unitLabel:"",unitType:Number,nUnitsToShow:10,range:{min:0,max:200}},y:{plotAt:0,label:"",unitLabel:"",unitType:Number,nUnitsToShow:10,range:{min:0,max:200}}}};
},{parseProperties:function(_1){
var _2=false;
var _3=false;
if(_1.getAttribute("width")){
this.properties.width=_1.getAttribute("width");
}
if(_1.getAttribute("height")){
this.properties.height=_1.getAttribute("height");
}
if(_1.getAttribute("plotType")){
this.properties.plotType=_1.getAttribute("plotType");
}
if(_1.getAttribute("padding")){
if(_1.getAttribute("padding").indexOf(",")>-1){
var p=_1.getAttribute("padding").split(",");
}else{
var p=_1.getAttribute("padding").split(" ");
}
if(p.length==1){
var _5=parseFloat(p[0]);
this.properties.padding.top=_5;
this.properties.padding.right=_5;
this.properties.padding.bottom=_5;
this.properties.padding.left=_5;
}else{
if(p.length==2){
var _6=parseFloat(p[0]);
var _7=parseFloat(p[1]);
this.properties.padding.top=_6;
this.properties.padding.right=_7;
this.properties.padding.bottom=_6;
this.properties.padding.left=_7;
}else{
if(p.length==4){
this.properties.padding.top=parseFloat(p[0]);
this.properties.padding.right=parseFloat(p[1]);
this.properties.padding.bottom=parseFloat(p[2]);
this.properties.padding.left=parseFloat(p[3]);
}
}
}
}
if(_1.getAttribute("rangeX")){
var p=_1.getAttribute("rangeX");
if(p.indexOf(",")>-1){
p=p.split(",");
}else{
p=p.split(" ");
}
this.properties.axes.x.range.min=parseFloat(p[0]);
this.properties.axes.x.range.max=parseFloat(p[1]);
_2=true;
}
if(_1.getAttribute("rangeY")){
var p=_1.getAttribute("rangeY");
if(p.indexOf(",")>-1){
p=p.split(",");
}else{
p=p.split(" ");
}
this.properties.axes.y.range.min=parseFloat(p[0]);
this.properties.axes.y.range.max=parseFloat(p[1]);
_3=true;
}
return {rangeX:_2,rangeY:_3};
},setAxesPlot:function(_8){
if(_8.getAttribute("axisAt")){
var p=_8.getAttribute("axisAt");
if(p.indexOf(",")>-1){
p=p.split(",");
}else{
p=p.split(" ");
}
if(!isNaN(parseFloat(p[0]))){
this.properties.axes.x.plotAt=parseFloat(p[0]);
}else{
if(p[0].toLowerCase()=="ymin"){
this.properties.axes.x.plotAt=this.properties.axes.y.range.min;
}else{
if(p[0].toLowerCase()=="ymax"){
this.properties.axes.x.plotAt=this.properties.axes.y.range.max;
}
}
}
if(!isNaN(parseFloat(p[1]))){
this.properties.axes.y.plotAt=parseFloat(p[1]);
}else{
if(p[1].toLowerCase()=="xmin"){
this.properties.axes.y.plotAt=this.properties.axes.x.range.min;
}else{
if(p[1].toLowerCase()=="xmax"){
this.properties.axes.y.plotAt=this.properties.axes.x.range.max;
}
}
}
}else{
this.properties.axes.x.plotAt=this.properties.axes.y.range.min;
this.properties.axes.y.plotAt=this.properties.axes.x.range.min;
}
},drawVectorNode:function(){
dojo.svg.g.suspend();
if(this.vectorNode){
this.destroy();
}
this.vectorNode=document.createElementNS(dojo.svg.xmlns.svg,"svg");
this.vectorNode.setAttribute("width",this.properties.width);
this.vectorNode.setAttribute("height",this.properties.height);
dojo.svg.g.resume();
},drawPlotArea:function(){
dojo.svg.g.suspend();
if(this.plotArea){
this.plotArea.parentNode.removeChild(this.plotArea);
this.plotArea=null;
}
var _a=document.createElementNS(dojo.svg.xmlns.svg,"defs");
var _b=document.createElementNS(dojo.svg.xmlns.svg,"clipPath");
_b.setAttribute("id","plotClip"+this.widgetId);
var _c=document.createElementNS(dojo.svg.xmlns.svg,"rect");
_c.setAttribute("x",this.properties.padding.left);
_c.setAttribute("y",this.properties.padding.top);
_c.setAttribute("width",this.properties.width-this.properties.padding.left-this.properties.padding.right);
_c.setAttribute("height",this.properties.height-this.properties.padding.top-this.properties.padding.bottom);
_b.appendChild(_c);
_a.appendChild(_b);
this.vectorNode.appendChild(_a);
this.plotArea=document.createElementNS(dojo.svg.xmlns.svg,"g");
this.vectorNode.appendChild(this.plotArea);
var _c=document.createElementNS(dojo.svg.xmlns.svg,"rect");
_c.setAttribute("x",this.properties.padding.left);
_c.setAttribute("y",this.properties.padding.top);
_c.setAttribute("width",this.properties.width-this.properties.padding.left-this.properties.padding.right);
_c.setAttribute("height",this.properties.height-this.properties.padding.top-this.properties.padding.bottom);
_c.setAttribute("fill","#fff");
this.plotArea.appendChild(_c);
dojo.svg.g.resume();
},drawDataGroup:function(){
dojo.svg.g.suspend();
if(this.dataGroup){
this.dataGroup.parentNode.removeChild(this.dataGroup);
this.dataGroup=null;
}
this.dataGroup=document.createElementNS(dojo.svg.xmlns.svg,"g");
this.dataGroup.setAttribute("style","clip-path:url(#plotClip"+this.widgetId+");");
this.plotArea.appendChild(this.dataGroup);
dojo.svg.g.resume();
},drawAxes:function(){
dojo.svg.g.suspend();
if(this.axisGroup){
this.axisGroup.parentNode.removeChild(this.axisGroup);
this.axisGroup=null;
}
this.axisGroup=document.createElementNS(dojo.svg.xmlns.svg,"g");
this.plotArea.appendChild(this.axisGroup);
var _d=1;
var _e=document.createElementNS(dojo.svg.xmlns.svg,"line");
var y=dojo.widget.svg.Chart.Plotter.getY(this.properties.axes.x.plotAt,this);
_e.setAttribute("y1",y);
_e.setAttribute("y2",y);
_e.setAttribute("x1",this.properties.padding.left-_d);
_e.setAttribute("x2",this.properties.width-this.properties.padding.right);
_e.setAttribute("style","stroke:#000;stroke-width:"+_d+";");
this.axisGroup.appendChild(_e);
var _10=10;
var _11=document.createElementNS(dojo.svg.xmlns.svg,"text");
_11.setAttribute("x",this.properties.padding.left);
_11.setAttribute("y",this.properties.height-this.properties.padding.bottom+_10+2);
_11.setAttribute("style","text-anchor:middle;font-size:"+_10+"px;fill:#000;");
_11.appendChild(document.createTextNode(dojo.math.round(parseFloat(this.properties.axes.x.range.min),2)));
this.axisGroup.appendChild(_11);
var _11=document.createElementNS(dojo.svg.xmlns.svg,"text");
_11.setAttribute("x",this.properties.width-this.properties.padding.right-(_10/2));
_11.setAttribute("y",this.properties.height-this.properties.padding.bottom+_10+2);
_11.setAttribute("style","text-anchor:middle;font-size:"+_10+"px;fill:#000;");
_11.appendChild(document.createTextNode(dojo.math.round(parseFloat(this.properties.axes.x.range.max),2)));
this.axisGroup.appendChild(_11);
var _e=document.createElementNS(dojo.svg.xmlns.svg,"line");
var x=dojo.widget.svg.Chart.Plotter.getX(this.properties.axes.y.plotAt,this);
_e.setAttribute("x1",x);
_e.setAttribute("x2",x);
_e.setAttribute("y1",this.properties.padding.top);
_e.setAttribute("y2",this.properties.height-this.properties.padding.bottom);
_e.setAttribute("style","stroke:#000;stroke-width:"+_d+";");
this.axisGroup.appendChild(_e);
var _11=document.createElementNS(dojo.svg.xmlns.svg,"text");
_11.setAttribute("x",this.properties.padding.left-4);
_11.setAttribute("y",this.properties.height-this.properties.padding.bottom);
_11.setAttribute("style","text-anchor:end;font-size:"+_10+"px;fill:#000;");
_11.appendChild(document.createTextNode(dojo.math.round(parseFloat(this.properties.axes.y.range.min),2)));
this.axisGroup.appendChild(_11);
var _11=document.createElementNS(dojo.svg.xmlns.svg,"text");
_11.setAttribute("x",this.properties.padding.left-4);
_11.setAttribute("y",this.properties.padding.top+(_10/2));
_11.setAttribute("style","text-anchor:end;font-size:"+_10+"px;fill:#000;");
_11.appendChild(document.createTextNode(dojo.math.round(parseFloat(this.properties.axes.y.range.max),2)));
this.axisGroup.appendChild(_11);
dojo.svg.g.resume();
},init:function(){
if(!this.properties.width||!this.properties.height){
var box=dojo.html.getContentBox(this.domNode);
if(!this.properties.width){
this.properties.width=(box.width<32)?this.properties.defaultWidth:box.width;
}
if(!this.properties.height){
this.properties.height=(box.height<32)?this.properties.defaultHeight:box.height;
}
}
this.drawVectorNode();
this.drawPlotArea();
this.drawDataGroup();
this.drawAxes();
this.domNode.appendChild(this.vectorNode);
this.assignColors();
this._isInitialized=true;
},destroy:function(){
while(this.domNode.childNodes.length>0){
this.domNode.removeChild(this.domNode.childNodes.item(0));
}
this.vectorNode=this.plotArea=this.dataGroup=this.axisGroup=null;
},render:function(){
dojo.svg.g.suspend();
if(this.dataGroup){
while(this.dataGroup.childNodes.length>0){
this.dataGroup.removeChild(this.dataGroup.childNodes.item(0));
}
}else{
this.init();
}
for(var i=0;i<this.series.length;i++){
dojo.widget.svg.Chart.Plotter.plot(this.series[i],this);
}
dojo.svg.g.resume();
},postCreate:function(){
var _15=this.domNode.getElementsByTagName("table")[0];
if(_15){
var _16=this.parseProperties(_15);
var _17=false;
var _18=false;
var _19=this.parseData(_15);
if(!_17){
this.properties.axes.x.range={min:_19.x.min,max:_19.x.max};
}
if(!_18){
this.properties.axes.y.range={min:_19.y.min,max:_19.y.max};
}
this.setAxesPlot(_15);
this.domNode.removeChild(_15);
}
if(this.series.length>0){
this.render();
}
}});
dojo.widget.svg.Chart.Plotter=new function(){
var _1a=this;
var _1b={};
var _1c=dojo.widget.Chart.PlotTypes;
this.getX=function(_1d,_1e){
var v=parseFloat(_1d);
var min=_1e.properties.axes.x.range.min;
var max=_1e.properties.axes.x.range.max;
var _22=0-min;
min+=_22;
max+=_22;
v+=_22;
var _23=_1e.properties.padding.left;
var _24=_1e.properties.width-_1e.properties.padding.right;
var x=(v*((_24-_23)/max))+_23;
return x;
};
this.getY=function(_26,_27){
var v=parseFloat(_26);
var max=_27.properties.axes.y.range.max;
var min=_27.properties.axes.y.range.min;
var _2b=0;
if(min<0){
_2b+=Math.abs(min);
}
min+=_2b;
max+=_2b;
v+=_2b;
var _2c=_27.properties.height-_27.properties.padding.bottom;
var _2d=_27.properties.padding.top;
var y=(((_2c-_2d)/(max-min))*(max-v))+_2d;
return y;
};
this.addPlotter=function(_2f,_30){
_1b[_2f]=_30;
};
this.plot=function(_31,_32){
if(_31.values.length==0){
return;
}
if(_31.plotType&&_1b[_31.plotType]){
return _1b[_31.plotType](_31,_32);
}else{
if(_32.plotType&&_1b[_32.plotType]){
return _1b[_32.plotType](_31,_32);
}
}
};
_1b["bar"]=function(_33,_34){
var _35=1;
var _36=0;
for(var i=0;i<_33.values.length;i++){
var x=_1a.getX(_33.values[i].x,_34);
var w;
if(i==_33.values.length-1){
w=_36;
}else{
w=_1a.getX(_33.values[i+1].x,_34)-x-_35;
_36=w;
}
x-=(w/2);
var yA=_1a.getY(_34.properties.axes.x.plotAt,_34);
var y=_1a.getY(_33.values[i].value,_34);
var h=Math.abs(yA-y);
if(parseFloat(_33.values[i].value)<_34.properties.axes.x.plotAt){
var oy=yA;
yA=y;
y=oy;
}
var bar=document.createElementNS(dojo.svg.xmlns.svg,"rect");
bar.setAttribute("fill",_33.color);
bar.setAttribute("title",_33.label+": "+_33.values[i].value);
bar.setAttribute("stroke-width","0");
bar.setAttribute("x",x);
bar.setAttribute("y",y);
bar.setAttribute("width",w);
bar.setAttribute("height",h);
bar.setAttribute("fill-opacity","0.9");
_34.dataGroup.appendChild(bar);
}
};
_1b["line"]=function(_3f,_40){
var _41=1.5;
var _42=document.createElementNS(dojo.svg.xmlns.svg,"path");
_42.setAttribute("fill","none");
_42.setAttribute("stroke",_3f.color);
_42.setAttribute("stroke-width","2");
_42.setAttribute("stroke-opacity","0.85");
_42.setAttribute("title",_3f.label);
_40.dataGroup.appendChild(_42);
var _43=[];
for(var i=0;i<_3f.values.length;i++){
var x=_1a.getX(_3f.values[i].x,_40);
var y=_1a.getY(_3f.values[i].value,_40);
var dx=_40.properties.padding.left+1;
var dy=_40.properties.height-_40.properties.padding.bottom;
if(i>0){
dx=x-_1a.getX(_3f.values[i-1].x,_40);
dy=_1a.getY(_3f.values[i-1].value,_40);
}
if(i==0){
_43.push("M");
}else{
_43.push("C");
var cx=x-(_41-1)*(dx/_41);
_43.push(cx+","+dy);
cx=x-(dx/_41);
_43.push(cx+","+y);
}
_43.push(x+","+y);
}
_42.setAttribute("d",_43.join(" "));
};
_1b["area"]=function(_4a,_4b){
var _4c=1.5;
var _4d=document.createElementNS(dojo.svg.xmlns.svg,"path");
_4d.setAttribute("fill",_4a.color);
_4d.setAttribute("fill-opacity","0.4");
_4d.setAttribute("stroke",_4a.color);
_4d.setAttribute("stroke-width","1");
_4d.setAttribute("stroke-opacity","0.8");
_4d.setAttribute("title",_4a.label);
_4b.dataGroup.appendChild(_4d);
var _4e=[];
for(var i=0;i<_4a.values.length;i++){
var x=_1a.getX(_4a.values[i].x,_4b);
var y=_1a.getY(_4a.values[i].value,_4b);
var dx=_4b.properties.padding.left+1;
var dy=_4b.properties.height-_4b.properties.padding.bottom;
if(i>0){
dx=x-_1a.getX(_4a.values[i-1].x,_4b);
dy=_1a.getY(_4a.values[i-1].value,_4b);
}
if(i==0){
_4e.push("M");
}else{
_4e.push("C");
var cx=x-(_4c-1)*(dx/_4c);
_4e.push(cx+","+dy);
cx=x-(dx/_4c);
_4e.push(cx+","+y);
}
_4e.push(x+","+y);
}
_4e.push("L");
_4e.push(x+","+_1a.getY(0,_4b));
_4e.push("L");
_4e.push(_1a.getX(0,_4b)+","+_1a.getY(0,_4b));
_4e.push("Z");
_4d.setAttribute("d",_4e.join(" "));
},_1b["scatter"]=function(_55,_56){
var r=7;
for(var i=0;i<_55.values.length;i++){
var x=_1a.getX(_55.values[i].x,_56);
var y=_1a.getY(_55.values[i].value,_56);
var _5b=document.createElementNS(dojo.svg.xmlns.svg,"path");
_5b.setAttribute("fill",_55.color);
_5b.setAttribute("stroke-width","0");
_5b.setAttribute("title",_55.label+": "+_55.values[i].value);
_5b.setAttribute("d","M "+x+","+(y-r)+" "+"Q "+x+","+y+" "+(x+r)+","+y+" "+"Q "+x+","+y+" "+x+","+(y+r)+" "+"Q "+x+","+y+" "+(x-r)+","+y+" "+"Q "+x+","+y+" "+x+","+(y-r)+" "+"Z");
_56.dataGroup.appendChild(_5b);
}
};
_1b["bubble"]=function(_5c,_5d){
var _5e=1;
var min=_5d.properties.axes.x.range.min;
var max=_5d.properties.axes.x.range.max;
var _61=0-min;
min+=_61;
max+=_61;
var _62=_5d.properties.padding.left;
var _63=_5d.properties.width-_5d.properties.padding.right;
var _64=(max-min)/(_63-_62)*25;
for(var i=0;i<_5c.values.length;i++){
var _66=_5c.values[i].size;
if(isNaN(parseFloat(_66))){
_66=_5e;
}
var _67=document.createElementNS(dojo.svg.xmlns.svg,"circle");
_67.setAttribute("stroke-width",0);
_67.setAttribute("fill",_5c.color);
_67.setAttribute("fill-opacity","0.8");
_67.setAttribute("r",(parseFloat(_66)*_64)/2);
_67.setAttribute("cx",_1a.getX(_5c.values[i].x,_5d));
_67.setAttribute("cy",_1a.getY(_5c.values[i].value,_5d));
_67.setAttribute("title",_5c.label+": "+_5c.values[i].value+" ("+_66+")");
_5d.dataGroup.appendChild(_67);
}
};
}();
New to GrepCode? Check out our FAQ X