Previous blog posts have introduced FilterStrategies and some different ways that they can be used. Today we introduce the DynamicFilterStrategy, which allows you to use different FilterStrategies depending on the chart's zoom level. This gives you more control and flexibility when it comes to filtering data by allowing you to abstract overly detailed regions when the chart is fully zoomed out, but to use a greater level of detail as you zoom in. Sound complicated? It isn't.]]> http://www.visiblox.com/blog/posts/2012/03/19/introducing-dynamicfilterstrategy/ http://www.visiblox.com/blog/posts/2012/03/19/introducing-dynamicfilterstrategy/ Mon, 19 Mar 2012 11:41:00 awelsh http://www.visiblox.com/blog/posts/2012/03/13/announcing-visiblox-charts-22/

The Visiblox team is delighted to announce the availability of Visiblox Charts v2.2! You can get a copy of the free edition now right here. If you are a Premium customer with a valid support license, contact support to arrange your free upgrade to the new version. Not yet a Premium customer? Head on over to get access to our excellent support along with updates and bug fix releases and get access to the premium features.

We've been busy over the last few months putting some great new improvements into our charts. ]]> http://www.visiblox.com/blog/posts/2012/03/13/announcing-visiblox-charts-22/ http://www.visiblox.com/blog/posts/2012/03/13/announcing-visiblox-charts-22/ Tue, 13 Mar 2012 12:02:00 awelsh http://www.visiblox.com/blog/posts/2012/03/13/visiblox-charts-22-and-new-examples/ As we hope you are aware by now, Visiblox Charts 2.2 is out there and available to download now. If you are a Premium customer with an eligible support license key, please contact support to arrange your upgrade. If not, what are you waiting for? Head this way to gain access to our excellent support and upgrades.

We thought we'd just take a second to point out some of the new examples we have put together as a result of the new functionality version 2.2 of the component brings us. ]]> http://www.visiblox.com/blog/posts/2012/03/13/visiblox-charts-22-and-new-examples/ http://www.visiblox.com/blog/posts/2012/03/13/visiblox-charts-22-and-new-examples/ Tue, 13 Mar 2012 11:03:00 jbeaumont http://www.visiblox.com/blog/posts/2012/02/13/visiblox-charts-22-coming-soon!/

Visiblox Charts has a good reputation for its performance and flexibility - we think it's a reputation well deserved. What's more our customers consistently give us excellent feedback about the quality of the support we provide - which we're absolutely delighted about. Rest assured that we're not standing still though. We're continuing to develop the product and extend its capabilities, so we thought we'd take a minute or two and give you an idea of what we've been working on that you can expect in the next release.

Following on from our previous post on retemplating axes, we are now going to take a look at how we can subclass our chosen axis type to completely alter its layout. We will do this through the OnApplyTemplate method which takes various elements from the ControlTemplate and positions those elements.]]> http://www.visiblox.com/blog/posts/2012/01/30/visiblox-axes-(part-2)/ http://www.visiblox.com/blog/posts/2012/01/30/visiblox-axes-(part-2)/ Mon, 30 Jan 2012 09:59:00 awelsh http://www.visiblox.com/blog/posts/2012/01/23/visiblox-axes-(part-1)/ Introduction

Visiblox Charts has been developed with flexibility in mind. In particular, it provides a number of ways in which to alter the appearance of a chart and its constituent parts. In this series of posts, we will be looking at ways in which you can alter the appearance of the axes in your charts. This relatively short first post will look at altering our axis template to incorporate a scroll bar that allows us to pan around our chart.

This example uses features from the free version of Visiblox Charts and the source code can be downloaded here.]]> http://www.visiblox.com/blog/posts/2012/01/23/visiblox-axes-(part-1)/ http://www.visiblox.com/blog/posts/2012/01/23/visiblox-axes-(part-1)/ Mon, 23 Jan 2012 11:57:00 jwalker http://www.visiblox.com/blog/posts/2012/01/16/visiblox-and-interactive-styling/ Two key attractions of Visiblox Charts are the interactivity offers as standard out of the box, and also the ability to fully customize the charts' appearance and style. There are several concepts which link both of the above together - namely NormalStyle, HighlightedStyle and SelectedStyle on a given series. In this post we'll be looking at explaining the above concepts, and showing some examples of how the various styles can be used on different charts to enhance the interactive experience that Visiblox Charts provides.

]]> http://www.visiblox.com/blog/posts/2012/01/16/visiblox-and-interactive-styling/ http://www.visiblox.com/blog/posts/2012/01/16/visiblox-and-interactive-styling/ Mon, 16 Jan 2012 09:38:00 mcrease http://www.visiblox.com/blog/posts/2012/01/9/point-figure-charts-in-visiblox/ In this post we describe how to implement a Point & Figure chart in Visiblox. This example uses the free version of Visiblox Charts and the source code can be downloaded here.

• Overview
• Point & Figure Data Point
• Point & Figure Series
• Styling
• Putting it all Together
• Summary

We hope you had a refreshing break over Christmas and New Year and are looking forward to 2012 as much as we are. We've got some exciting developments and additions in store for you this year and we'll be sure to keep you posted with developments and announcements as they come up. In the meantime, we're always on the look out for feature suggestions, ways we can make Visiblox Charts better for you, or even just to hear about how Visiblox Charts works for you. So if there's something you'd like to share, get in touch via our website or by email or send us a tweet (@visiblox)!

All the best for 2012,

The Visiblox Team

• Overview
• Image Annotation Example
• Pitchfork Annotation Example
• Summary

• Overview
• Subclassing a built-in annotation
  • Extending the EventAnnotation
  • Extending the LineAnnotation
• Custom Annotation Factory
• Summary

]]> http://www.visiblox.com/blog/posts/2011/11/21/plotting-large-datasets/ http://www.visiblox.com/blog/posts/2011/11/21/plotting-large-datasets/ Mon, 21 Nov 2011 15:16:00 awelsh http://www.visiblox.com/blog/posts/2011/11/14/creating-a-custom-behaviour-(part-3)-the-finale/ In the previous posts, we started off by creating a new behaviour that allowed users to dynamically alter the Y value of single valued points. In the second post, we extended that behaviour to include multi valued points, allowing changes to the individual Y values, as well as the entire point. In the final part of our custom behaviour, we will complete the behaviour by allowing changes to the X value of points. In addition we will add functionality to undo changes and to 'lock' changes for a particular axis. ]]> http://www.visiblox.com/blog/posts/2011/11/14/creating-a-custom-behaviour-(part-3)-the-finale/ http://www.visiblox.com/blog/posts/2011/11/14/creating-a-custom-behaviour-(part-3)-the-finale/ Mon, 14 Nov 2011 11:42:00 ekouri http://www.visiblox.com/blog/posts/2011/11/7/styling-annotations/ In our blog post Introducing Annotations, we looked into the different ways of creating and deleting annotations from the chart and how we can interact with them. In this blog post, we will take a closer look at how we can style annotations. Annotations are only available in the premium version of Visiblox charts.

• Annotation Elements
• Element Styles
• Applying Custom Styles
  • Selecting The TargetType
  • Custom Element Styles
  • Custom Annotation Style
  • Implicit Annotation Style
• Example
• Conclusion

I was recently asked by someone if it is possible to get Visiblox Charts to animate. While we don't provide an animation framework as part of the chart's API, it really isn't hard to do and Visiblox Charts fully supports animations. So I thought it might be interesting to take a look at how to do that. This post will show you how. The full source code for this example is available for download from here. Just add a reference to Visiblox Charts 2.1 and you're off. ]]> http://www.visiblox.com/blog/posts/2011/10/31/animating-visiblox-charts/ http://www.visiblox.com/blog/posts/2011/10/31/animating-visiblox-charts/ Mon, 31 Oct 2011 09:11:00 plal http://www.visiblox.com/blog/posts/2011/10/24/bubble-charts/ Bubble charts are used to present data in a similar manner to scatter charts, in that they display individual points based on their X and Y values. In addition, bubble charts can represent a third variable for each point which is used to determine the size of each point. The premium release of Visiblox Charts features the TemplatedSeries, which makes it easy to produce bubble charts - this blog post will show you how.

]]> http://www.visiblox.com/blog/posts/2011/10/24/bubble-charts/ http://www.visiblox.com/blog/posts/2011/10/24/bubble-charts/ Mon, 24 Oct 2011 07:47:00 awelsh http://www.visiblox.com/blog/posts/2011/10/17/creating-a-custom-behaviour-(part-2)/ In this, the second part of our custom behaviour, we will look at extending our initial implementation to allow extra functionality around MultiValueDataPoints.

