VCL Charts - Early Access Preview (v21.2)

ctodx
14 December 2021

The next major release of our VCL Subscription (v21.2) is just around the corner. Before the official release, we wanted to share some good news that you've probably already guessed from the post title. Yes, v21.2 will ship with an early access preview (EAP) of our new product, ExpressCharts. In this post, I shall highlight the main features and capabilities the product will include in this preview.

Of course, should you have any questions or feedback on our new product, please comment below or submit a support ticket via the DevExpress Support Center. We will be happy to follow-up.

The VCL ExpressCharts Early Access Preview is available for all customers with an active DevExpress VCL Subscription. It is not available in the VCL Subscription trial version.

DirectX, GDI+, and GDI Support

The ExpressCharts Suite fully supports DirectX, GDI+, and GDI rendering and allows you to apply skins and transparency effects to chart elements. Anti-aliasing is enabled in both DirectX and GDI+ render modes and will enhance the graphical elements of charts even more.

Performance

Although the ExpressCharts Suite is currently available as an Early Access Preview, it already includes a number of optimizations that distinguish it from competing VCL chart libraries. Initial rendering is one aspect of performance that we've been concentrating on, another being what happens — and how quickly it gets redisplayed — when a chart is resized. Without a doubt though, the fastest way to display charts is to render them by using DirectX.

As we get closer to the official release for ExpressCharts (the release date is set for June 2022), we’ll share specific benchmarks for a broad range of usage scenarios. And yes, our expectation is that ExpressCharts will outperform its competitors – in some cases by a wide margin (for instance, right now ExpressCharts renders a line chart with one million points in under two seconds with DirectX, and resizing it completes in about one tenth of a second).

Multiple View/Series Types

The EAP version of the ExpressCharts Suite includes the following view/series types:

  • Area, Stacked Area, and Full-Stacked Area
VCL ExpressCharts - Stacked Area Series
  • Bar, Stacked Bar, and Full-Stacked Bar
VCL ExpressCharts - Stacked Bar Series
  • Line, Stacked Line, and Full-Stacked Line
VCL ExpressCharts - Line Series
  • Donut chart

VCL ExpressCharts - Donut Series

  • Pie chart

VCL ExpressCharts - Pie Series


You and your users can change the applied chart type with a single option.

VCL ExpressCharts - Switch Series Type

Flexible Design

You can create any number of diagrams and display any number of series/series points in each diagram.

VCL ExpressCharts - Multiple Diagrams

Data Binding Modes

Each series has a DataBinding property that allows you to select the desired mode (Data-aware or Unbound) and specify the data binding options for your chart.

The code examples below show how to bind an Area series to data in these modes and plot it in a diagram.

Data-Aware

var
  ADiagram: TdxChartXYDiagram;
  ASeries: TdxChartXYSeries;
  ABinding: TdxChartSeriesDBDataBinding;
begin
  ADiagram := dxChartControl1.AddDiagram<TdxChartXYDiagram>;
  ASeries := ADiagram.AddSeries('Sales in 2020');
  ASeries.ViewType := 'Area';
  ASeries.DataBindingType := 'DB';
  ABinding := ASeries.DataBinding as TdxChartSeriesDBDataBinding;
  ABinding.DataSource := dsSales;
  ABinding.ArgumentField.FieldName := 'Region';
  ABinding.ValueField.FieldName := 'Sales';
end;

Unbound

const
  ACount = 5;
  ACountries: array[0..ACount - 1] of string = 
    ('Asia', 'Australia', 'Europe', 'North America', 'South America');
  ASales: array[0..ACount - 1] of Double = (4.28, 2.27, 3.72, 4.18, 3.11);
var
  I: Integer;
  ADiagram: TdxChartXYDiagram;
  ASeries: TdxChartXYSeries;
  ABinding: TdxChartXYSeriesUnboundDataBinding;
begin
  ADiagram := dxChartControl1.AddDiagram<TdxChartXYDiagram>;
  ASeries := ADiagram.AddSeries('Sales in 2020');
  ASeries.BeginUpdate;
  try
    ASeries.ViewType := 'Area';
    ABinding := ASeries.DataBinding as TdxChartXYSeriesUnboundDataBinding;
    ABinding.ArgumentField.ValueType := 'String';
    for I := 0 to ACount - 1 do
      ASeries.Points.Add(ACountries[I], ASales[I]);
  finally
    ASeries.EndUpdate;
  end;
end;

Customization Options

The VCL Chart Control provides an extensive API that allows you to customize chart content as needs dictate. The built-in Chart Designer (available at both design and runtime) helps you and your users preview and apply chart changes.

VCL ExpressCharts - Built-in Chart Designer

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Stefan Prister
Stefan Prister
Hello DevExpress,

I've been waiting for this control for a long time, I'll be surprised.
But knowing DevExpress will be great.

Greetings Stefan from the Vinschgau
15 December 2021
Julian Bucknall (DevExpress)
Julian Bucknall (DevExpress)

@Stefan: So have I! And let me tell you that this is just the start of what we want to do with charting for VCL...

Cheers, Julian

15 December 2021
Jens Fudickar [DX-Squad]
Jens Fudickar [DX-Squad]
Congratulations to the Team!
15 December 2021
Customer99501
Customer99501
Good! I love DevExpress VCL
15 December 2021
Emile Verhijden
Emile Verhijden
Wauw, great stuff!
15 December 2021
Jonathan Roberts
Jonathan Roberts
I installed v21.2 but I'm not seeing it anywhere.  Where is it exactly?  Thanks!!
16 December 2021
VOJKO CENDAK
VOJKO CENDAK
Yes me also 21.2. Where is it ?
16 December 2021
Luis Madaleno
Luis Madaleno

This is the best Christmas gift for this year.


Congrats to all the VCL team for making so good components.

The quality of you products is outstanding.

17 December 2021
Julian Bucknall (DevExpress)
Julian Bucknall (DevExpress)

@Jonathan, @Vojko: you will need to run Setup in Modify mode, select ExpressCharts in the product list, and then proceed with the installation. New products are not selected for installation by default - so it’s required to select them (in other words, modify the installed product list) in “Modify and Update” mode instead of “Update” and then proceed with the update.

Cheers, Julian

17 December 2021
Julio Loya Medina
Julio Loya Medina
Congratulate the entire team for this component. We finally have a graphics component. We hope that next it will be Dashboard in VCL like the one in .NET, this will be requested a long time ago.
17 December 2021
CRM-03fa6c19-9608-4607-9849-84947f5ae9f3
Tuna Demirel
We want Vcl Dashboard. Just like .net
19 January 2022
Willem Louw
Willem Louw
YES for VCL Dashboard.
And Charts  with Secondary/multiple axis
15 February 2022
CRM-7de73022-5ca5-4d74-8e0c-92e70e077409
OkanS
We want VCL Dashboard, Report Designer, Step Progress Bar and Splash Form
12 April 2022
CRM-8b372841-2a80-4f36-906a-de456b257266
Customer236998
In the demo, the mouse selects the chart, but there is no prompt.
24 May 2022

Please login or register to post comments.