The Actipro Blog

All the latest UI control development news from Actipro

Micro Charts Part 1 - Introduction

BlogPostBanner

Today I'd like to announce the new product coming to WPF Studio and Silverlight Studio's 2012.1 versions:  Micro Charts!  Micro Charts will also be brought to WinRT, and should be available around the time Windows 8 ships.  All three platform implementations share a similar codebase, so code can be easily reused.

We'll be doing a series of blog posts over the next couple weeks getting into detail on what is included in the new product:

UPDATE: Micro Charts are now live for WPF and Silverlight with the release of version 2012.1!  And check out the new blog series on building heat maps.

What Are Micro Charts?

Micro charts are a special form of chart that are meant to be used in small spaces, to help visualize quantitative data.  They are often found in dashboards, reports, and grids.  I'm sure you've heard the phrase "a picture is worth a thousand words", and micro charts certainly paint a pretty picture.

Since micro charts are designed to typically be very short in height, we've taken great care to make sure that our charts render with clear, exact pixel precision so that they are easy on your eyes and accurately relate the data being presented.

Gallery

Let's see a gallery of example usages.  All of the screens below are from one of our many samples that will ship with the product.  In this particular sample, we show multiple ways to compare sales data between two stores via the use of micro charts.  All these examples present the same data.

Chart1

This example shows basic line charts where the axis is displayed.  The high/low markers are made visible as well.

Chart2

This example shows two area charts.  The areas are given different appearances to differentiate them.

Chart3

This example shows bar charts, with the high/low bars highlighted.

Chart4

This example shows bar charts again, however the axis has been moved to a target sales value appropriate to each series.  Values that fall under the target sales value appear under the axis.  And special highlighting has been activated to render negative bars differently from positive bars.

Chart5

This example shows another type of bar chart, called a win/loss chart.  In win/loss charts, all bars render at full height above and below the axis.  They give an absolute sense of positive or negative values.

Chart6

This example shows a scatter series, where markers are plotted for each data point.  The data is presented in a single chart.  Hot tracking (to be described more in a subsequent post) can be enabled, allowing for mouse overs to display a tooltip indicating the values of each series under the mouse.  Hot tracking is available for any micro chart.

Chart7

This example shows two line series in a single chart.

Chart8

This example shows two area series, stacked in a single chart.  Bar series can also be stacked together.

Chart9

This example shows two 100% stacked bar series.  The same 100% option is available for stacked area series.

Chart10

This last example shows the combination of two series kinds.  A bar series is in the back with a line series on top of it, markers displayed.

Summary

You can see from the gallery above that there are many ways to use our robust micro charts product.  And we're just scratching the surface.  In follow-up posts, we'll go into more detail on features.

Micro Charts will be available in the 2012.1 version of our WPF and Silverlight controls, coming in the next several weeks.

UPDATE:  Micro Charts are now live for WPF and Silverlight with the release of version 2012.1!

TaskDownload TaskLiveDemo TaskBuyNow

WPF Studio 2011.2 Build 554 Released

BlogPostBanner

WPF Studio 2011.2 build 554 has been released and is now available for download.  This build makes numerous minor enhancements, tweaks, and bug fixes across multiple products.

    See the announcement post for the detailed list of enhancements and updates.

    TaskDownload TaskLiveDemo TaskBuyNow

    Filed under: Actipro, New features, WPF

    Silverlight Studio 2011.2 Build 123 Released

    BlogPostBanner

    Silverlight Studio 2011.2 build 123 has been released and is now available for download.  This build makes numerous minor enhancements, tweaks, and bug fixes across multiple products.

    See the announcement post for the detailed list of enhancements and updates.

    TaskDownload TaskLiveDemo TaskBuyNow

    SyntaxEditor Current Line Highlight Enhancements

    BlogPostBanner

    Recent 2011.2 builds of SyntaxEditor for WPF and Silverlight added the current line highlight feature described in this post.  By default the current line highlight renders a border around the line that resembles the current line highlight in Visual Studio 11.  The border color is currently based on the style's Background color.  Here is how it looks:

    CurrentLineHighlight1

    In 2012.1, we have added the ability to set borders on styles.  We also had a customer request to allow for setting a background on the current line highlight instead of a border.

    In light of these, for 2012.1 we have updated the current line highlight's border to be displayed on the new style border brush, and have updated the current line highlight's background to be filled in if the style has a background set.

    CurrentLineHighlight2

    In the screenshot above, we've removed the border from the style and set a semi-transparent yellow background instead.

    These new features will be in the 2012.1 versions of our WPF and Silverlight controls.

    TaskDownload TaskLiveDemo TaskBuyNow

    SyntaxEditor IntelliPrompt Code Snippets

    BlogPostBanner

    Today I'd like to show a preview of the next huge feature area coming to SyntaxEditor for WPF and SilverlightIntelliPrompt code snippets!

    UPDATE: Code snippet features are now live for WPF and Silverlight with the release of version 2012.1!

    Overview

    Code snippets are predefined templates of code that can be inserted into the document to help the end user develop code more efficiently.  They can contain multiple fields and the end user can tab between the fields while the code snippet is active.  Dependent fields can be set up such that when the first field's value is changed, all the dependent fields update their values as well.

    Activating Code Snippets

    Via Shortcuts

    Code snippets can be activated by typing their shortcut and pressing Tab immediately after.

    .NET Languages Add-on Integration

    The .NET Languages Add-on has been enhanced to automatically show available code snippets in the completion list displayed by Ctrl+Space.  This feature works in both C# and Visual Basic.

    CodeSnippets1

    Press Tab to insert the code snippet's shortcut text.  Then Tab again to activate it per above.

    Insert Snippet Popup

    An Insert Snippet popup (another way to insert code snippets) probably won't make the first 2012.1 release, but it is planned for future implementation.

    Editing a Template

    Once a code snippet has been activated, it's template code is inserted into the editor and the included fields are highlighted:

    CodeSnippets2

    In this screen, we inserted a code snippet for a C# for statement.  Note how there are two fields: index and count.  The index field shows up three times in the template.  The second and third times have dotted borders, meaning they are dependent on the first field.  More...

    SyntaxEditor Highlighting Style Borders

    BlogPostBanner

    SyntaxEditor for WPF and Silverlight have the ability for you to fully customize the highlighting styles used to syntax highlight text.  While the syntax highlighting is generally performed via the lexing of text, there also is a facility built into SyntaxEditor that allows you to tag other arbitrary ranges of text and apply a custom style to them.

    Styles allow the text to change its color, background, bold, italics, underline, strike-through, font family, size, etc.  In the upcoming 2012.1 version, we've added border rendering capabilities into the mix!

    Highlighting Style Border Samples

    Let's see some examples of how this looks.  In each of these samples, we rendered the same code but applied a customized style over the word "ActiproTest".

    Outline1

    The first sample shows a grey solid border that has rounded corners and a silver background.

    Outline2

    The second sample shows a dotted dark blue border.

    Outline3

    The third sample shows a dashed red border and light red background.

    Note how syntax highlighting that comes from the language's lexer is still in effect.  We are using a custom classification tagger to tag the "ActiproText" as special and needing to have a customized style.  Its border merges seamlessly with the normal lexing features of SyntaxEditor.

    This new feature will be in the 2012.1 versions of our WPF and Silverlight controls.

    TaskDownload TaskLiveDemo TaskBuyNow