Our first pass at this behaviour provided the ability to click on a point and drag it up and down, altering its Y Value. This works very well for series that use data points with only a single value, but what about the more complex series types, such as Candlestick or HLOC (High/Low/Open/Close)? This post will examine the techniques involved in allowing a user to alter any of the Y values associated with a point in one of these series types. ]]> http://www.visiblox.com/blog/posts/2011/10/17/creating-a-custom-behaviour-(part-2)/ http://www.visiblox.com/blog/posts/2011/10/17/creating-a-custom-behaviour-(part-2)/ Mon, 17 Oct 2011 09:46:00 mroberts http://www.visiblox.com/blog/posts/2011/10/11/visiblox-support-for-theming/ Version 2.1 of Visiblox now includes extensive support for theming which allows the entire chart and all series to be restyled dynamically by simply providing your own custom theme.

In this blog post, I plan to take you through each stage in creating a simple theme to display a simple line series in alternate theme to our traditional Visiblox styling. I'll also modify the chart control directly to reposition the title label after the chart. ]]> http://www.visiblox.com/blog/posts/2011/10/11/visiblox-support-for-theming/ http://www.visiblox.com/blog/posts/2011/10/11/visiblox-support-for-theming/ Tue, 11 Oct 2011 08:05:00 awelsh http://www.visiblox.com/blog/posts/2011/09/26/creating-a-custom-behaviour-(part-1)/ In the first in a series of posts on creating a custom behaviour, we are going look at how to extend the BehaviourBase class to create a behaviour that allows a user to change data points using the mouse.

To begin with, the behaviour will only allow the moving of single valued points on the Y axis. As the behaviour progresses it will grow to allow the changing of multi-valued data points (such as those used in a Candlestick series), changing the X values of the points and interacting with other behaviours. ]]> http://www.visiblox.com/blog/posts/2011/09/26/creating-a-custom-behaviour-(part-1)/ http://www.visiblox.com/blog/posts/2011/09/26/creating-a-custom-behaviour-(part-1)/ Mon, 26 Sep 2011 13:18:00 ekouri http://www.visiblox.com/blog/posts/2011/09/20/visiblox-and-expression-blend/ In version 2.1 of Visiblox Charts, we have added support for Microsoft Expression Blend. The premium version is shipped along with a design library, the Visiblox.Charts.Design.dll, which holds some extra information when building charts with Expression Blend.

Overview

Support for Blend includes the following:

• Grouping Visiblox Charts properties in different attribute panels depending on their functionality.
• Customizing the display of specific properties to provide a more user friendly interface. For example, when the chart is selected and the Series property is exposed, you can easily select a series type to add to the chart.
• Adding the Visiblox Charts components into the asset library.
• Providing default initializers for all the chart types.

Grouping Properties

Adding a series

Asset Library

• How it works
• Examples
  • Simple style change
  • Hide points and areas across the discontinuity
  • Show diamond shaped points only across the discontinuity
  • Add special points on top of the base line
• Combined Application
• Summary

How it works

The DiscontinuousLineSeries is based on the LineSeries which means that it inherits all the LineSeries styles and dependency properties. Also, just like every other series type, it gets its data from the DataSeries property. The difference is that you can add null DataPoints, which will affect the next DataPoint in the DataSeries. For example, if we added 3 DataPoints: (1,1), (2,2), (3,3) and we wanted point (2,2) to have a different style or introduce a gap in the line, we would have to add 4 DataPoints in the following order: (1,1), null, (2,2), (3,3).]]> http://www.visiblox.com/blog/posts/2011/09/13/introduction-to-discontinuous-line-series/ http://www.visiblox.com/blog/posts/2011/09/13/introduction-to-discontinuous-line-series/ Tue, 13 Sep 2011 12:49:00 jbeaumont http://www.visiblox.com/blog/posts/2011/09/8/announcing-visiblox-charts-21/ The Visiblox team is delighted to announce the availability of Visiblox Charts v2.1!

New Features

• Discontinuous line series - This new series type allows the plotting of lines with gaps or alternately styled segments. There are some examples of these in our examples gallery: Discontinous Line Example and Projection Example.

• Data labels - A number of chart series (line, bar, column and band series) now support data labels. These are labels placed next to the data points showing the value for that point. This is demonstrated by the example found here.

• Reverse Axes - All axis types now support reversing, which allows them to be plotted in the reverse direction with the larger values at the bottom or left and the smaller values at the top or right for Y and X respectively. See this in action in our reversed axis example.

• Theme support and styling changes - We’ve introduced themes in Visiblox Charts 2.1 which with the simple switch of a resource file restyle the visuals of the chart. To support themes the styling code in Visiblox Charts has been reviewed and improved. In addition some pre-defined themes are included in the premium distribution which can be used as is or modified to suit. The previously mentioned example shows off the packaged themes.

• Expression Blend support - To complement the new styling improvements, the premium edition of Visiblox Charts 2.1 now comes with design time support for Expression Blend.

• Improved MVVM support - One of the missing jigsaw pieces to our MVVM support was to make the BindableDataSeries' ItemSource property bindable. This has now been implemented, making the use of Visiblox Charts in an MVVM context even easier.

• New per-point styling on bar and column series - When you're only plotting one column or bar series on the chart, it can be desirable to have each bar or column rendered in a different colour. In previous versions of Visiblox Charts this wouldn't have been easily possible, but we've now introduced a per-point styling mode on bar and column series to support this. The Series will render each bar or column in a different colour, based on the Chart's palette.

]]> http://www.visiblox.com/blog/posts/2011/09/8/announcing-visiblox-charts-21/ http://www.visiblox.com/blog/posts/2011/09/8/announcing-visiblox-charts-21/ Thu, 08 Sep 2011 11:28:00 awelsh http://www.visiblox.com/blog/posts/2011/09/6/saving-a-chart-as-an-image/ We are often asked if there is a built-in way to save a Visiblox Chart as an image file. Unfortunately, at the time of writing, the answer to this is no. However, it doesn't take too much code to make it possible and this blog post is going to describe the steps involved.

WPF vs Silverlight

Chart Interaction

Visiblox already comes with one implementation, WindowedFilterStrategy, another one can be downloaded from the blog post mentioned above and, of course, you can implement your own strategies. But suppose the strategy you want is essentially a combination of pre-existing strategies? This post shows how you can chain two filters together. ]]> http://www.visiblox.com/blog/posts/2011/08/9/combining-filterstrategies/ http://www.visiblox.com/blog/posts/2011/08/9/combining-filterstrategies/ Tue, 09 Aug 2011 11:36:00 jbeaumont http://www.visiblox.com/blog/posts/2011/07/19/visiblox-charts-21-a-sneak-peek/

Introduction

We get a lot of great feedback from our customers on what features they would like to see and we try and use that feedback to inform our product roadmap. In the months since the last release the product team have been beavering away in the back room preparing a new release with some really exciting new features, so I thought it might be a nice idea to give you an idea of what's in the pipeline.

The main focus areas for this release have been implementing a number of features our customers have been asking for and working on the visuals of Visiblox Charts. ]]> http://www.visiblox.com/blog/posts/2011/07/19/visiblox-charts-21-a-sneak-peek/ http://www.visiblox.com/blog/posts/2011/07/19/visiblox-charts-21-a-sneak-peek/ Tue, 19 Jul 2011 10:15:00 ekouri http://www.visiblox.com/blog/posts/2011/07/12/introducing-annotations/ Chart annotations are visual elements that can be used to mark points or areas of some significance. For example, in stock charts they can be used to draw trend lines, callout text boxes, highlighted regions, cycle lines and many more. In this blog post, we will be introducing the annotations provided by the premium version of Visiblox charts.

Trend Lines

Cycle Lines

Highlighted region with callout textbox

• Basic Concepts
• Default Annotations in Visiblox
• Creating Annotations
• Creating Annotations Interactively
• Creating Annotations Interactively: Example (Building An Annotation Toolbar)
• Creating Annotations Programmatically
• Creating Annotations Programmatically: Example (Creating A Live Chart With Annotations)
• Summary

Basic Concepts

Annotations wouldn't be very useful (or fun!) if we couldn't interact with them - drag them around the plot area, resize them or edit the text. Interaction can very easily be enabled. You just need to set IsInteractionEnabled to true and ClickMode to Drag. And to make interaction even easier, grippers appear at the edges of the annotations when you mouse over them.

