Sparklines with Visiblox Charts

The term sparkline was coined by Edward Tufte for "small, high resolution graphics embedded in a context of words, numbers, images". These are typically small charts embedded in text or tables which allow trends in a number of data series to be visualized at a glance.

The use of sparklines has become relatively widespread, and there are now a number of sparkline implementations for various platforms. This article demonstrates how Visiblox Charts can easily be styled to produce sparklines.

Read More


Visiblox Charts - this is our way

Whenever a new product arrives on the scene the obvious question poses itself which is "What does this product do that the other's don't?" On that basis, given that Visiblox Charts is exactly such a new product, I thought I'd talk a little bit about that issue. However, it seemed to me it might be interesting to look beyond specific feature comparisons. Clearly there are feature differences between Visiblox Charts and our competitors and those are important, but they are fairly self-evident from the documentation on respective websites. Instead I'd like to talk a little bit about where Visiblox came from and why it was built because that gives quite a good picture of where our attention is focused and what we think Visiblox brings to the table.

Why are all the wheels out there square?

Question MarkSome time ago, a client approached us and was interested in writing a financial application front end using WPF and exposing that on the web using Silverlight. They were interested in benefiting from the single technology stack for both platforms. We've been building charting solutions and components for years in all sorts of technologies (Java, Flex, JS/HTML, .NET ... take your pick) so we set about doing some research into existing Silverlight charting components as charting was going to be a key element of the application. Our findings did not fill us with confidence, none of the products we found and tried from the Silverlight Toolkit through to the various commercial offerings, were able to cope with anything close to the volume of data we needed and offer a level of performance we deemed even close to acceptable. The few products that did offer something approaching to decent performance used heavy data sampling to do so which is a lossy procedure and can result in the data "meaning" being skewed so we weren't too happy about that. Sampling, to my mind, is a last resort fall-back, not a first candidate. That left us with the decision about where to go from there, so we thought we'd do a little proof of concept implementation of a chart in Silverlight that was explicitly built for performance and with that Visiblox took its first baby steps. From there we quickly realised that we had a blank canvas to work with and an opportunity to create a really high quality charting component. The rest, as they say, is history. Fast-forward past all the hard work that went into turning that first little demo into a fully-fledged, versatile and powerful charting component product and Visiblox Charts has arrived.

Have your cake and eat it too - The Visiblox Way

Question MarkKnowing a bit about where Visiblox came from, let's get back to the original question, what makes Visiblox Charts different?

The answer is four-fold:

  • Performance: Visiblox Charts was built from that very first proof of concept with the main focus of delivering on the performance front. Compared to the competition out there it's fast and it handles a lot of data. Enough said.
  • Flexibility: Alas, in software, high performance usually involves a trade-off of some kind and Visiblox Charts is no different here. If you want to get the best performance out of Visiblox Charts, you're going to have to sacrifice a bit of customisability. But fear not! Wherever we've had to impose a limitation to preserve performance, or for any other reason, we've tried to offer an alternative without that limitation. By way of example, in most series types you can't template each individual point to completely change its presentation (note you _can_ still change the style of the series which for most cases is more than enough). If you do need the ability to change points individually (e.g. you need each point to show a different image), Visiblox Charts does offer that capability in the form of the TemplatedSeries. It might not offer quite the same performance but you're not missing out in terms of flexibility either, you choose what's important to you.
  • Extensibility: It's not just performance and flexibility that we bring to the table though. Driven by the nature of Visiblox's genesis, it's always been on the forefront of our mind that we're not going to be able to deliver the perfect product for everyone's needs. No-one can. The range and diversity of use cases is simply too big and in some cases even contradictory. However, what we can do is make sure developers can extend Visiblox Charts easily to meet their needs. What does that mean in practice? If you need a different kind of series, say a box plot series, the extension points are there, you just need to write the bit of code that actually renders your boxes. If you need a different axis with some obscure domain specific tick generation? Extend AxisBase and generate those crazy ticks! At all the key points in our API you will find a base class that makes extension easy and an interface to implement if the base class absolutely doesn't do what you need.
  • Interactivity: Traditional charting controls in the web space were usually based around some sort of server-side component generating images on the basis of HTTP requests. The huge advantage of desktop apps and Rich Internet Applications (RIAs) is interactivity. We've made that a first class citizen of our charting component, not an afterthought. Zooming, panning, trackballs, crosshairs, tool tips and annotations: it's all there out of the box and built into the chart's infrastructure, ready to go. Again, if we've missed something that you really need, we at least make sure that you can add it by providing base classes and interfaces for you to write your own behaviours.
