New and Improved Sparkline
Update #2:
I've updated the code snippet below for the latest Avalon build.
Update:
I've changed the graphic to show how the well things look when you zoom. Just use the Display Zoom slider in AvPad. I've also changed the XAML example to stack the high and low values next to the stock sparkline and adjusted the Transform scale to provide a better aspect ratio as per Prof. Tufte. And I've removed the width and height properties from the border element to give it a liquid layout.
Here's a new and improved in-line Sparkline example. By using the Inline tag and slimming down the XAML it becomes even easier to handle. And I've used some of the typography variants to achieve a better look and feel for the associated data. Thanks to Filipe Fortes for the Inline tip.
Here's the XAML.
<Border xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/avalon/2005" Background="#ffffff" Padding="9">
<TextFlow FontFamily="Palatino Linotype" FontSize="12">
The following is over two hundred days of stock information for Microsoft <Inline Foreground="Blue">MSFT</Inline>
<Polyline LayoutTransform="scale .1,.5" 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="Red" StrokeThickness="1" Opacity="1"></Polyline>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Height="12">
<TextBlock Height="6">
<Inline Foreground="Green" FontSize="5"> 29.96 </Inline>
</TextBlock>
<TextBlock Height="6">
<Inline Foreground="Red" FontSize="5"> 23.67 </Inline>
</TextBlock>
</StackPanel> you see Avalon allows you to scale data down to a sparkline by taking advantage of vector graphics.
</TextFlow>
</Border>