Interaction with annotations, includes creating and deleting them. The creation process is a bit more complicated and will be covered later in this blog post. Deletion is much easier; in fact, you only need to set ClickMode to Delete and the cursor will turn into an eraser. To delete an annotation programmatically, all you need to do is remove it from the Annotations Collection. ]]> http://www.visiblox.com/blog/posts/2011/07/12/introducing-annotations/ http://www.visiblox.com/blog/posts/2011/07/12/introducing-annotations/ Tue, 12 Jul 2011 15:52:00 jbeaumont http://www.visiblox.com/blog/posts/2011/07/7/reducing-memory-usage-in-visiblox-charts/

Introduction

When plotting really large volumes of data there are two primary concerns: performance and memory usage. We have talked previously on various occasions about how to improve performance in Visiblox Charts by optimising the way you use the charts and by introducing filtering or sampling to reduce the amount of data you plot. In this post we’re going to be looking at ways to reduce the amount of memory used by Visiblox Charts. ]]> http://www.visiblox.com/blog/posts/2011/07/7/reducing-memory-usage-in-visiblox-charts/ http://www.visiblox.com/blog/posts/2011/07/7/reducing-memory-usage-in-visiblox-charts/ Thu, 07 Jul 2011 12:53:00 jbeaumont http://www.visiblox.com/blog/posts/2011/06/20/plotting-mathematical-functions-on-visiblox/ There was a recent, very cool blog post published which showed how to re-template Visiblox Charts to produce a mathematical style quadrant plot. One of the comments there suggested it would be nice if Visiblox Charts supported function plotting out of the box, so I thought I'd take the opportunity to show how easy it is to write your own IDataSeries implementation by doing just that. ]]> http://www.visiblox.com/blog/posts/2011/06/20/plotting-mathematical-functions-on-visiblox/ http://www.visiblox.com/blog/posts/2011/06/20/plotting-mathematical-functions-on-visiblox/ Mon, 20 Jun 2011 12:32:00 shogarth http://www.visiblox.com/blog/posts/2011/06/13/data-binding-with-visiblox-charts/ Data binding is one of the most powerful features in WPF and Silverlight - allowing you to connect your business logic to a user interface with minimal effort. Visiblox Charts is lightweight as it is built from the ground-up to support data binding. This blog post is a tutorial on how to integrate Visiblox Charts into your application using data binding.

Contents

• Overview
• The BindableDataSeries class
  • Introduction
  • Data Binding - Standard Approach
  • Data Binding with Multi-Valued Charts
  • Data Binding with Stacked Charts
• The AutoSeriesGenerator class
  • Introduction
  • AutoSeriesGenerator - Standard Approach
  • AutoSeriesGenerator with Multi-Valued Charts
  • AutoSeriesGenerator with Stacked Charts
• Summary

Overview

In Visiblox Charts, there are two definitions of a series. A data series (defined by the IDataSeries interface) holds data that is to be plotted onto a chart. A chart series  (defined by the IChartSeries interface) is responsible for the visual representation of a data series. Setting the DataSeries  property on a chart series supplies its underlying data. This can be summarised in the following diagram:

It is also possible to bind business objects directly to a chart series, removing the necessity to create a data point for each business object manually. Visiblox supports two methods of data binding:

• BindableDataSeries
• AutoSeriesGenerator

I will now cover each of these methods of data binding individually. This post is written against version 2.08 of Visiblox Charts, which at the time of writing is the most recent version. Data binding with Visiblox is possible both in XAML and code-behind. For brevity I will provide all of my sample solutions in XAML-only, although the attached example solution file will also contain code-behind samples. So, let's begin!

• Using Candlesticks/HLOC with a BindableDataSeries
• Navigating time series
• Fixing x-axis height
• FilteredDataSeries
• Rescaling the Y-axis
• Dealing with weekend gaps
• Putting it all together

The premium release of Visiblox Charts supports candlestick and HLOC series. Whilst there are examples provided on the examples page, this blog post describes a chart that plots substantially more data and with a few more interesting features also added in. ]]> http://www.visiblox.com/blog/posts/2011/05/24/plotting-candlestick-series-with-visiblox-charts/ http://www.visiblox.com/blog/posts/2011/05/24/plotting-candlestick-series-with-visiblox-charts/ Tue, 24 May 2011 14:37:00 jbeaumont http://www.visiblox.com/blog/posts/2011/05/17/printing-visiblox-charts/ A question we get a lot from our customers is "Does Visiblox Charts provide support for printing?". Well the answer is yes, you can print Visiblox Charts using the standard WPF and Silverlight printing APIs.

In this post we're going to take a look at printing with Visiblox Charts. I'm going to focus on the Silverlight platform. However, I will make some comments about using Visiblox Charts in WPF printing at the end as well.

Printing In Silverlight

There are already lots of articles out there on the web about how to use the printing capabilities provided by the framework. If you need more information on that I suggest you check out this for Silverlight and this for WPF, or any of the many other resources to be found out there on the subject.

Here we're just going to concentrate on the Visiblox Charts part of the story.

]]> http://www.visiblox.com/blog/posts/2011/05/17/printing-visiblox-charts/ http://www.visiblox.com/blog/posts/2011/05/17/printing-visiblox-charts/ Tue, 17 May 2011 08:27:00 gorosz http://www.visiblox.com/blog/posts/2011/05/10/common-windows-phone-7-performance-challenges/ This article aims to collect the most important performance challenges I've come across when working on various WP7 projects - the most well known being Visiblox Charts for Windows Phone 7 and Cocktail Flow (On a note, I gave a talk on this topic at the London Windows Phone 7 user group - the slides from that event can be viewed from here).

Networking Causing UI Lags

The most common class to use for networking tasks is the WebClient class. It's the simplest networking class to use, it takes 3 lines to grab a piece of web content:

var client = new WebClient();
client.DownloadStringCompleted += (s, ev) => { responseTextBlock.Text = ev.Result; };
client.DownloadStringAsync(new Uri("http://www.sherdog.com/rss/news.xml"))

Unfortunately there's a serious issue that's not mentioned in the documentation of this class - it runs on the UI thread most of the time making the UI unresponsive at times.

The workaround to this issue is to not use WebClient, but use the HttpWebRequest class (which is actually used by WebClient as well). HttpWebRequest has a bit less straightforward API than WebClient and - since it doesn't run on the UI thread - it's the caller's responsibility to marshall back to the UI thread:

var request = (HttpWebRequest)WebRequest.Create(new Uri("http://www.sherdog.com/rss/news.xml"));
request.BeginGetResponse(r =>
{
        var httpRequest = (HttpWebRequest)r.AsyncState;
        var httpResponse = (HttpWebResponse)httpRequest.EndGetResponse(r);

        using (var reader = new StreamReader(httpResponse.GetResponseStream()))
        {
            var response = reader.ReadToEnd();

            Deployment.Current.Dispatcher.BeginInvoke(new Action(() =>
                {
                    responseTextBlock.Text = response;
                }));
        }
}, request);

Too much data?

As has been previously discussed, Visiblox Charts is pretty fast. We're continually working to find further improvements as well. In addition, there are a number of things you can look at to squeeze the last bit of performance of the component as well. Unfortunately, if you throw enough data at it even Visiblox Charts will eventually struggle. When that happens there are basically two options:

1. Change the requirements so you don't have to show as much data
2. Filter or sample the data

Clearly, option 1 isn't always a possibility or even desirable. Usually people who are in favour of data sampling will point out that a chart is only a fixed number of pixels wide and so showing much more data than that doesn't add that much value which is true to a certain degree. In Visiblox Charts, this is not quite as clear an argument because the component gives the user the ability to zoom in and see more detail, which clearly isn't possible if that data isn't there. Where data sampling gets really tricky though is trying to preserve the important aspects of the data while reducing the amount of data.

The obvious option is to just sample the data in your model and only present the sampled data to the chart. That works just fine if your use case is relatively static, but if you need to change the way sampling works based on some interaction of the user (e.g. zooming) it may be nicer to let the sampling happen in the chart. ]]> http://www.visiblox.com/blog/posts/2011/04/26/visiblox-charts,-data-filtering,-sampling-and-the-filtereddataseries/ http://www.visiblox.com/blog/posts/2011/04/26/visiblox-charts,-data-filtering,-sampling-and-the-filtereddataseries/ Tue, 26 Apr 2011 08:12:00 jbeaumont http://www.visiblox.com/blog/posts/2011/04/19/visiblox-charts-20-released/ The Visiblox team is happy to announce the release of Visiblox Charts v2.0. The free version with the documentation can be downloaded from the download page.

New Features

