2 PlotKit Sweet SVG Renderer
3 ==========================
4 SVG Renderer for PlotKit which looks pretty!
8 Copyright 2005,2006 (c) Alastair Tse <alastair^liquidx.net>
9 For use under the BSD license. <http://www.liquidx.net/plotkit>
13 // -------------------------------------------------------------------------
14 // Check required components
15 // -------------------------------------------------------------------------
18 if (typeof(PlotKit
.SVGRenderer
) == 'undefined')
24 throw "SweetSVG depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.{Layout, SVG}"
28 if (typeof(PlotKit
.SweetSVGRenderer
) == 'undefined') {
29 PlotKit
.SweetSVGRenderer
= {};
32 PlotKit
.SweetSVGRenderer
= function(element
, layout
, options
) {
33 if (arguments
.length
> 0) {
34 this.__init__(element
, layout
, options
);
38 PlotKit
.SweetSVGRenderer
.NAME
= "PlotKit.SweetSVGRenderer";
39 PlotKit
.SweetSVGRenderer
.VERSION
= PlotKit
.VERSION
;
41 PlotKit
.SweetSVGRenderer
.__repr__
= function() {
42 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
45 PlotKit
.SweetSVGRenderer
.toString
= function() {
46 return this.__repr__();
49 // ---------------------------------------------------------------------
51 // ---------------------------------------------------------------------
53 PlotKit
.SweetSVGRenderer
.prototype = new PlotKit
.SVGRenderer();
54 PlotKit
.SweetSVGRenderer
.prototype.constructor
= PlotKit
.SweetSVGRenderer
;
55 PlotKit
.SweetSVGRenderer
.__super__
= PlotKit
.SVGRenderer
.prototype;
57 // ---------------------------------------------------------------------
59 // ---------------------------------------------------------------------
61 PlotKit
.SweetSVGRenderer
.prototype.__init__
= function(element
, layout
, options
) {
62 var moreOpts
= PlotKit
.Base
.officeBlue();
63 MochiKit
.Base
.update(moreOpts
, options
);
64 PlotKit
.SweetSVGRenderer
.__super__
.__init__
.call(this, element
, layout
, moreOpts
);
65 //this._addDropShadowFilter();
68 PlotKit
.SweetSVGRenderer
.prototype._addDropShadowFilter
= function() {
69 var filter
= this.createSVGElement("filter", {x
: 0, y
: 0, "id":"dropShadow"});
70 var goffset
= this.createSVGElement("feOffset",
71 {"in": "SourceGraphic", "dx": 0, "dy": 0, "result": "topCopy"});
72 var blur
= this.createSVGElement("feGaussianBlur",
73 {"in": "SourceAlpha", "StdDeviation": 2, "result": "shadow"});
74 var soffset
= this.createSVGElement("feOffset",
75 {"in": "shadow", "dx": -1, "dy": -2, "result":"movedShadow"});
76 var merge
= this.createSVGElement("feMerge");
77 var gmerge
= this.createSVGElement("feMergeNode", {"in":"topCopy"});
78 var smerge
= this.createSVGElement("feMergeNode", {"in":"movedShadow"});
80 merge
.appendChild(gmerge
);
81 merge
.appendChild(smerge
);
82 filter
.appendChild(goffset
);
83 filter
.appendChild(blur
);
84 filter
.appendChild(soffset
);
85 filter
.appendChild(merge
);
86 this.defs
.appendChild(filter
);
89 // ---------------------------------------------------------------------
90 // Extended Plotting Functions
91 // ---------------------------------------------------------------------
93 PlotKit
.SweetSVGRenderer
.prototype._renderBarChart
= function() {
94 var bind
= MochiKit
.Base
.bind
;
95 var shadowColor
= Color
.blackColor().toRGBString();
96 var shadowStyle
= "fill:" + shadowColor
+ ";fill-opacity:0.15";
97 var strokeStyle
= "stroke-width: 2.0; stroke:" + Color
.whiteColor().toRGBString();
99 var drawRect
= function(attrs
, bar
) {
100 var x
= this.area
.w
* bar
.x
+ this.area
.x
;
101 var y
= this.area
.h
* bar
.y
+ this.area
.y
;
102 var w
= this.area
.w
* bar
.w
;
103 var h
= this.area
.h
* bar
.h
;
105 if ((w
< 1) || (h
< 1))
108 //attrs["filter"] = "url(#dropShadow)";
109 attrs
["style"] = strokeStyle
;
110 this._drawRect(x
- 2, y
- 1, w
+4, h
+2, {"style":shadowStyle
});
111 this._drawRect(x
, y
, w
, h
, attrs
);
113 this._renderBarOrLine(this.layout
.bars
, bind(drawRect
, this));
117 PlotKit
.SweetSVGRenderer
.prototype._renderLineChart
= function() {
118 var bind
= MochiKit
.Base
.bind
;
119 var shadowColor
= Color
.blackColor().toRGBString();
120 var shadowStyle
= "fill:" + shadowColor
+ ";fill-opacity:0.15";
121 var strokeStyle
= "stroke-width: 2.0; stroke:" + Color
.whiteColor().toRGBString();
123 var addPoint
= function(attrs
, point
) {
124 this._tempPointsBuffer
+= (this.area
.w
* point
.x
+ this.area
.x
) + "," +
125 (this.area
.h
* point
.y
+ this.area
.y
) + " ";
128 var startLine
= function(attrs
) {
129 this._tempPointsBuffer
= "";
130 this._tempPointsBuffer
+= (this.area
.x
) + "," + (this.area
.y
+this.area
.h
) + " ";
133 var endLine
= function(attrs
) {
134 this._tempPointsBuffer
+= (this.area
.w
+ this.area
.x
) + "," +(this.area
.h
+ this.area
.y
);
135 attrs
["points"] = this._tempPointsBuffer
;
137 attrs
["stroke"] = "none";
138 attrs
["transform"] = "translate(-2, -1)";
139 attrs
["style"] = shadowStyle
;
140 var shadow
= this.createSVGElement("polygon", attrs
);
141 this.root
.appendChild(shadow
);
143 attrs
["transform"] = "";
144 attrs
["style"] = strokeStyle
;
145 var elem
= this.createSVGElement("polygon", attrs
);
146 this.root
.appendChild(elem
);
151 this._renderBarOrLine(this.layout
.points
,
152 bind(addPoint
, this),
153 bind(startLine
, this),
154 bind(endLine
, this));
157 PlotKit
.SweetSVGRenderer
.prototype._renderPieChart
= function() {
158 var centerx
= this.area
.x
+ this.area
.w
* 0.5;
159 var centery
= this.area
.y
+ this.area
.h
* 0.5;
160 var shadowColor
= Color
.blackColor().toRGBString();
161 var radius
= Math
.min(this.area
.w
* this.options
.pieRadius
,
162 this.area
.h
* this.options
.pieRadius
);
163 var shadowStyle
= "fill:" + shadowColor
+ ";fill-opacity:0.15";
165 var shadow
= this.createSVGElement("circle",
166 {"style": shadowStyle
, "cx": centerx
+ 1, "cy": centery
+ 1, "r": radius
+ 1});
167 this.root
.appendChild(shadow
);
169 PlotKit
.SweetSVGRenderer
.__super__
._renderPieChart
.call(this);
173 PlotKit
.SweetSVGRenderer
.prototype._renderBackground
= function() {
175 "fill": this.options
.backgroundColor
.toRGBString(),
180 if (this.layout
.style
== "bar" || this.layout
.style
== "line") {
181 this._drawRect(this.area
.x
, this.area
.y
,
182 this.area
.w
, this.area
.h
, attrs
);
184 var ticks
= this.layout
.yticks
;
186 if (this.layout
.style
== "bar" &&
187 this.layout
.options
.barOrientation
== "horizontal") {
188 ticks
= this.layout
.xticks
;
192 for (var i
= 0; i
< ticks
.length
; i
++) {
199 x
= ticks
[i
][0] * this.area
.w
+ this.area
.x
;
206 y
= ticks
[i
][0] * this.area
.h
+ this.area
.y
;
211 this._drawRect(x
, y
, w
, h
,
212 {"fill": this.options
.axisLineColor
.toRGBString()});
216 PlotKit
.SweetSVGRenderer
.__super__
._renderBackground
.call(this);
222 // Namespace Iniitialisation
224 PlotKit
.SweetSVG
= {}
225 PlotKit
.SweetSVG
.SweetSVGRenderer
= PlotKit
.SweetSVGRenderer
;
227 PlotKit
.SweetSVG
.EXPORT
= [
231 PlotKit
.SweetSVG
.EXPORT_OK
= [
235 PlotKit
.SweetSVG
.__new__
= function() {
236 var m
= MochiKit
.Base
;
238 m
.nameFunctions(this);
241 ":common": this.EXPORT
,
242 ":all": m
.concat(this.EXPORT
, this.EXPORT_OK
)
246 PlotKit
.SweetSVG
.__new__();
247 MochiKit
.Base
._exportSymbols(this, PlotKit
.SweetSVG
);