XAML + Sparklines
Via a tip from a colleague who read Chris Sells’ blog, I poked around with Sean Gerety’s Sparklines XAML samples. I’m still a XAML newbie, but I struggled through the syntax and created a XAML sample that is closer to Tufte’s Sparklines samples on the Tufte site.
And here is my XamlPad window:
The point of this graphic, which I think might have been lost in Sean’s version, is that the red dot represents the last data point in the sparkline and that red color is associated with the red ticker price after the MSFT symbol. There is nothing wrong with Sean’s sample, but I didn’t feel like the sparkline was a word-sized graphic the way Tufte envisoned them. That said, the concept can be stretched many ways, I’m sure and Sean’s interpretation is probably very valid.
Here is my code.
<Border ID="root" xmlns="http://schemas.microsoft.com/2003/xaml" Height="30" Width="200">
<Canvas>
<Canvas Left="0" Top="13"><Text>Blah, blah, blah</Text></Canvas>
<Canvas Left="80" Top="-10">
<TransformDecorator>
<TransformDecorator.Transform>
<ScaleTransform ScaleX="0.3" ScaleY="1.2" />
</TransformDecorator.Transform>
<Polyline Points="1,26.23
2,26.19
3,26.14
4,26.1
5,25.76
6,25.89
7,25.73
8,25.62
9,25.83
10,25.54
11,25.86
12,26.1
13,25.94
14,25.94
15,25.93
16,25.78
17,26.12
18,26.3
19,26.33
20,26.35
21,26.13
22,26.48
23,26.56
24,27.22
25,27.24
26,27.54
27,25.95
28,25.45
29,25.33
30,25.53
31,25.16
32,25.22
33,25.51
34,25.45
35,25.61
36,25.48
37,25.59
38,25.8
39,25.95
40,25.85
41,25.08
42,24.93
43,25.2
44,25.31
45,25.03
46,25.19
47,24.41
48,24.15
49,24.5
50,24.63
51,24.89
52,25.13
53,25.18
54,25.16
55,25.38
56,25.09
57,25.37
57,25.72
59,25.83
60,26.35
61,26.37
62,26.37
63,26.39
64,26.7
65,26.53
66,26.5
67,26.7
68,26.88
69,26.61
70,26.57
71,26.46
72,26.77
73,26.99
74,26.59
75,26.95
76,27.15
77,27.02
78,26.9
79,27.08
80,26.96
81,27.01
82,27.29
83,27.4
84,27.65
85,27.91
86,27.71
87,28.25
88,28.8
89,28.48
90,28.01
91,28.3
92,28.1
93,27.81
94,27.54
95,27.7
96,27.43
97,27.57
98,27.66
99,28.16
100,28.21
101,28.24
102,28.14
103,27.45
104,27.37
105,27.52
106,27.46
107,27.21
108,27.04
109,27.15
110,27.18
111,27.36
112,27.4
113,27.04
114,27.06
115,26.74
116,26.65
117,26.61
118,26.59
119,26.38
120,26.24
121,25.98
122,26.2
123,25.67
124,25.66
125,25.84
126,25.71
127,25.45
128,25.4
129,25.73
130,25.11
131,25.1
132,25.35
133,25.15
134,25.15
135,25.5
136,25.69
137,25.98
138,25.8
139,26
140,26.1
141,26.23
142,26.1
143,26.07
144,26.68
145,26.14
146,26.12
147,26.74
148,27.2
149,26.91
150,26.61
151,28.91
152,28.89
153,29.35
154,29.35
155,28.93
156,29.23
157,29.07
157,28.68
159,28.78
160,28.91
161,28.94
162,28.82
163,29.14
164,29.19
165,29.08
166,28.5
167,28.52
168,27.8
169,28.83
170,28.19
171,28.24
172,28.46
173,29.6
174,29.07
175,29.96
176,29.5
177,28.5
178,28.9
179,28.36
180,28.34
181,27.84
182,27.55
183,28.37
184,28.84
185,28.38
186,28.43
187,28.3
188,27.26
189,26.52
190,26.51
191,26.42
192,26.57
193,26.5
194,26.22
195,26.24
196,26.45
197,26.62
198,25.7
199,25.54
200,25.63
201,25.6
202,25.73
203,25.61
204,25.58
205,25.71
206,25.65
207,25.66
208,26.18
209,26.17
210,26.41
211,26.23
212,26.47
213,26.61
214,26.89
215,26
216,26.45
217,26.38
218,26.04
219,26.89
220,26.69
221,27.52
222,27.27
223,27.4
224,27.31
225,26.91
226,27.47
227,27.7
228,27.42
229,26.5
230,26.88
231,26.15
232,25.64
233,25.63
234,25.75
235,25.26
236,25.7
237,25.78
238,26.33
239,26.07
240,26.07
241,25.96
242,25.39
243,24.65
244,24.99
245,24.88
246,24.68
247,23.75
248,23.67
249,24.09
250,24.87
251,24.88
252,24.64
253,24.61
254,24.4
255,24.41
256,24.79
257,24.22
257,24.16
259,24.03
260,24.63
261,24.76
262,25.57
263,25.79
264,25.62
265,25.99
266,26.2
267,26.36
268,25.74
269,25.99
270,26.37
271,25.86
272,26.1
273,25.72
" Stroke="Black" StrokeThickness="0.5" Opacity="1"/>
</TransformDecorator>
<Ellipse CenterX="83" CenterY="31" RadiusX="2.0" RadiusY="2.0" Fill="red"/>
</Canvas>
<Canvas Left="170" Top="13"><Text>MSFT</Text></Canvas>
<Canvas Left="199" Top="13"><Text Foreground="Red">29.96</Text></Canvas>
</Canvas>
</Border>
The major problem with my code, of course, is that I manually placed the text elements via pixel coordinates. I don’t know enough about XAML layout to avoid this. This is unfortunate as it would have been a beautiful syngergy between the XAML layout model and the visual use of the sparkline as a graphical word amidst the rest of the text.
But that is a lesson for another day. I suppose I’ll experiment with creating a Sparklines class where I can grab data from an XML file or some arbitrary query and lay it out like text, like so:
<Text>This is a test and here is Microsoft’s performance: </Text><Sparkline Type=”Graph” data=”msft.xml” Foreground=”Black” DotColor=”Red”/><Text>MSFT</Text><Text Foreground=”Red”><Sparkline Type=”LastValue” data=”msft.xml” Foreground=”Red”/>
Comments
A source for exercise, health and nutrition advice, and information on exercise programs, building muscle, athletic performance and male sexuality.
Posted by: food | December 14, 2006 1:03 PM