• Premium version of Visiblox Charts for Windows Phone 7 - Following the beta release of Visiblox Charts for Windows Phone 7 in 1.9, we are now proud to announce the full availability of our premium edition component on the Windows Phone 7 platform.
• Radar and Polar Charts - We’ve expanded the range of chart types supported by Visiblox Charts to include Radar and Polar charts. You can see some examples of these on our website: radial chart example and polar chart example.
• New Stacking API - We’ve redesigned the way stacked charts are handled, now allowing stacking of line series, area series, staircase and spline series. Hundred percent stacked mode is supported, as well as placing multiple stacked series next to each other. Check out the examples section of our website for a look at the new stacked charts.
• Spline Charts - We’ve introduced spline (or rounded curve) charts. These operate just like normal line series but provide curve smoothing with variable tension. Spline charts can be created using the SplineSeries class.
• Automatic Series Construction Support - We’ve added functionality to support directly binding data sources to the chart and have it automatically create the chart series to display that data. For example, bind collections of domain objects and have the chart automatically generate a number of line series from those. Take a look at the AutoSeriesGenerator class for this new functionality.
• Improved Core Component - In addition to the new features we've spent considerable time further improving existing features. Enhancements include memory optimisations, pixel snapping for sharper rendering on all platforms, better axis label positioning and alignment and more.

Why not download version 2.0 at and give it a spin?

]]> http://www.visiblox.com/blog/posts/2011/04/19/visiblox-charts-20-released/ http://www.visiblox.com/blog/posts/2011/04/19/visiblox-charts-20-released/ Tue, 19 Apr 2011 09:19:00 shogarth http://www.visiblox.com/blog/posts/2011/03/22/using-templatedseries-with-visiblox-charts-an-example/ separation of concerns between the domain logic and the presentation of that logic; all glued together through data binding. Support for templating and data binding are both included in Visiblox Charts *, and this blog post will demonstrate how to develop an application putting these concepts into use. The application I will build is based upon searching the Twitter public feed for a user-defined search term. Tweets are gathered using the Twitter Search API (as originally documented by Tim Heuer), analysed for a mood and plotted onto a Visiblox data series.]]> http://www.visiblox.com/blog/posts/2011/03/22/using-templatedseries-with-visiblox-charts-an-example/ http://www.visiblox.com/blog/posts/2011/03/22/using-templatedseries-with-visiblox-charts-an-example/ Tue, 22 Mar 2011 09:21:00 http://www.visiblox.com/blog/posts/2011/03/15/visiblox-charts-ranges-demystified/ This blog post will introduce the concept of a Range that Visiblox Charts uses to describe the limits of an axis. It will cover the following topics:

• What is a Range?
• Auto-Calculated Ranges
• Setting a Fixed Range
• IAxis.Range vs IAxis.ActualRange
• IRange and IRangeWithEffectiveLimits
• Exploring Continuous and Discontinuous Ranges
• Conclusion

What is a Range?

In Visiblox Charts we have a notion, described by the IRange interface, of a value range. This is primarily used to tell an axis how much of a value range to show. The IRange interface is really quite simple and basically just has a Maximum and a Minimum (and a few methods to grow the range). There are various implementations of IRange (or rather more specifically IRange<T>) out of the box which provide strongly typed versions of Maximum and Minimum. These are: DoubleRange, DateTimeRange and CategoryRange, which map quite nicely to the various axes which are provided out of the box with Visiblox Charts.

]]> http://www.visiblox.com/blog/posts/2011/03/15/visiblox-charts-ranges-demystified/ http://www.visiblox.com/blog/posts/2011/03/15/visiblox-charts-ranges-demystified/ Tue, 15 Mar 2011 16:34:00 jbeaumont http://www.visiblox.com/blog/posts/2011/03/1/using-pie-charts-in-visiblox-charts-(silverlight,-wpf-and-windows-phone)/ In the 1.9 release of Visiblox we've added support for pie charts. This article gives an overview of these, shows basic usage and also implements an example application running on Silverlight, WP7 and WPF that uses nested pie charts.

Here's what the application looks like running on Windows Phone 7:

This article is going to cover the following:

• Relationship Between Pie Charts and Other Series
• Creating Pie Charts
  • Creating Pie Charts without Data Binding
  • Creating Pie Charts with Data Binding
  • Selection on Pie Charts and Exploding Pie Charts
• An Example Silverlight Application Using Drill-down Pie Charts
  • Defining the Model
  • Creating the View
  • Tying it All Together: Handling Selection and Updating the Drill-down Chart
  • Download the Code
• Example Pie Chart Application in WPF
• Example Pie Chart Application on Windows Phone 7
• Summary

Relationship Between Pie Charts and Other Series

Pie Charts are conceptually different than other series - e.g. LineSeries, ColumnSeries or BarSeries. A pie chart isn't represented in the Cartesian coordinate system, but in a special, radial coordinate system. The X axis is represented as a polar category axis, while Y values define the amount of area filled by each pie piece.

Also, while it does make sense to combine e.g. LineSeries and ColumnSeries, combining pie charts with other series or other pie series is not a clear concept.

For this reason pie charts are treated as a separate chart type and are encapsulated in the PieChart class. This results in a somewhat different API than many other charting components provide, where pie series is treated like a normal series. Our goal with this approach was to not force pie series into the Cartesian model that the Chart class represents. ]]> http://www.visiblox.com/blog/posts/2011/03/1/using-pie-charts-in-visiblox-charts-(silverlight,-wpf-and-windows-phone)/ http://www.visiblox.com/blog/posts/2011/03/1/using-pie-charts-in-visiblox-charts-(silverlight,-wpf-and-windows-phone)/ Tue, 01 Mar 2011 16:33:00 gorosz http://www.visiblox.com/blog/posts/2011/02/21/announcing-visiblox-charts-for-windows-phone-7/ We are proud to announce that Visiblox Charts for Windows Phone 7 Beta has been released in version 1.9 of Visiblox Charts and can be downloaded for free here (note: the prerequisite for this release is to download and install the Silverlight Toolkit for Windows Phone). To get started developing on the phone read our tutorial on getting started with Visiblox Charts for WP7.

Visiblox Charts for WP7 is the first charting library that has support for seamingless zooming, panning, and selection - all optimized for the phone. Similar to Visiblox Charts on other platforms it also provides excellent performance, can be easily customized and styled and was built to be easy to extend. For a quick tour on the Windows Phone version, see the following video:

The structure of the article is as follows:

• Line Series
  • Creating A Chart
  • Adding the Series to the Chart
  • Creating a Line Series with Manually Created Data
• Adding Zooming and Panning to the Chart
• Enabling Selection on the Series
  • Selection of the Whole Series
  • Selection of Individual Points
• Basic Styling of the Chart: Adding Titles, Positioning the Legend
  • Adding Titles to the Chart, Axes and Series
  • Styling the Title and Positioning of the Legend
• Bar and Column Series
  • Creating a Column Series Using Data Binding
  • Creating a Bar Series
• Download the Source Code

]]> http://www.visiblox.com/blog/posts/2011/02/21/visiblox-for-wp7-basic-charts,-selection-and-zooming/ http://www.visiblox.com/blog/posts/2011/02/21/visiblox-for-wp7-basic-charts,-selection-and-zooming/ Mon, 21 Feb 2011 16:54:00 jwalker http://www.visiblox.com/blog/posts/2011/02/15/using-multiple-visiblox-charts/ This post looks at using multiple Visiblox charts within one application, and how to link behaviours and properties between them. Specifically, it will look at binding Zoom behaviours, axis ranges, size, and trackball behaviour.

Binding Zoom Behaviour

There may be occasions where you want to have several charts, all of which react to a zoom on any of the others. This may be especially useful if you have charts stacked one on top of the other, all of which have a common X axis. You might decide, as is done in the Live Streaming Example, to only show the axis on the bottom chart, to maximise the space available to plot data. In this situation it makes sense to zoom all charts whenever another zooms, to ensure the single X axis is still correct for all charts.

This can be demonstrated easily with two charts, and extended to any number you want to link together. First we need to create a couple of charts and add some data, done simply in XAML and code-behind as follows :

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <charts:Chart x:Name="Chart1" Grid.Row="0" LegendVisibility="Collapsed">
        <charts:Chart.Series>
            <charts:LineSeries />
        </charts:Chart.Series>
    </charts:Chart>
    <charts:Chart x:Name="Chart2" Grid.Row="1" LegendVisibility="Collapsed">
        <charts:Chart.Series>
            <charts:LineSeries />
        </charts:Chart.Series>
    </charts:Chart>