Those four cornerstones make up "The Visiblox Way", if you will. They will continue to drive how we build our charts, and if we ever move beyond charts they will drive how we build our other offerings as well. Performance, Flexibility, Extensibility and Interactivity are what we're about.

Oh, and that financial client? They're using Visiblox Charts now.

Cheers, Jesse

Read More


Silverlight guru benchmarks Visiblox Charts

Colin Eberhardt kindly had a look at Visiblox Charts and did a little comparison between it and the Silverlight Toolkit Charts. You can read his findings at

One of the things Colin says is that according to his measurements Visiblox Charts is 50-100 times faster than Silverlight Toolkit Charts, which sounds about right to us! One thing that Colin doesn't explicitly say, but which is pretty evident from his code snippets is that the API for Visiblox Charts also looks much cleaner. The XAML is about half the length from the Silverlight Toolkit equivalent.

As Microsoft's David Anson points out in his response, the Silverlight Toolkit Charts haven't been optimised for performance, which is a valid point, but that's one of the places where Visiblox Charts excels! He does suggest some alternative approaches and it would be great to see how they stack up.

Read More


Zooming and Panning in Silverlight using Visiblox Charts

Zooming and panning are features that are often needed when using a charting component. This article shows how zooming and panning can be achieved using the free version of Visiblox Silverlight charts with a few lines of code. It then digs a bit deeper to understand how zooming and panning is implemented on Visiblox charts.

The structure of the article is the following:


Setting Up a Basic Chart

Before adding zooming and panning support, let's create a simple chart with some random data. This is pretty straightforward to do, let's add a Chartin XAML and in the constructor of the main page auto generate some points:

<UserControl (...) xmlns:charts="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts">
    <Grid x:Name="LayoutRoot" Background="White">
        <charts:Chart x:Name="MainChart"/>
// Add 100 points to the chart
var rnd = new Random();
var dataSerires = new DataSeries<DateTime, double>(){ Title = "Series 1" };
var startDate = Convert.ToDateTime("2010. 08. 01.");
for (int i = 0; i < 100; i++)
    dataSerires.Add(new DataPoint<DateTime, double>(startDate.AddDays(i), rnd.Next(-20, 20)));
// Add a line series with the created data series that shows points
MainChart.Series.Add(new LineSeries() { DataSeries = dataSerires, ShowPoints = true, ToolTipEnabled=true});

The result is the following simple chart with a line series:


Adding Zooming and Panning


The Behaviour Model

Both zooming and panning are quite similar in both of them have to respond to mouse events. For such "interactive" behaviours, Visiblox has defined the Behaviour model which is an easy extension point for creating interactive components. Both zoom and pan are such behaviours ( IBehaviours). To use them, one simply has to assign either of them as the Behaviour property of the chart. So let's add that single line to enable them:

Read More


Styles In Silverlight: Manipulating At Runtime

This article is part 4 of 4 in a series covering everything that I think is worth knowing about styles in Silverlight. The previous parts of the series are Styles in Silverlight: an Introduction and Styles in Silverlight – Inheritance, Precedence and Other Advanced Topics and Styles in Silverlight – Further Advanced Topics.

This part of the series explores manipulating, merging and modifying Styles at runtime. Manipulation of Styles runtime is quite an uncommon scenario and is not really documented, this article tries to cover all important aspects of it.

Modifying Styles Runtime: the IsSealed Property

Modifying the Setters of a Style can only be done if the IsSealed property is set to false. This property is false when the Style is created and is set to true once the Style is applied to any element in the visual tree. Thus it's safe to say that Styles are a immutable in a special way: they can only be modified until applied to any element in a visual tree.

Trying to modify a Style that is sealed (IsSealed property set to true) can result in multiple errors:

  • If trying to modify the value of a Setter in the Style, an UnauthorizedAccessException to be thrown with the error message Attempted to perform an unauthorized operation.
  • If trying to add another Setter to the Style, an Exception will be thrown with the (not so informative) error message Error HRESULT E_FAIL has been returned from a call to a COM component.
  • When removing a Setter from the Style's Setters, no exception is thrown, but the operation will have no result.
  • I've created a simple example to demonstrate how modifying the assigned Style object will not work and throw exceptions or not do anything:

    The code behind for the event handlers on the buttons are as follows:

    Read More