</Grid>

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        Chart1.Series[0].DataSeries = GenerateDataSeries(10);
        Chart2.Series[0].DataSeries = GenerateDataSeries(20);
    }

    private DataSeries GenerateDataSeries(int seed)
     {
        DataSeries<DateTime, double> dataSeries = new DataSeries<DateTime, double>();
        DateTime _currentDate = new DateTime(2000, 01, 01);
        DateTime _maxDate = new DateTime(2010, 01, 01);
        Random rnd = new Random(seed);
        double value = rnd.NextDouble();

        while (_currentDate < _maxDate)
        {
            dataSeries.Add(new DataPoint<DateTime, double>() 
              { X = _currentDate, Y = value });
            value = rnd.NextDouble();
            _currentDate = _currentDate.AddMonths(1);
        }
        return dataSeries;
     }
}

This gives a basic chart with some data :

Then, we'll add a zoom to Chart1 and link it to Chart2. To add a zoom behaviour to Chart1, we have :]]> http://www.visiblox.com/blog/posts/2011/02/15/using-multiple-visiblox-charts/ http://www.visiblox.com/blog/posts/2011/02/15/using-multiple-visiblox-charts/ Tue, 15 Feb 2011 12:00:00 jbeaumont http://www.visiblox.com/blog/posts/2011/02/11/visiblox-charts-191-released!/ We are delighted to announce the availability of Visiblox Charts 1.9.1.  This version includes a number of new features including:

• Support for pie charts
• Support for Windows Phone 7 with API extensions to support zooming and panning via gestures (beta release)
• Multiple X-axis support, allowing for an arbitrary number of X-axes above and below the chart
• Mouse-wheel support for zooming
• Improved legend positioning and styling options
• New annotation types including event markers and text annotations (premium edition only)
• New FilteredDataSeries class to make it easier to implement data sampling or filtering (premium edition only)

Why not grab this new version at www.visiblox.com/download and give it a spin?

Please see below for the full set of API changes since version 1.8.1:

• General
  • Added IAxisAware, IInteractable, IRenderElementOwner, IMarginPreference interfaces
  • Added InvalidatableCollectionBase class
  • UniqueAndNotNullItemsObservableCollection class renamed to UniqueAndNotNullShadowedObservableCollection
  • Added SortedList class
• Annotations
  • Added TextAnnotation, CalloutTextAnnotation, EventAnnotation classes
  • Added AnnotationBase.PreviewingPropertyChanged method
  • Renamed AnnotationBase.IsEnabled property to IsInteractionEnabled
• Axes
  • Added DateTimeAxisIntervalSpan.Undefined enumeration member which is the new default for DateTimeAxis.MajorTickIntervalType and DateTimeAxis.MinorTickIntervalType which are now non-nullable
  • Added IAxis.RenderingEnabled property
  • Added AxisLabel.FormatString, AxisLabel.Orientation, AxisLabel.CalculatedWidth and AxisLabel.CalculatedHeight dependency properties
  • Added AxisBase.GetFormattedDataValueInternal method
  • Added new protected virtual method on AxisBase.InvalidateGridlinesAnnotations
  • Added AxisBase.RenderingEnabled dependency property
  • Changed IAxis.ActualRange type from IRange to IRangeWithEffectiveLimits<T>
  • Added IRangeWithEffectiveLimits interface and DoubleRangeWithEffectiveLimits, DateTimeRangeWithEffectiveLimits, CategoryRangeWithEffectiveLimits classes
  • Removed DiscontinousDateTimeRange
  • Removed ContrinousRangeBase
  • DoubleRange and DateTimeRange now inherit from RangeBase<T>
  • Added IAxis.IsDataValueRenderable() method
  • Renamed IsMarginEnabled property to IsAutoMarginEnabled
  • Removed AxisBase.GetDataValueAsRenderPositionWithZoomInternal and AxisBase.GetDataValueAsRenderPositionWithoutZoomInternal
  • Added AxisBase GetAxisValueAsRenderPosition
  • Added AxisPanel.IsElementHidden dependency property
  • Added AxisLabel.FitToAxisSize dependency property
  • Changed DiscontinuousDateTimeAxis.FilterDateValues visibility from protected to protected virtual
• Behaviours
  • Added ZoomBehaviour.DisableAxisRendering and PanBehaviour.DisableAxisRendering dependency properties to allow the behaviours to disable axis rendering for the duration of an animation or user interaction to improve performance
  • Added MouseWheel method to IBehaviour and all implementations
  • Added HideCollidingAxisLabels, XAxisLabelFormatString, XAxisLabelHorizontalAlignment, XAxisLabelVerticalAlignment, YAxisLabelFormatString, YAxisLabelHorizontalAlignment, YAxisLabelVerticalAlignment DPs to CrosshairBehaviour
  • Added BehaviourBase.Tag property
  • TrackballBehaviour inherits from BehaviourBase instead of BehaviourWithAxesBase
  • Added ZoomMode enumeration
  • Added TrackingSnapPattern class
  • Added TrackballBehaviour.SnapMode property
• Chart
  • Added Chart.SecondaryXAxis, Chart.AdditionalPrimaryXAxis and Chart.AdditionalSecondaryXAxis
  • Added Chart.SetAxisRenderingEnabledState method
• Data and ChartSeries
  • Added FilteredDataSeries, IFilterStrategy, WindowedFilterStrategy classes
  • Added IChartSeries. Init, IChartSeries.DeInit methods
  • Added IChartSeries.IsPointRenderable
  • Removed ChartSeriesBase. GetPointValueOnXAxis and ChartSeriesBase. GetPointValueOnYAxis methods
  • Added ChartSeriesBase.ClearCanvas method
  • Added DataPoint.Tag property
  • Changed signatures for MultiValueSeriesBase.UpdatePoint, and MultiValueSeriesBase.UpdatePointInteractionHelper methods
  • Changed MultiValueSeriesBase.StyleNormalPoint, MultiValueSeriesBase.StyleHighlightedPoint, MultiValueSeriesBase.StyleSelectedPoint methods from protected abstract to protected virtual
  • Added MultiValueSeriesBase.PositionPointOnZoomCanvas method
  • Added TemplatedLineSeries.SetCenteredStyleOnPoint method
• Invalidation
  • Added IInvalidatable.Invalidate method
  • Added InvalidationHandler.CancelInvalidationRequest method
• Legend
  • Added LegendVerticalAlignment, LegendHorizontalAlignment and LegendPosition DPs to Chart
  • Added LegendPosition enum
  • Added IsDisplayedOnLegend property to IChartSeries
  • Added LegendMaxHeightRatio DP to Chart
• Pie charts
  • Added PieChart class
  • Added PiePiece class
• Range
  • Removed IRange.EffectiveMinimum, IRange.EffectiveMaximum properties
  • Removed IRange.ToDiscreteValueRange and IRange.ToContinuousValueRange methods.
  • Added IRangeWithEffectiveLimits interface and implementations
  • Added RangeBase.Tag property

• Pie charts - Visiblox Charts 1.9.1 introduces support for pie charts
• Multiple Y-axis support - this example shows the use of y-axes on either side of the chart to display data.  Visiblox Charts supports an arbitrary number of x- and y-axes on either side of the chart.
• Term structure - Combine multiple series together to produce more complex charts such as a term structure.
• Javascript Integration - Silverlight provides javascript integration which lets you manipulate your charts directly from Javascript.  This example shows you how!
• Staircase chart - Staircase charts (or step charts) are a special form of line series which show discrete step changes in the data.
• Band chart - Band charts are charts with two lines and an area fill between them.  The fill colour automatically changes when the lines invert.
• Stacked column - Visiblox Charts supports stacked column charts out of the box.
• Stacked bar - Stacked bar charts are supported as well to stack horizontally across the chart.
• Live streaming - A new live data streaming example shows integration with Caplin's live data feed API with Visiblox Charts to display FX data in real time!

Introduction

• What are Styles?
• Styles: List of Setters for a Given Type - Styles are collections of property setters to be applied to a visual element. It is mandatory to specify the TargetType for each Style.
  • TargetType
  • Setters
• Defining Styles in XAML - this can be done two ways: either within the Resources section or inline.
  • Defining Styles in the Resources Section - this is the recommended way. Styles defined here need to specify an x:Key attribute and can be reused within the document with StaticResources. Keys need to be unique within a resource section.
  • Defining Styles Inline - declaring styles inline does not have real advantages: it’s lengthy and the Style declared can’t be re-used from the XAML.
• Referencing Styles Defined in XAML from Code Behind - Styles defined in XAML (within the Resources section) can be referenced from code behind.
• Styling Controls Can’t Always Be Done With Styles: Templates and Themes - The visual look of controls can’t always be altered just by setting properties of the control via styles. A more powerful way of customizing control look and feel is via Control Templates and Themes.

• Re-Using Styles for Different Types: the TargetType of the Style can be a parent type of the target object as long as it only sets properties of the parent type.
• Style Inheritance: The BasedOn property - inheriting styles can be done using the BasedOn property. Styles support single inheritance and the depth of inheritance is not limited.
• Implicit Styling - in Silverlight 4 the default styles of elements on a page / control can be specified in a simple way using implicit styles.
• Style Precedence: a Style’s Setters only get applied if the object’s particular property is not animated, not set locally and not set in the control template belonging to the object.
• Style Setter Precedence: setters specifying the value of the same property may be declared within the same Style. The last one of them has the highest precedence and will be used.

Further Advanced Topics

• Style is a Dependency Property. This means that it supports the following features:
  • Data binding: it’s possible to bind styles on to another – even though this is probably a very rare real world scenario.
  • Property changed notifications: it’s not possible to directly subscribe to property changed notifications for the Style property due to the feature missing in Silverlight, however there is a complicated, but working workaround available to detect when the Style is being changed.
  • ClearValue: unsetting the value of a Style is not the same as setting it to null. When wanting to reset or clear the style, ClearValue is the method to be used.
• Declaring Styles In Code Behind is possible, it results in more complex code though then doing the same thing in XAML.
• Other Notes About Styles
  • Only Dependency Properties Can Be Styled: styling CLR properties will result in either a compile time or runtime error.
  • Not All Classes Have Styles: only Ones Derived From FrameworkElement have the Style property and thus can be styled. All of the built-in visual controls, the Control and UserControl class are descendants of this class. It’s worth remembering this when creating custom classes that might need to be styled.

Manipulating Styles at Runtime

• Modifying Styles at 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.
• Cloning Styles - since styles can't be modified once the IsSealed property is set to true, the most convenient way to modify an existing style is to clone it, than modify the cloned style.
• Merging Styles Runtime - a more advanced scenario from simply modifying a few setters in a Style is merging two Styles into one.
  • Using the BasedOn Property - an easy way of implementing merging of styles is to use the BasedOn property when creating the merged style.
  • Copying Setters of the Styles - another, slightly more complicated approach is to create a Style by manually copying over the Setters from the ChildStyle and then copy the non conflicting Setters from the ParentStyle.
  • An Example of Both Approaches
• Some Bugs when Manipulating Styles at Runtime - there are some smaller bugs I’ve come across when manipulating Styles runtime in Silverlight. These include StrokeDashArray problems and disappearing style setters in Silverlight 3 and WP7.

I hope this summary on styles in Silverlight was helpful.

The good performance of Visiblox Charts has been well documented. Even so, there are things you can do to help get the most out of the chart in that respect. These can be grouped into 6 main bullet points:

• Consider carefully the type of series to use
• Where possible set explicit ranges on the axes
• Remove points that are offscreen from the DataSeries
• Use DataSeries rather than BindableDataSeries
• Remove data generation from the UI thread
• Reduce or disable animations
• Think carefully about the amount of data and the frequency of updates

Clearly not all of these items apply to all cases but if you're really trying to squeeze the last drop of performance out of the charts, these are all things you should consider. ]]> http://www.visiblox.com/blog/posts/2011/01/12/optimising-visiblox-charts-performance/ http://www.visiblox.com/blog/posts/2011/01/12/optimising-visiblox-charts-performance/ Wed, 12 Jan 2011 12:24:00 jbeaumont http://www.visiblox.com/blog/posts/2010/12/13/visiblox-on-top-in-silverlight-charts-comparison/ Colin Eberhardt, the established Silverlight and WPF expert, has recently posted a blog comparing the performance and APIs of some of the top rated Silverlight charting solutions. This blog not only shows that Visiblox Charts comes out on top in terms of performance, but it does so while providing a clean, usable and easy to understand API.

Why not download our free edition and try it yourself?

Read Colin's full post at http://www.scottlogic.co.uk/blog/colin/2010/12/visiblox-visifire-dynamicdatadisplay-charting-performance-comparison/.

In this article I'm looking at the 10 most important things any Silverlight developer - like myself - should be excited about in this upcoming release.

1. Debug Data Binding Expressions by Using Breakpoints in XAML

In Silverlight 4 data binding expressions are great... when you've set them up correctly that is. When you want to debug them it's a real pain to do so. In Silverlight 4 the two ways to debug data binding expressions are:

• either to look at the debug output window dump and hope that some relevant information is revealed
• or set up dummy ValueConverters so you could your break when the binding actually occurs - if it occurs!

With the ability to be able to place break points in the XAML on binding expressions, none of this hacking will be needed, saving lots of time and frustration. When breaking on a binding a BindingState object is shown in the Locals windows that returns all information on the binding that should help solve the issue with it.

2. Animations Made Easy with Transitions

Animations are really powerful in Silverlight, the only problem with them is that they're complicated to write. You need to have StoryBoards, Animations within those and creating and configuring just a simple animation is about 10-15 lines of code both in code behind and XAML.

Silverlight 5 introduces transitions that make defining animations possible in much fewer lines of code. Transitions seem to be wrapper classes around animations. Now instead of having to specify an animation from scratch, you can easily configure the most commonly animated element properties (e.g. opacity, x/y start and end offsets, easing function) on an easy to interpret class interface:

<LoadTransition StartXOffset="300" GeneratedDuration="0:0:1.0" StartOpacity="0.2">
   <LoadTransition.GeneratedEasingFunction><CircleEase/></LoadTransition.GeneratedEasingFunction>
</LoadTransition>

3. Navigating Up the Visual Tree in Bindings using RelativeSource and Mode=FindAncestor

When using DataTemplates in specifying list items, it would sometimes be great to be able to "reach outside" of the model's DataContext to another object in the visual tree and use that object as a binding. Say you have ListBox showing off Book items in it's DataTemplate and you'd like to have a ListBox inside of each of these book items that would show the deals for the book. The problem is, the Book model has no notion of Deals, the Deals object is somewhere else in the visual tree.

In Silverlight 5, this problem can be solved by using a RelativeSource, Mode=FindAncestor expression:

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. ]]> http://www.visiblox.com/blog/posts/2010/11/29/sparklines-with-visiblox-charts/ http://www.visiblox.com/blog/posts/2010/11/29/sparklines-with-visiblox-charts/ Mon, 29 Nov 2010 10:44:00 jbeaumont http://www.visiblox.com/blog/posts/2010/11/22/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?

Some 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

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.

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

Cheers, Jesse

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.

The structure of the article is the following:

• Setting Up a Basic Chart
• Adding Zooming and Panning
  • The Behaviour Model
  • Zooming Using the ZoomBehaviour
  • Panning Using the PanBehavior
  • Multiple Behaviours Using the BehaviourManager
• Understanding how Zooming and Panning Work
  • Zooming and Panning via Bindings
• Conclusion

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"/>
    </Grid>
</UserControl>

// 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: ]]> http://www.visiblox.com/blog/posts/2010/11/16/zooming-and-panning-in-silverlight-using-visiblox-charts/ http://www.visiblox.com/blog/posts/2010/11/16/zooming-and-panning-in-silverlight-using-visiblox-charts/ Tue, 16 Nov 2010 12:19:00 gorosz http://www.visiblox.com/blog/posts/2010/11/4/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:

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: ]]> http://www.visiblox.com/blog/posts/2010/11/4/styles-in-silverlight-manipulating-at-runtime/ http://www.visiblox.com/blog/posts/2010/11/4/styles-in-silverlight-manipulating-at-runtime/ Thu, 04 Nov 2010 15:02:00 jbeaumont http://www.visiblox.com/blog/posts/2010/11/1/visiblox-charts-version-181-for-silverlight-and-wpf-released/

We are pleased to announce the availability of Visiblox Charts version 1.8.1 for Silverlight and WPF. This release includes some great new features and improvements including:

• Even better performance across the entire library with up to 300% improvements in some places
• Ability to auto-scale axes based on visible data
• Ability to render custom labels on the axes
• Support for Crosshair behaviour to render axis labels
• Improved highlight and selection model throughout the library
• New PanBehaviour to add panning support to the chart
• Repositioned and reduced size of the watermark to make it less prominent (Free Edition only)
• New horizontal and vertical line annotations which render axis labels (Premium Edition only)
• New DiscontinuousDateTimeAxis implementation to allow greater flexibility and extensibility (Premium Edition only)
• New High, Low, Close (HLC) series (Premium Edition only)

We recommend you download the new version and give it a spin! If you have any feedback we'd love to hear from you.

Regards, Visiblox Team

Have a look at http://www.visiblox.com/blog and let us know what you think.

We are happy to announce the first public release of the Visiblox Charts, a Silverlight and WPF charting component.

Visiblox Charts is a fully featured, high-performance charting component. The component includes a wide array of chart types and supports interactive behaviours out of the box such as zooming, annotations and selection among others. Visiblox Charts is fully customizable through styling and templating and has been designed for extensibility.

Visiblox Charts is designed to meet all manner of charting needs but also provides support for features specific to the financial domain out of the box. These include datetime axis with support for omitting trading hours, holidays or weekends, real time updates via streaming, candlestick and HLOC series.

A more detailed list of the capabilities of Visiblox Charts can be found on the Features page. We have also created a gallery of examples with source code, showing a variety of possible component usages. These can be viewed under the Examples page.

Why not download Visiblox Charts now?

A range of examples is now available demonstrating the functionality of the Visiblox Charts component. Many of these examples are provided with full source code, allowing you to quickly get up to speed and start developing your Visiblox Charts based applications today.

Why not have a look at the range of chart types Visiblox Charts has to offer, or see how to integrate various features such as live update, data binding, or custom styling into your charts. Or have a look at Hindsight, a more complex example demonstrating a variety of Visiblox Charts features integrated in the context of a larger application.

This part of the series explores some further advanced topics: data binding, change notification, declaring styles in code behind and some other useful notes on styles.

Style is a Dependency Property

The Style property is a dependency property. This means that they give you some extra features that CLR properties would not. The features that can be used in case of the Style dependency property are the following:

• Data binding
• Property changed notifications
• ClearValue

Note that dependency properties have two other important features that can't be used with the Style dependency property: animation and styles:

• The Style property can't be animated as it's value type isn't supported by any Timeline derived animation type.
• Styles can't be applied to the Style dependency property... because this is the property that styles need to be applied through (all dependency properties can be styled except for Style).

Data binding

As Style is a dependency property it can be data binded - even though there seem to be very few real world examples when this functionality would actually be needed.

The following example demonstrates how this feature works. Two Ellipses are used: LeftEllipse and RightEllipse. RightEllipse binds its style to LeftEllipse so whenever the style of LeftEllipse changes, so does the style of RightEllipse. When clicking on the button it changes the style of LeftEllipse and thus through the binding the style of RightEllipse is changed as well:

The code (XAML): ]]> http://www.visiblox.com/blog/posts/2010/08/19/styles-in-silverlight-further-advanced-topics/ http://www.visiblox.com/blog/posts/2010/08/19/styles-in-silverlight-further-advanced-topics/ Thu, 19 Aug 2010 09:36:00 gorosz http://www.visiblox.com/blog/posts/2010/07/29/styles-in-silverlight-inheritance,-precedence-and-other-advanced-topics/ This article is part 2 of 4 in a series attempting to cover everything I think is worth knowing about styles in Silverlight 4. The previous article in the series was Styles in Silverlight: an Introduction that covered what styles are, how they can be defined and some of their limitations.

This article focuses on some more advanced topics that are handy when building more complex applications: re-using the same styles for different types, style inheritance, style precedence and style setter precedence.

Re-Using Styles for Different Types

As discussed in the previous article, all Style elements need to specify a TargetType that specifies the type of class they need to be applied to. If an application uses several different types of visual elements, this can result in having to specify different styles again and again. Let's say for example our application has an Ellipse and a Rectangle and we want to have both of them have a blue fill. The straightforward way of doing this using Styles is declaring two different styles for each of them and applying those using StaticResources in XAML:

However in this particular case it's possible to combine these styles as Ellipse and Rectangle inherit from the same parent class: Shape. The Fill property that we are setting in the styles is defined in Shape, so we can define a single style with the TargetType set to Shape, then apply this Style to the elements:

So the TargetType of the style does not necessarily have to be the type of the visual element itself. It can be a parent class of the visual element if the setters within this style only refer to properties of this parent class. The XAML code for the second example is shorter, at the same time both examples look the same: ]]> http://www.visiblox.com/blog/posts/2010/07/29/styles-in-silverlight-inheritance,-precedence-and-other-advanced-topics/ http://www.visiblox.com/blog/posts/2010/07/29/styles-in-silverlight-inheritance,-precedence-and-other-advanced-topics/ Thu, 29 Jul 2010 09:49:00 gorosz http://www.visiblox.com/blog/posts/2010/07/23/styles-in-silverlight-an-introduction/ This article is part 1 of (planned) 4 in a series attempting to cover everything I think is worth knowing about styles in Silverlight 4.

What are Styles?

Styles in Silverlight are a powerful mechanism that allow controlling the visual representation of elements in a unified way for all user interface elements. The concept is similar to using CSS to control the look and feel of HTML.

Style properties differ by element type. For example on a TextBlock (a text element) one can style the FontSize, FontFamily, Foreground and lots of other properties. On an Ellipse however none of these properties can be set, on the other hand it does provide for example the Fill property, that the TextBlock does not. So creating a blue "Hello, World" text and a red ellipse could be done the following way:

     Hello, World!
     

However, to do the same thing, we could simply define Styles. Styles are list of property-value pairs. Creating the same blue text and red ellipse with styles would be done the following way:

    
    


    Hello, World!
    

As you can see properties that we've specified as attributes on the elements, we've listed in the styles and then applied this style to the element. So instead of defining FontSize="16" of the TextBlock, we've added a Setter that had FontSize set as it's Property and 16 as it's Value. (Download the source of this example here: What Are Styles.zip)

Having seen a simple example of using styles, let's look a little bit deeper in to what they actually are. ]]> http://www.visiblox.com/blog/posts/2010/07/23/styles-in-silverlight-an-introduction/ http://www.visiblox.com/blog/posts/2010/07/23/styles-in-silverlight-an-introduction/ Fri, 23 Jul 2010 09:30:00 gorosz http://www.visiblox.com/blog/posts/2010/07/12/silverlight-world-cup-mashup-wins-real-time-push-web-app-competition/ A month ago Kwwika, a real-time data streaming service provider annonced a competition to build a mash up that uses their World Cup 2010 Twitter streams. I've decided to enter the competition and visualize the stream of tweets in a fun and engaging way. As the competition closed on 11th July, my entry was selected as one of the winners!

The Entry

My entry, Tweet For Your Team shows the tweets of the two teams simultaneously. It measures the live intensity of the tweets (how many are written per minute for each team) and also analyzes their mood by matching keywords and using simple rules to decide whether a tweet carries positive or negative emotions for the team.

The entry also allows visitors to get involved and cheer for or against their team with a single click sending a shout visible to other users off the application. See this post on all the details on the application functionality.

Winners of the competition were announced just before the World Cup 2010 final and I was happy to see my entry being selected one of the two winners. As the judging panel wrote in their summary: "Gergely created a really engaging application that you could easily sit and watch and interact with during any live World Cup match."

Why Silverlight?

I've used Silverlight to implement the application on top of the live streams. Silverlight turned out to be a great choice for implementing this application for several reasons.

Development time

It took a total of a few days to develop the application, however I was able to finish a working prototype of the application rapidly, in less than 8 hours. From there on I've spent most of the time working on the visuals and improving the mood determining algorithm.

Silverlight is indeed great for prototyping quickly and thanks to it's separated view and code behind concern, it's quite easy to radically modify the looks of an application down the line.

Performance

During games, the application had quite high load: up to 3500 tweets per minute were coming in per team. This meant up to 10 updates per second on the application interface which Silverlight dealt with surprisingly well after a few tweaks.

Media and Effects

Adding media and visual effects to the application is really easy and quick with Silverlight. I've decided late down the road to add some sound effects whenever someone was cheering and vuvuzela background music - all done in a few lines. Also, stunning visual effects can be achieved by using animations and playing with the opacity of elements. I was able to spice the feel of my application up in a few hours of time.

Summary

Silverlight turned out to be an efficient way of creating a visually appealing and performant World Cup mashup in a short period of time. World Cup 2010 is over, so the application isn't as intense as it was during the games, but I'd still encourage you to take a look at it or watch the video recorded during one of the World Cup games.

Printing Basics

The API calls to make printing happen in Silverlight couldn't really be much easier. To print, one has to create a PrintDocument class (found in the System.Windows.Printing) class. After this object created, one has to subscribe to the PrintPage event and call the Print method(). In the PrintPage event the visual tree element to be printed has to be passed. So the simplest printing scenario looks like this:

UIElement elementToPrint; // The element to be printed
PrintDocument doc = new PrintDocument(); // Create the PrintDocument  object that will do the printing
doc.PrintPage += (s, args) =>
{
  // Set the element that needs to be printed.
  // As soon as this is set, printing starts
  args.PageVisual = elementToPrint;
}

Printing events

Three events are available when printing, all of which are events of the PrintDocument object. These are:

• BeginPrint: this event fires right when the printing has started, after the user has been prompted the print dialogue and selected the printer to use. So this event does not fire before the printing is started, but rather at the exact beginning of it
• PrintPage: fired before each page is printed. In this event one can specify the exact contents of the next page to be printed
• EndPrint: fired when printing has ended or the user has cancelled the printing.

It's important to note that the PrintPage event is fired for every printed page and it's the developers responsibility to specify the contents of the next printed page, Silverlight doesn't do this task. It's safe to say therefore that the current printing API is quite low level: this means lots of freedom for specifying the printed content, but also implies extra development needed for extra features like multi page printing and pagination.

Printing a chart

There are a couple examples on various blogs that demonstrate printing simple elements like labels and grids. However to test the functionality of the printing API I decided to see what happens when printing charts.

To test this I've constructed charts with the help of the Silverlight Toolkit. So I've created four different charts and tested them being printed by adding printing support similar to as described above (the source code is available at the end of the post). I've also implemented printing the whole page itself (the only difference in printing a single chart or the whole page is which element the PageVisual is pointing at). Try the example for yourself:

The results were as I expected: the charts had the same look and size after printing: ]]> http://www.visiblox.com/blog/posts/2010/05/7/advanced-printing-in-silverlight-printing-charts-and-auto-scaling/ http://www.visiblox.com/blog/posts/2010/05/7/advanced-printing-in-silverlight-printing-charts-and-auto-scaling/ Fri, 07 May 2010 09:38:00 gorosz http://www.visiblox.com/blog/posts/2010/04/29/determining-silverlight-version-installed/ The other day I wanted to find out what version of Silverlight is installed on my computer. This task is actually not as simple as it sounds as the Silverlight plugin is actually browser dependent: there's a different one installed for Internet Explorer and a different for other browsers. The only way I've found to determine current Silverlight version is through Javascript.

Silverlight version detection: Internet Explorer

For Internet Explorer the ActiveXObject("AgControl.AgControl") has to be created. This object has and isVersionSupported(versionNumber)method which returns whether versionNumber is supported.

var AgControl = new ActiveXObject("AgControl.AgControl");
var version = "3.0.50106.0"; // The Silverlight version to test for
if(AgControl == null)
 alert("Silverlight is not installed!");
else if AgControl.isVersionSupported(version)
   alert("Silverlight v" + version + " is supported.");
else
   alert("Silverlight v" + version + " is not supported!");

Unfortunately it does not have a method that would return the current version thus to obtain the current version, version numbers have to be iterated. In my version detection script I've simply implemented a binary search that loops through the parts of the version numbers (major, minor, build and revision versions) determining the greatest version that is still supported. Not a very nice solution but the AgControl object leaves no other choice!

Silverlight version detection: other browsers (Firefox, Google Chrome, Safari etc)

For other browsers getting the Silverlight version is quite simple. The navigator.plugins["Silverlight Plug-In"] object contains information on the Silverlight plugin. It has the descriptionmember variable which contains the Silverlight version. This class makes version detection really simple compared to the hassle one has to go through with Internet Explorer!

var nav = navigator.plugins["Silverlight Plug-In"];
if(nav == null)
   alert("Silverlight is not installed!");
else
   alert("Silverlight version " + nav.description + " is installed.");

Silverlight version detection script

I have created a function that returns the current Silverlight version or -1 if Silverlight is not installed. This script is just a mixture of the Internet Explorer version detection part (with the binary version search implemented) and the other browsers detection script.

See this version detection script in action:You can use the script the following way:

var slVersion = GetSilverlightVersion();
        if(slVersion != -1)
           document.writeln("Your Silverlight version is: <strong>" +slVersion + "</strong>" );
        else
           document.writeln("<strong>Your do not have Silverlight installed on this computer</strong>");

You can download the Javascript file here: SilverlightVersion.js, or download a standalone HTML version (where the script is embedded within the HTML) here: SilverlightVersion.html.

You can also simply copy the script source code from here:

Hello, Wall Street

On the NYSE trading floor (on the right)

1. Pin variables when debugging

2. Box selection

]]> http://www.visiblox.com/blog/posts/2010/04/8/ten-cool-things-you-didnt-know-about-visual-studio-2010/ http://www.visiblox.com/blog/posts/2010/04/8/ten-cool-things-you-didnt-know-about-visual-studio-2010/ Thu, 08 Apr 2010 14:51:00 gorosz http://www.visiblox.com/blog/posts/2010/03/1/using-built-in,-embedded-and-streamed-fonts-in-silverlight/ Silverlight gives the developer the possibility of completely customizing the developed application in all aspects. Defining fonts used for displaying text is no exception. However there are multiple ways on how to go ahead with specifying fonts to use, this article attempts to summarize the options.

Using built-in fonts

Even though the list contains about 40 fonts, the selection is different on clients running Windows and those running OS X. The "web safe" list - the fonts that are generally installed on both Windows and OS X - are the following subset: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Lucia Grande, Lucia Sans Unicode, Times New Roman, Trebuchet and MS Verdana.

To specify a font of the default font types, simply specify the FontFamily property of the visual element:

Hello, World!

Application displaying all of the built-in fonts available in Silverlight

]]> http://www.visiblox.com/blog/posts/2010/03/1/using-built-in,-embedded-and-streamed-fonts-in-silverlight/ http://www.visiblox.com/blog/posts/2010/03/1/using-built-in,-embedded-and-streamed-fonts-in-silverlight/ Mon, 01 Mar 2010 16:52:00 gorosz http://www.visiblox.com/blog/posts/2009/11/11/behaviour-driven-development-for-net-developers/ On the Scot ALT.NET meeting held on 4th November Robert Lewis gave a talk on BDD explaining the basics, motivations and demonstrating the .NET tools available to support this methodology. I found the talk to be really interesting, mostly because Robert was focusing on the practical side of BDD – that is how .NET developers can use this methodology and at what projects might this be beneficial.

What is BDD?

If you haven't heard of BDD yet, Dan North's Introducing BDD or the BDD summary on Wikipedia is a good place to start. In a nutshell BDD is making another step of abstraction from TDD with the help of Domain Driven Design.

Instead of specifying atomic level unit tests, it tries to describe the desired behaviour of the software with natural language sentences. These sentences can then be written by the non-technical end users allowing them to get involved in the testing process. The sentences – often referred to as user scenarios – are then implemented by the developer as a series of unit tests.

BDD Frameworks for .NET

There are currently two BDD frameworks .NET developers can use to implement this methodology: NBehave and the IronRuby compiled version of Cucumber.

NBehave is a .NET version inspired by Dan North's JBehave. It basically allows user defined stories in a text file to be mapped to a series of test functions. For example the sentence “Given I have logged in to the system, when I start a new transaction, then I will have to enter my password” can be mapped to the test functions:

[ActionMethod]
public void Given_I_have_logged_in_to_the_system()

[ActionMethod]
public void When_I_start_a_new_transaction()

[ActionMethod]
public void I_will_have_to_enter_my_password()

The mapping can be be done in a more readable way, by having attributes containing the mapping strings e.g.

[ActionStep("I have logged in to the system")]
public void Login()

The framework goes through the user defined sentences, does the mapping and outputs whether the user stories have failed or succeeded. This way BDD can be implemented via the Red-Green-Refactor cycle which is familiar to ones using TDD.

NBehave has support for using regex expressions when mapping user stories and test functions which gives it a larger flexibility compared to having to define individual test methods for every test. It's also worth noting that it supports most .NET unit testing libraries suggesting integration into existing projects using these libraries is smooth.

The main drawbacks of the framework are that it's not really documented and there's no support for defining the same user stories with different parameters – you have to write them down again each.

Cucumber is a Ruby based tool which seems to be better documented and more feature-rich than NBehave (e.g. having the support for defining parameters for a given user story in a table-like format). Thanks to the IronRuby implementation it can be compiled to run on .NET.

]]> http://www.visiblox.com/blog/posts/2009/11/11/behaviour-driven-development-for-net-developers/ http://www.visiblox.com/blog/posts/2009/11/11/behaviour-driven-development-for-net-developers/ Wed, 11 Nov 2009 20:58:00