XtraCharts PDF

Examples
612
Examples
Charting > Examples
This section provides a list of examples, contained in this help, that are grouped by features (General, Creating
Charts, Chart Elements, End-User Interaction and Producing Output).
General
How to: Add a Chart to a W indows Forms Application
How to: Add a Chart to a W eb Application
Creating Charts
Providing Data
How to: Bind Individual Chart Series to Data
How to: Bind Individual Chart Series to Data (Runtime Sample)
How to: Bind a Chart to Data Using Series Templates
How to: Bind a Chart to Data Using Series Templates (Runtime Sample)
How to: Individually Change the View Type of Automatically Created Series
How to: Change Colors of Automatically Created Series
How to: Bind Series to Data and Display Them In Separate Panes (Runtime Sample)
How to: Bind a Chart to an MDB Database (Runtime Sample)
How to: Bind a Chart to an Array List
How to: Bind a Chart to an XML Data Source
How to: Bind a Chart to an XPO Data Source
How to: Link a Chart to the PivotGridControl's Data Source
How to: Create a Custom Summary Function
Data Representation
How to: Change the Display Format for Series Labels
How to: Change the Display Format for Axis Labels
How to: Change the Display Format for Axis Labels (Runtime Sample)
How to: Show Values as Percents in the Legend of a Pie Chart
How to: Filter Data
How to: Show N Top Points as a Single Section in a Pie Chart
How to: Use Automatic Date-Time Scale Modes of an Axis
How to: Obtain Values Calculated for Automatic Axis Date-Time Scale Modes
How to: Exclude W eekends and Holidays from the Axis Scale
How to: Adjust Point Options of the Pie Series View Type at Runtime
Appearance Customization
How to: Customize a Chart's Appearance
How to: Customize the Appearance of a Chart's Legend
How to: Customize Gridlines and Tickmarks of an Axis
How to: Customize the Appearance of a Pane's Scroll Bar (Runtime Sample)
How to: Custom Paint Series
How to: Custom Paint Series Points
How to: Conditionally Hide Series Labels
2013 DevExpress Inc.
612
Examples
613
How to: Make Series Labels Display Custom Information
How to: Avoid Overlapping of Series Labels
How to: Change the Names for Auto-Created Series
How to: Custom Draw a Crosshair Cursor
Series Views
How to: Change the View of a Series
How to: Create a Gantt Chart with Task Links
How to: Explode Points of a Pie Chart
Web Charting Specifics

How to: Add a Chart to a W eb Page (Runtime Sample)
How to: Add a Chart to an ASPxCallbackPanel during its Callback (Runtime Sample)
How to: Bind a Web Chart to Data (Runtime Sample)
How to: Bind a Web Chart to an ASPxPivotGrid
How to: Show Custom Data Over a Web Chart Using ASPxPopupControl
How to: Use the Client-Side Model of the W ebChartControl
How to: Show Tooltips for a W ebChartControl
Chart Elements
Chart Titles
How to: Add Titles to a Chart
How to: Enable W ord Wrapping for Chart Titles
Panes
How to: Create a Multi-Pane Chart
How to: Display a Series in an Additional Pane (Runtime Sample)
How to: Display Automatically Created Series in Separate Panes
Axes
How to: Add a Title to an Axis
How to: Determine whether an Axis Title is Being Hovered by the Mouse Pointer
How to: Add Secondary Axes to a Chart
How to: Create Custom Axis Labels
How to: Individually Customize Axis Labels
How to: Add a Constant Line to an Axis
How to: Add a Strip to an Axis
How to: Enable Automatic Scale Breaks for an Axis
How to: Manually Insert a Scale Break into an Axis
How to: Manually Insert a Scale Break into an Axis (Runtime Sample)
Indicators
How to: Add a Trend Line to a Chart
How to: Show a Regression Line for a Stock Chart
How to: Show a Regression Line for a Stock Chart (Runtime Sample)
613
Examples
614
How to: Add a Fibonacci Indicator to a Chart
How to: Add a Fibonacci Indicator to a Chart (Runtime Sample)
Annotations
How to: Create a Text Annotation Anchored to a Series Point
How to: Create an Image Annotation Anchored to a Chart or Pane
How to: Add an Annotation at Runtime
End-User Interaction
Hit Testing, Hot-Tracking and Selection
How to: Determine which Chart Element Is Hovered by the Mouse Pointer
How to: Determine which Series Point Is Located Under the Test Point
How to: Show a Tooltip with a Series Point's Data
How to: Show Series Labels Only for Hot-tracked Points
How to: Implement Custom Hot-Tracking and Selection
How to: Provide a Custom Cursor for a Chart
How to: Provide Interactive Editing for Series Points
How to: Provide Interactive Editing for a Constant Line
How to: Create a Drill-Dow n Chart
How to: Show Tooltips for a W ebChartControl
How to: Format Values in a Crosshair Cursor via a Label's Patterns
Scrolling and Zooming

How to: Make a Diagram Scrollable and Limit the Scrolling Range of Its Axis
How to: Individually Adjust Axes Scrolling (Runtime Sample)
How to: Individually Adjust Axes Zooming (Runtime Sample)
Chart Wizard
How to: Invoke the Chart Wizard at Runtime
How to: Change the Page Order in a W izard
How to: Add a New Page to a Wizard
How to: Hide Certain Tabs on a W izard's Page
Producing Output
Storing Chart Definitions
How to: Save and Restore a Layout
Printing
How to: Print a Chart and Show Its Print Preview
How to: Use the PrintableComponentLink to Print DevExpress Controls
Exporting
How to: Export a Chart to PDF
How to: Export a Chart to HTML and MHT
How to: Export a Chart to XLS
614
Examples
615
How to: Export a Chart to Image
Localization
How to: Localize DevExpress W inForms Controls Using Satellite Assemblies
How to: Localize DevExpress Controls by Changing Default Resources
How to: Replace Default Resources with Their Equivalents
615
Examples
616
General
How to: Add a Chart to a Windows Forms Application
Charting > Examples > How to: Add a Chart to a W indows Forms Application
The follow ing example demonstrates how to add the ChartControl to a form. Note that the Chart Control can be
added to your charting application at both design time and runtime.
Design time.
By default, the ChartControl item is added to the DX.12.2: Data toolbox tab of the VS IDE. So, to add the
Chart Control to your project, simply drag the corresponding toolbox item, and drop it onto the form.
Note
W hile adding the ChartControl, the Chart Wizard window may be invoked (in case its "Show wizard every time a
new chart is added" option is enabled). Click Cancel if you don't w ant to use it, or go through its steps to customize
the initial look of your chart.
Runtime.
To add a Chart Control to a form at runtime, don't forget to inclide all necessary assemblies to the
References list of your project.
C#
C opy C ode
using System.Drawing;
using System.Windows.Forms;
using DevExpress.XtraCharts;
// ...
private void OnButtonClick(object sender, System.EventArgs e) {
// Create a new Chart control.
ChartControl chart = new ChartControl();
// Set the chart's location.
chart.Location = new Point(10, 10);
// Perform any other initialization here.
// ...
// ...
// Add the chart to the Form.
this.Controls.AddRange(new Control[] {chart});
}
Visual Basic
C opy C ode
616
Examples
617
Imports System.Drawing
Imports System.Windows.Forms
Imports DevExpress.XtraCharts
' ...
Private Sub OnButtonClick(sender As Object, e As System.EventArgs) _
Handles Button1.Click
' Create a new Chart control.
Dim chart As New ChartControl()
' Set the chart's location.
chart.Location = New Point(10, 10)
' Perform any other initialization here.
' ...
' ...
' Add the chart to the Form.
Me.Controls.AddRange(New Control() {chart})
End Sub
617
Examples
618
How to: Add a Chart to a Web Application

Charting > Examples > How to: Add a Chart to a W eb Application
This tutorial demonstrates how to add the WebChartControl to a W eb Page at design time.
By default, the WebChartControl item is added to the DX.12.2: Visualization toolbox tab of the Visual Studio IDE.
So, to add the Web Chart Control to your project, simply drag the corresponding toolbox item, and drop it onto
the form.
After that, you can add series (of either 2D series view s or 3D series views) to your chart, and populate them w ith
data.
Note
After a W ebChartControl is dropped onto a page, your w eb application's Web.config file is affected. To learn more
on these changes, refer to Adding a Web Chart.
For specific information on working with XtraCharts in an ASP.NET platform, refer to Web Charting Specifics.
See Also
How to: Add a Chart to a W eb Page (Runtime Sample)
618
Examples
619
Creating Charts
Providing Data
Charting > Examples > How to: Bind Individual Chart Series to Data
This tutorial demonstrates how to bind a chart to an external data source, manually add a series to the chart, and
adjust its data bindings. This means that it is possible to provide an individual data source for each series.
To learn how to manually bind a chart's series to data, do the follow ing.
Create a Chart and Bind it to Data
Specify a Series Data Source
Populate w ith Data at Design and Runtime
Customize the Chart
Get the Result
1.Start Microsoft Visual Studio (2008, 2010 or 2012) and create a new Windows Forms Application or
open an existing one.
2.From the DX.12.2: Visualization toolbox tab, drop the ChartControl onto the form.
Note that in this instance the Chart W izard may be invoked (if its "Show w izard every time a new chart
is added" option is enabled). In this example, we don't need to use the w izard, so click the Cancel
button to close the W izard and manually customize the chart.
Note
For the chart to occupy all the available space on the form, click the chart's smart tag, and in its actions list, click
Dock in parent container.
3.To define a data source for the chart, click its smart tag, and in its actions list, expand the Choose Data
Source drop-dow n list and click on Add Project Data Source... link.
619
Examples
620
The Data Source Configuration Wizard appears. It allow s you to select a data source.
4.In the W izard's first page, select the Database icon and click Next.
5.On the follow ing page, click New Connection and specify the path to the Northwind database file (leave
the Password option blank). Then, you may use the Test Connection option to test data source
availability.
620
Examples
621
To proceed, click Next.

Note
You can choose betw een adding the file to your project or leaving it in its original location. For now , select No, as
this example is not intended to change database data. For more information on Visual Studio behavior, see the
"How to: Manage Local Data Files in Your Project" article in MSDN.
6.Click Next on the following page, to save the created connection string to the configuration file.
621
Examples
622
7.Now , choose the tables or views containing information required for the chart. Select the "Products"
table as shown below and click Finish.
622
Examples
623
As a result, Visual Studio w ill generate a set of classes for data manipulation w ithin the project. The main ones
are:
nwindDataSet - represents a DataSet object (a collection of tables, relationships, and constraints), which
contains the Products table from the Northwind database.
productsTableAdapter - represents a TableAdapter object, providing communication between the
application and a database. Its methods are used for executing queries and stored procedures, fetching
data and filling DataTables in DataSets, and sending data back to the database. It is assigned to the
ChartControl.DataAdapter property.
productsBindingSource - represents a System.Windows.Forms.BindingSource component, used to
simplify the data binding of the nw indDataSet to the ChartControl. It is assigned to the ChartControl.
DataSource property.
Now, the chart has been bound to data. The next steps specify which data fields should be used to provide data
for the chart's series.
Specify a Series Data Source
8.Now , let's add series to the chart. To do this, click the chart's smart tag and in its actions list, choose
the Series... link.
623
Examples
624
9.In the invoked Series Collection Editor, click Add..., and select the Bar view.
Note
After you create a series, the chart displays fake data, to give you an idea of what the chart w ill look like after
genuine data is provided.
10.Now , sw itch to the Properties tab on the right of the editor's w indow and make the following
assignments for the Series1 properties.
- set the SeriesBase.ArgumentDataMember property to the ProductName data field;

- and, the only value of the SeriesBase.ValueDataMembers property to UnitPrice.
Note
In most scenarios, it is unnecessary to specify the Series.DataSource property.
11.To limit the number of data points in the series, click the ellipsis button for the SeriesBase.DataFilters
property.
In the invoked Data Filter Collection Editor, click Add, and for the created filtering criterion, set its
DataFilter.ColumnName to CategoryID and DataFilter.Value to 4. And leave the DataFilter.Condition
property set to its default value (Equal).
624
Examples
625
Populate with Data at Design and Runtime

12.If you w ant to see how the resulting chart w ill finally look at design time, click its smart tag, and in its
actions list, click Populate. This w ill redraw the chart using obtained data.
At runtime, Visual Studio automatically adds the follow ing code to the form's Load event, and normally
you don't need to add it manually.
C#
C opy C ode
private void Form1_Load(object sender, EventArgs e) {

// TODO: This line of code loads data into the 'nwindDataSet.Products' table.
// You can move, or remove it, as needed.
this.productsTableAdapter.Fill(this.nwindDataSet.Products);
}
Visual Basic
C opy C ode
Private Sub Form1_Load(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles MyBase.Load
' TODO: This line of code loads data into the 'productsDataSet.Products' table.
' You can move, or remove it, as needed.
Me.productsTableAdapter.Fill(Me.productsDataSet.Products)
End Sub
Customize the Chart
13.Now , you can adjust the following options.
Adjust the X-axis labels.
To prevent lengthy axis labels from overlapping, select the X-axis, and in the Properties w indow,
expand its Axis2D.Label property. Then, set the AxisLabel.Angle property to -35, and enable the
AxisLabelItemBase.Antialiasing property. Alternatively, you can use the AxisLabel.Staggered property.
Adjust the series-view-specific options.
For the created series, it is possible to color each Bar individually. To achieve this, select the series and
in the Properties window , expand its SeriesBase.View property. Among the set of the view-type-specific
options, locate and enable the SeriesViewColorEachSupportBase.ColorEach property.
Then, for the series, expand its SeriesBase.LegendPointOptions property, and set the PointOptions.
PointView to ArgumentAndValues.
Adjust the legend.
Now , each data point is represented in the chart's legend by a separate item, displaying a pair of point
arguments and their values. To better position the legend, select it, and in the Properties window , set
its Legend.Direction to LeftToRight, Legend.AlignmentHorizontal to Center, and Legend.
AlignmentVertical to BottomOutside.
Add a chart title.
To create a title for your chart, select it, and in the Properties window , click the ellipsis button for the
ChartControl.Titles property. Then, in the invoked collection editor click Add, and for the created title, set
its Title.Text and other options.
Adjust the series point labels.
To hide the series labels, disable the SeriesLabelBase.Visible property. Or, you can enable automatic
625
Examples
626
collision detection and resolution for series labels via the SeriesLabelBase.ResolveOverlappingMode
property.
Create additional elements.
There are plenty of special elements that you can enable for your charts, such as annotations,
trendlines, strips, regression lines and Fibonacci indicators. To produce a clear representation of large
amounts of data, you can enable logarithmic axis scaling (via the AxisBase.Logarithmic property), enable
scale breaks (via the Axis.ScaleBreaks property), and provide zooming and scrolling capabilities.
Change the chart's appearance.
To specify a color for series points, use the ChartControl.PaletteBaseColorNumber, ChartControl.
PaletteName and ChartControl.AppearanceName properties. For more information on their use, refer to
Appearance Customization.
Get the Result

The result is show n in the following image.
See Also
626
Examples
627
How to: Bind Individual Chart Series to Data (Runtime Sample)

Charting > Examples > How to: Bind Individual Chart Series to Data (Runtime Sample)
Show Me
The complete sample project is available in the DevExpress Code Central database at http://w ww .devexpress.com/
example=E116. Depending on the target platform type (ASP.NET, WinForms, etc), you can either run this example
online or dow nload an auto-executable sample.
The follow ing example demonstrates how to bind a chart to data at runtime via binding its individual series to a
particular datasource. It uses the same approach as the design-time example, but another data table is
generated in this code to simplify the example.
Note
Don't forget to include all necessary assemblies to the References list of your project.
C#
C opy C ode
(Form1.cs)
using System;
using System.Data;
// ...
namespace BindIndividualSeriesRuntimeCS {
public partial class Form1 : Form {
public Form1() {
InitializeComponent();
}
private DataTable CreateChartData(int rowCount) {
// Create an empty table.
DataTable table = new DataTable("Table1");
// Add two columns to the table.
table.Columns.Add("Argument", typeof(Int32));
table.Columns.Add("Value", typeof(Int32));
// Add data rows to the table.
Random rnd = new Random();
DataRow row = null;
for (int i = 0; i < rowCount; i++) {
row = table.NewRow();
row["Argument"] = i;
row["Value"] = rnd.Next(100);
table.Rows.Add(row);
}
return table;
}
// Create a chart.
// Create an empty Bar series and add it to the chart.
Series series = new Series("Series1", ViewType.Bar);
chart.Series.Add(series);
// Generate a data table and bind the series to it.
series.DataSource = CreateChartData(50);
// Specify data members to bind the series.
series.ArgumentScaleType = ScaleType.Numerical;
series.ArgumentDataMember = "Argument";
series.ValueScaleType = ScaleType.Numerical;
series.ValueDataMembers.AddRange(new string[] { "Value" });
// Set some properties to get a nice-looking chart.
((SideBySideBarSeriesView)series.View).ColorEach = true;
((XYDiagram)chart.Diagram).AxisY.Visible = false;
chart.Legend.Visible = false;
627
Examples
628
// Dock the chart into its parent and add it to the current form.
chart.Dock = DockStyle.Fill;
this.Controls.Add(chart);
}
}
}
Visual Basic
C opy C ode
(Form1.vb)
Imports System
Imports System.Data
' ...
Public Class Form1
Private Function CreateChartData(ByVal rowCount As Integer) As DataTable
' Create an empty table.
Dim Table As New DataTable("Table1")
' Add two columns to the table.
Table.Columns.Add("Argument", GetType(Int32))
Table.Columns.Add("Value", GetType(Int32))
' Add data rows to the table.
Dim Rnd As New Random()
Dim Row As DataRow = Nothing
Dim i As Integer
For i = 0 To rowCount - 1
Row = Table.NewRow()
Row("Argument") = i
Row("Value") = Rnd.Next(100)
Table.Rows.Add(Row)
Next i
Return Table
End Function
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) _
Handles MyBase.Load
' Create a chart.
Dim Chart As New ChartControl()
' Create an empty Bar series and add it to the chart.
Dim Series As New Series("Series1", ViewType.Bar)
Chart.Series.Add(Series)
' Generate a data table and bind the series to it.
Series.DataSource = CreateChartData(50)
' Specify data members to bind the series.
Series.ArgumentScaleType = ScaleType.Numerical
Series.ArgumentDataMember = "Argument"
Series.ValueScaleType = ScaleType.Numerical
Series.ValueDataMembers.AddRange(New String() {"Value"})
' Set some properties to get a nice-looking chart.
CType(Series.View, SideBySideBarSeriesView).ColorEach = True
CType(Chart.Diagram, XYDiagram).AxisY.Visible = False
Chart.Legend.Visible = False
' Dock the chart into its parent and add it to the current form.
Chart.Dock = DockStyle.Fill
Me.Controls.Add(Chart)
End Sub
End Class
See Also
628
Examples
629

Charting > Examples > How to: Bind a Chart to Data Using Series Templates
This tutorial demonstrates how to create a chart bound to data, so that all series are auto-created based on a
common
, which specifies universal options for all series. This is possible w hen the data for all series (their
names, along with points' arguments and values) are stored in the same
.
Note that in this scenario, the view type and certain other settings, will be the same for all series.
In this example, w e'll bind a chart to the "GSP" table in the Gsp database (the gsp.mdb file shipped with the
installation of the XtraCharts Suite). This table contains the Gross State Product (GSP) statistics for certain US
regions.
To bind a chart to data using series templates, do the following.
Create Data Objects and Bind a ChartControl
Specify a Series Data Member and Adjusting a Series Template
Populate w ith Data at Runtime (Optional)
Customize the Chart
Get the Result
Create Data Objects and Bind a ChartControl
1.Start Microsoft Visual Studio (2008, 2010 or 2012) and create a new Windows Forms Application or
open an existing one.
2.Drop the ChartControl onto the form.
To dock the ChartControl in its container form, you can set its Dock property to Fill.
Note that after you drop the chart control, the Chart Wizard may be invoked (if its "Show wizard every
time a new chart is added" option is enabled). In this example, w e don't need to use the Wizard, so
click Cancel to close its w indow.
3.To create a data source for a chart, select it and click its smart tag. In the invoked actions list, expand
the Data Source drop-down selector, and click the Add Project Data Source... link.
Then, proceed through the follow ing steps suggested by the invoked Data Source Configuration W izard.
4.In the first step, choose the Database icon and click Next.
629
Examples
630
5.Then, specify the GSP database. If it doesn't appear in the drop-dow n list, click the New Connection...
button, and specify the path to the MDB file.
Click Next to proceed.

6.On the follow ing page, you are asked whether or not the created connection string should be saved to
630
Examples
631
the configuration file of your project.
Leave the default setting and click Next.

7.The final page allows you to choose tables, w hich should be obtained from the database.
631
Examples
632
Select the "GSP" table and click Finish.

After performing the above steps, Visual Studio generates a set of classes that support ADO.NET architecture,
some of w hich are then auto-assigned to appropriate properties of your chart control. In particular:
- gspDataSet (a DataSet object that is a collection of possibly inter-related tables) containing the gspDataTable;
- gSPBindingSource (a System.Windows.Forms.BindingSource component, w hich provides data in the chart's
dataset) is auto-assigned to the ChartControl.DataSource property;
- gSPTableAdapter (
object, w hich contains methods to get and post data from the specified table in
the database) is auto-assigned to the ChartControl.DataAdapter property;
This means that the chart has been successfully bound to the data source. The next steps explain how to assign
its data fields to the chart's series template.
Specify a Series Data Member and Adjusting a Series Template
8.Now , let's specify a data field, for as many series to be auto-created as there are records in this field.
This is defined via the ChartControl.SeriesDataMember property, which is set to Y ear in this example.
632
Examples
633
Note that series names (as they will appear in the Legend) w ill correspond to this field's values.
9.Now , adjust a series template w hich is accessed via the chart's ChartControl.SeriesTemplate property.
In particular, it is required to define the data fields w here series obtain information for their point
and
.
So, set the SeriesBase.ArgumentDataMember property to Region, ...
... and the only value in the SeriesBase.ValueDataMembers collection to GSP.
Note that some series view types may require more than one value for each argument (such as Stock or
Bubble series). In such cases, multiple data members should be specified for the SeriesBase.
ValueDataMembers collection.
633
Examples
634
Now, the chart possesses complete information about the data source and its data members. However, it still
doesn't show the real data at design time. To populate your chart with genuine data, click the chart's smart tag
and click Populate.
Populate with Data at Runtime (Optional)
Note that Microsoft Visual Studio automatically adds the following code to the form's Load event, and normally you
don't need to add it manually.
10.To populate a
object with data from the database, the corresponding
's Fill
method can be used. In this example, the chart's
is populated w ith data using the Fill method
of the gSPTableAdapter object. The form's Load event is used to handle data loading.
C#
C opy C ode

// TODO: This line of code loads data into the 'gspDataSet.GSP' table.
// You can move, or remove it, as needed.
this.gSPTableAdapter.Fill(this.gspDataSet.GSP);
}
Visual Basic
C opy C ode
Private Sub Form1_Load(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles MyBase.Load
' TODO: This line of code loads data into the 'gspDataSet.GSP' table.
' You can move or remove it as needed.
Me.gSPTableAdapter.Fill(Me.gspDataSet.GSP)
End Sub
Customize the Chart
Finally, you can specify optional properties, which w ill be applied to all the auto-created series.
11.Adjust the Series Name Template
By default, the name for every auto-created series (as it appears in the Legend) is obtained from an
appropriate data field. However, you may wish to add some prefixes or postfixes to these names, which
can be done via the SeriesNameTemplate.BeginText and SeriesNameTemplate.EndText properties.
Or w hen it is required to completely substitute the auto-defined names w ith custom ones, this can be
done in the ChartControl.CustomDrawSeries event, by specifying the CustomDraw SeriesEventArgs.
LegendText property. For a code example, refer to How to: Change the Names for Auto-Created Series.
12.Other Tasks
To specify a color for series points, use the ChartControl.PaletteBaseColorNumber, ChartControl.
PaletteName and ChartControl.AppearanceName properties. For more information on their use, refer to
Appearance Customization.
Get the Result
Run the project and view the result.
634
Examples
635
See Also
635
Examples
636
Charting > Examples > How to: Bind a Chart to Data Using Series Templates (Runtime Sample)
Show Me
example=E3. Depending on the target platform type (ASP.NET, W inForms, etc), you can either run this example
The follow ing example demonstrates how to bind a chart to data at runtime using series templates. It uses the
same approach as the design-time example, but another data table is generated in this code to simplify the
example. For this example to w ork correctly, don't forget to include all necessary assemblies to the References list
of your project.
C#
C opy C ode
(Form1.cs)
using System;
using System.Data;
// ...
namespace BindUsingTemplatesRuntimeCS {
public Form1() {
}
private DataTable CreateChartData() {
// Add three columns to the table.
table.Columns.Add("Month", typeof(String));
table.Columns.Add("Section", typeof(String));
table.Rows.Add(new object[] { "Jan", "Section1", 10 });
table.Rows.Add(new object[] { "Feb", "Section1", 20 });
table.Rows.Add(new object[] { "March", "Section1", 15 });
return table;
}
// Create a chart.
// Generate a data table and bind the chart to it.
chart.DataSource = CreateChartData();
// Specify data members to bind the chart's series template.
chart.SeriesDataMember = "Month";
chart.SeriesTemplate.ArgumentDataMember = "Section";
chart.SeriesTemplate.ValueDataMembers.AddRange(new string[] {"Value"});
// Specify the template's series view.
chart.SeriesTemplate.View = new StackedBarSeriesView();
// Specify the template's name prefix.
chart.SeriesNameTemplate.BeginText = "Month: ";
// Dock the chart into its parent, and add it to the current form.
}
}
}
636
Examples
Visual Basic
637
C opy C ode
(Form1.vb)
Imports System
Imports System.Data
' ...
Public Class Form1
Private Function CreateChartData() As DataTable
Dim Table As New DataTable("Table1")
' Add three columns to the table.
Table.Columns.Add("Month", GetType([String]))
Table.Columns.Add("Section", GetType([String]))
Table.Columns.Add("Value", GetType(Int32))
Table.Rows.Add(New Object() {"Jan", "Section1", 10})
Table.Rows.Add(New Object() {"Jan", "Section2", 20})
Table.Rows.Add(New Object() {"Feb", "Section1", 20})
Table.Rows.Add(New Object() {"Feb", "Section2", 30})
Table.Rows.Add(New Object() {"March", "Section1", 15})
Table.Rows.Add(New Object() {"March", "Section2", 25})
Return Table
End Function
Handles MyBase.Load
' Create a chart.
Dim Chart As New ChartControl()
' Generate a data table and bind the chart to it.
Chart.DataSource = CreateChartData()
' Specify data members to bind the chart's series template.
Chart.SeriesDataMember = "Month"
Chart.SeriesTemplate.ArgumentDataMember = "Section"
Chart.SeriesTemplate.ValueDataMembers.AddRange(New String() {"Value"})
' Specify the template's series view.
Chart.SeriesTemplate.View = New StackedBarSeriesView()
' Specify the template's name prefix.
Chart.SeriesNameTemplate.BeginText = "Month: "
' Dock the chart into its parent, and add it to the current form.
Chart.Dock = DockStyle.Fill
Me.Controls.Add(Chart)
End Sub
End Class
Show Me
See Also
637
Examples
638
Charting > Examples > How to: Individually Change the View Type of Automatically Created Series
This example demonstrates how an auto-created series (a series generated automatically based on the series
template settings) can be accessed at runtime, to individually change its view type.
This is performed in a special BoundDataChanged event of the chart control.
C#
C opy C ode
using System;
using System.Data;
// ...
private DataTable CreateChartData() {
// Add three columns to the table.
table.Columns.Add("Month", typeof(String));
table.Columns.Add("Section", typeof(String));
return table;
}
// Create a chart.
// Generate a data table and bind the chart to it.
chart.DataSource = CreateChartData();
chart.SeriesDataMember = "Month";
chart.SeriesTemplate.ArgumentDataMember = "Section";
chart.SeriesTemplate.ValueDataMembers.AddRange(new string[] { "Value" });
chart.SeriesTemplate.View = new SideBySideBarSeriesView();
// Specify the BoundDataChanged event handler.
chart.BoundDataChanged +=
new BoundDataChangedEventHandler(chart_BoundDataChanged);
// Specify the template's name prefix.
chart.SeriesNameTemplate.BeginText = "Month: ";
}
private void chart_BoundDataChanged(object sender, EventArgs e) {
ChartControl chart = (ChartControl)sender;
// Change the view of the "Month: Feb" series from
// SideBySideBarSeriesView to LineSeriesView.
Series feb = chart.GetSeriesByName("Month: Feb");
if(feb != null)
feb.ChangeView(ViewType.Line);
// Change the view of the "Month: March" series from
638
Examples
639
// SideBySideBarSeriesView to SplineSeriesView.
Series march = chart.GetSeriesByName("Month: March");
if(march != null)
march.ChangeView(ViewType.Spline);
}
Visual Basic
C opy C ode
Imports System
Imports System.Data
' ...
Private Function CreateChartData() As DataTable
Dim table As New DataTable("Table1")
' Add three columns to the table.
table.Columns.Add("Month", GetType(String))
table.Columns.Add("Section", GetType(String))
table.Columns.Add("Value", GetType(Int32))
table.Rows.Add(New Object() { "Jan", "Section1", 10 })
table.Rows.Add(New Object() { "Feb", "Section1", 20 })
table.Rows.Add(New Object() { "March", "Section1", 30 })
Return table
End Function
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
' Create a chart.
' Generate a data table and bind the chart to it.
chart.DataSource = CreateChartData()
chart.SeriesDataMember = "Month"
chart.SeriesTemplate.ArgumentDataMember = "Section"
chart.SeriesTemplate.ValueDataMembers.AddRange(New String() { "Value" })
chart.SeriesTemplate.View = New SideBySideBarSeriesView()
' Specify the BoundDataChanged event handler.
AddHandler chart.BoundDataChanged, AddressOf chart_BoundDataChanged
' Specify the template's name prefix.
chart.SeriesNameTemplate.BeginText = "Month: "
chart.Dock = DockStyle.Fill
Me.Controls.Add(chart)
End Sub
Private Sub chart_BoundDataChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim chart As ChartControl = CType(sender, ChartControl)
' Change the view of the "Month: Feb" series from
' SideBySideBarSeriesView to LineSeriesView.
Dim feb As Series = chart.GetSeriesByName("Month: Feb")
If feb IsNot Nothing Then
feb.ChangeView(ViewType.Line)
End If
' Change the view of the "Month: March" series from
' SideBySideBarSeriesView to SplineSeriesView.
Dim march As Series = chart.GetSeriesByName("Month: March")
639
Examples
640
If march IsNot Nothing Then

march.ChangeView(ViewType.Spline)
End If
End Sub
Show Me
See Also
Series View s
640
Examples
641
How to: Change Colors of Automatically Created Series

Charting > Examples > How to: Change Colors of Automatically Created Series
This example demonstrates how to individually set the color of auto-created series at runtime. To accomplish this,
the ChartControl.BoundDataChanged event should be handled in the follow ing way.
C#
C opy C ode
using System;
// ...
private void chartControl1_BoundDataChanged(object sender, EventArgs e) {
for(int i = 0; i < chartControl1.Series.Count; i++) {
BarSeriesView view = (BarSeriesView)chartControl1.Series[i].View;
view.Color = Color.Blue;
view.FillStyle.FillMode = FillMode.Gradient;
((GradientFillOptionsBase)view.FillStyle.Options).Color2 = Color.Beige;
}
}
Visual Basic
Imports
Imports
Imports
Imports
' ...
Private
Handles
For
C opy C ode
System
System.Drawing
System.Windows.Forms
DevExpress.XtraCharts
Sub chartControl1_BoundDataChanged(ByVal sender As Object, ByVal e As EventArgs) _

chartControl1.BoundDataChanged
i As Integer = 0 To chartControl1.Series.Count - 1
Dim view As BarSeriesView = CType(chartControl1.Series(i).View, BarSeriesView)
view.Color = Color.Blue
view.FillStyle.FillMode = FillMode.Gradient
CType(view.FillStyle.Options, GradientFillOptionsBase).Color2 = Color.Beige
Next i
End Sub
641
Examples
642
How to: Bind Series to Data and Display Them In Separate Panes (Runtime Sa
Charting > Examples > How to: Bind Series to Data and Display Them In Separate Panes (Runtime Sample)
This example demonstrates how to display a chart's series in separate panes.
For this example to work correctly, do the follow ing.
1.Start MS Visual Studio (2008 or 2010), and create a new Windows Forms Application, or open an
existing one.
2.Include all necessary assemblies to the References list of your project.
3.Open the Solution Explorer window (e.g. by pressing CTRL+ALT+L), right-click the
WindowsApplication1 item and in the invoked menu, point to Add and click Existing Item.... Then,
locate the gsp.mdb file (it is shipped with XtraCharts suite and located in the directory, w here you
installed DevExpress demos) and click Add. In the displayed dialog, select the GSP table of this
database.
A dataset (named gspDataSet) is automatically created after performing the above steps.
4.Drop a button onto the form and add the following code to the Button1.Click event handler.
C#
C opy C ode
using System;
using DevExpress.XtraEditors;
using gspDataSetTableAdapters;
// ...
private void button1_Click(object sender, EventArgs e) {
// Create and customize a form.
XtraForm form = new XtraForm();
form.Text = "Multiple Panes";
form.Size = new Size(800, 600);
// Create a chart.
// Initialize a dataset and fill the data adapter.
gspDataSet dataSet = new gspDataSet();
GSPTableAdapter dataAdapter = new GSPTableAdapter();
dataAdapter.Fill(dataSet.GSP);
// Define the chart's datasource.
chart.DataSource = dataSet.GSP;
// Create a series. Define its data member and create a data filter, to display a required year.
Series series1 = new Series();
series1.Name = "2003";
series1.ArgumentDataMember = "Region";
series1.ValueDataMembers[0] = "GSP";
series1.DataFilters.Add(new DataFilter("Year", "System.Int32",
DataFilterCondition.Equal, 2003));
// Create a second series in a similar manner.
Series series2 = new Series();
series2.Name = "2004";
series2.ArgumentDataMember = "Region";
series2.ValueDataMembers[0] = "GSP";
series2.DataFilters.Add(new DataFilter("Year", "System.Int32",
DataFilterCondition.Equal, 2004));
// Add both series to the chart's collection.
chart.Series.Add(series1);
chart.Series.Add(series2);
// Initialize a chart's diagram.
XYDiagram diagram = (XYDiagram)chart.Diagram;
// Create a new pane.
XYDiagramPane secondPane = new XYDiagramPane("The Pane's Name");
642
Examples
643
// Add the pane to the diagram's collection.

diagram.Panes.Add(secondPane);
((XYDiagramSeriesViewBase)series2.View).Pane = secondPane;
// Add the chart to the form and fit it to the parent form's size.
form.Controls.Add(chart);
// Display the form containing the chart.
form.Show();
}
Visual Basic
C opy C ode
Imports System
Imports DevExpress.XtraEditors
Imports gspDataSetTableAdapters
' ...
Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs) _
Handles button1.Click
' Create and customize a form.
Dim form As XtraForm = New XtraForm()
form.Text = "Multiple Panes"
form.Size = New Size(800, 600)
' Create a chart.
Dim chart As ChartControl = New ChartControl()
' Initialize a dataset and fill the data adapter.
Dim dataSet As gspDataSet = New gspDataSet()
Dim dataAdapter As GSPTableAdapter = New GSPTableAdapter()
dataAdapter.Fill(dataSet.GSP)
' Define the chart's datasource.
chart.DataSource = dataSet.GSP
' Create a series. Define its data member and create a data filter, to display a required year.
Dim series1 As Series = New Series()
series1.Name = "2003"
series1.ArgumentDataMember = "Region"
series1.ValueDataMembers(0) = "GSP"
series1.DataFilters.Add(New DataFilter("Year", "System.Int32", _
DataFilterCondition.Equal, 2003))
' Create a second series in a similar manner.
Dim series2 As Series = New Series()
series2.Name = "2004"
series2.ArgumentDataMember = "Region"
series2.ValueDataMembers(0) = "GSP"
series2.DataFilters.Add(New DataFilter("Year", "System.Int32", _
DataFilterCondition.Equal, 2004))
' Add both series to the chart's collection.
chart.Series.Add(series1)
chart.Series.Add(series2)
' Initialize a chart's diagram.
Dim diagram As XYDiagram = CType(chart.Diagram, XYDiagram)
' Create a new pane.
Dim secondPane As XYDiagramPane = New XYDiagramPane("The Pane's Name")
' Add the pane to the diagram's collection.
diagram.Panes.Add(secondPane)
CType(series2.View, XYDiagramSeriesViewBase).Pane = secondPane
' Add the chart to the form and fit it to the parent form's size.
form.Controls.Add(chart)
' Display the form containing the chart.
form.Show()
643
Examples
644
End Sub
Show Me
See Also
Panes
644
Examples
645
How to: Bind a Chart to an MDB Database (Runtime Sample)

Charting > Examples > How to: Bind a Chart to an MDB Database (Runtime Sample)
This example demonstrates how to bind a chart to an MDB database at runtime.
C#
C opy C ode
using System;
using System.Data;
using System.Data.OleDb;
// ...
// Create an empty chart.
// Create data objects.
OleDbDataAdapter adapter = new OleDbDataAdapter("SELECT * FROM GSP",
@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=..\..\gsp.mdb");
DataSet ds = new DataSet();
//adapter.FillSchema(ds, SchemaType.Source);
adapter.Fill(ds);
// Bind the chart to data.
chart.DataSource = ds;
chart.DataAdapter = adapter;
chart.SeriesDataMember = "Table.Year";
chart.SeriesTemplate.ArgumentDataMember = "Table.Region";
chart.SeriesTemplate.ValueDataMembers.AddRange(new string[] { "Table.GSP" });
chart.SeriesTemplate.View = new StackedBarSeriesView();
}
Visual Basic
C opy C ode
Imports System
Imports System.Data
Imports System.Data.OleDb
' ...
Handles MyBase.Load
' Create an empty chart.
' Create data objects.
Dim adapter As New OleDbDataAdapter("SELECT * FROM GSP", _
"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=..\..\gsp.mdb")
Dim ds As New DataSet()
'adapter.FillSchema(ds, SchemaType.Source);
adapter.Fill(ds)
' Bind the chart to data.
chart.DataSource = ds
chart.DataAdapter = adapter
chart.SeriesDataMember = "Table.Year"
chart.SeriesTemplate.ArgumentDataMember = "Table.Region"
chart.SeriesTemplate.ValueDataMembers.AddRange(New String() { "Table.GSP" })
645
Examples
646
chart.SeriesTemplate.View = New StackedBarSeriesView()

Me.Controls.Add(chart)
End Sub
Show Me
646
Examples
647
How to: Bind a Chart to an Array List

Charting > Examples > How to: Bind a Chart to an Array List
This tutorial demonstrates how to bind a chart to data represented in an ArrayList object
Show Me
To bind a chart to an array list, do the following.
existing one.
2.Add a chart to the form.
3.Declare a class that represents an individual record. The code below declares a class with the ID, Name
and Age public properties. These properties w ill be data source fields.
C#
C opy C ode
public class Record {

int id, age;
string name;
public Record(int id, string name, int age) {
this.id = id;
this.name = name;
this.age = age;
}
public int ID {
get { return id; }
set { id = value; }
}
public string Name {
get { return name; }
set { name = value; }
}
public int Age {
get { return age; }
set { age = value; }
}
}
Visual Basic
C opy C ode
Public Class Record

Dim _id, _age As Integer
Dim _name As String
Public Sub New(ByVal id As Integer, ByVal name As String, ByVal age As Integer)
Me._id = id
Me._name = name
Me._age = age
End Sub
Public Property ID() As Integer
Get
Return _id
End Get
Set(ByVal Value As Integer)
_ID = Value
End Set
End Property
Public Property Name() As String
Get
Return _name
647
Examples
648
End Get
Set(ByVal Value As String)
_name = Value
End Set
End Property
Public Property Age() As Integer
Get
Return _age
End Get
Set(ByVal Value As Integer)
_age = Value
End Set
End Property
End Class
4.Once the record class has been declared, the data source object can be filled with records. This example
will use an ArrayList as the report's data source. So, there is no need to create a custom object
implementing the IList, ITypedList or IBindingList interfaces.
The code below fills the ArrayList with records and assigns it to the chart's ChartControl.DataSource
property. Then, you can adjust the SeriesBase.ArgumentDataMember and SeriesBase.
ValueDataMembers properties of the chart's series.
C#
C opy C ode

// Create a list.
ArrayList listDataSource = new ArrayList();
// Populate the list with records.
listDataSource.Add(new Record(1, "Jane", 19));
listDataSource.Add(new Record(2, "Joe", 30));
listDataSource.Add(new Record(3, "Bill", 15));
listDataSource.Add(new Record(4, "Michael", 42));
// Bind the chart to the list.
ChartControl myChart = chartControl1;
myChart.DataSource = listDataSource;
// Create a series, and add it to the chart.
Series series1 = new Series("My Series", ViewType.Bar);
myChart.Series.Add(series1);
// Adjust the series data members.
series1.ArgumentDataMember = "name";
series1.ValueDataMembers.AddRange(new string[] { "age" });
// Access the view-type-specific options of the series.
((BarSeriesView)series1.View).ColorEach = true;
series1.LegendPointOptions.Pattern = "{A}";
}
Visual Basic
C opy C ode
Private Sub Form1_Load(ByVal sender As Object, _

ByVal e As EventArgs) Handles MyBase.Load
' Create a list.
Dim listDataSource As New ArrayList()
' Populate the list with records.
listDataSource.Add(New Record(1, "Jane", 19))
listDataSource.Add(New Record(2, "Joe", 30))
listDataSource.Add(New Record(3, "Bill", 15))
listDataSource.Add(New Record(4, "Michael", 42))
' Bind the chart to the list.
Dim myChart As ChartControl = chartControl1
myChart.DataSource = listDataSource
' Create a series, and add it to the chart.
Dim series1 As New Series("My Series", ViewType.Bar)
myChart.Series.Add(series1)
648
Examples
649
' Adjust the series data members.
series1.ArgumentDataMember = "name"
series1.ValueDataMembers.AddRange(New String() { "age" })
' Access the view-type-specific options of the series.
CType(series1.View, BarSeriesView).ColorEach = True
series1.LegendPointOptions.Pattern = "{A}"
End Sub
Now, the chart has been bound to data. Run the application, and view the result.
See Also
649
Examples
650
How to: Bind a Chart to an XML Data Source

Charting > Examples > How to: Bind a Chart to an XML Data Source
This tutorial demonstrates how a chart can be bound to an XML data source. In this example, w e'll bind a chart to
the Departments.xml file, shipped with the XtraCharts suite and located in the directory, w here you installed
DevExpress demos.
To bind a chart to an XML data source, do the following.
existing one.
3.Add Bar series to the chart.
4.Handle the Form1_Load event using the following code.
C#
C opy C ode
using System;
using System.Data;
// ...
// Create a DataSet instance and, make it read the xml file.
DataSet ds = new DataSet();
ds.ReadXml(@"..\..\Departments.xml");
// Specify the dataset as the chart's data source.
chartControl1.DataSource = ds;
// Specify the argument and value data members for the series.
chartControl1.Series[0].ArgumentDataMember = "Table.Department";
chartControl1.Series[0].ValueDataMembers.AddRange(new string[] { "Table.Budget" });
// Define an appropriate scale type for the series points' values.
chartControl1.Series[0].ValueScaleType = ScaleType.Numerical;
}
Visual Basic
C opy C ode
Imports System
Imports System.Data
' ...
Handles MyBase.Load
' Create a DataSet instance and, make it read the xml file.
Dim ds As New DataSet()
ds.ReadXml("..\..\Departments.xml")
' Specify the dataset as the chart's data source.
chartControl1.DataSource = ds
' Specify the argument and value data members for the series.
chartControl1.Series(0).ArgumentDataMember = "Table.Department"
chartControl1.Series(0).ValueDataMembers.AddRange(New String() { "Table.Budget" })
' Define an appropriate scale type for the series points' values.
chartControl1.Series(0).ValueScaleType = ScaleType.Numerical
End Sub
650
Examples
651
Show Me
651
Examples
652
How to: Bind a Chart to an XPO Data Source

Charting > Examples > How to: Bind a Chart to an XPO Data Source
This tutorial demonstrates how a chart can be bound to an eXpress Persistent Objects (XPO) data source. XPO
is a DevExpress technology that gives you the freedom to build true business objects w ithout having to deal with
the tedious complexities of mapping them onto database tables. eXpress Persistent Objects for .NET completely
abstracts the database layer from the developer, leaving him or her fully in the object-oriented realm. W ith XPO,
you can build applications that are compatible with multiple database systems (currently supported are: MS
Access, MS SQL Server, MySQL, Oracle, PostgreSql, Firebird, PervasiveSQL, VistaDB, SQL Anywhere, Advantage,
DB2 and Sybase) w ithout making ANY changes to your code. For more information, refer to eXpress Persistent
Objects.
To bind a chart to an XPO data source, do the following.
existing one.
3.From the DX.12.2: Data toolbox tab, drop the XPCollection component onto the form.
4.Now , sw itch from the design view of the form to its code, and declare the XPObject class descendant.
For example, use the following code.
C#
C opy C ode
using DevExpress.Xpo;
// ...
public class SeriesRecord : XPObject {
public string Argument;
public int Value;
}
Visual Basic
C opy C ode
Imports DevExpress.Xpo
652
Examples
653
' ...
Public Class SeriesRecord
Inherits XPObject
Public Argument As String
Public Value As Integer
End Class
5.To populate the data source, handle the Form1_Load event using the follow ing code.
C#
C opy C ode

for (int i = 1; i < 11; i++) {
SeriesRecord record = new SeriesRecord();
record.Argument = "Item " + i.ToString();
record.Value = i;
xpCollection1.Add(record);
}
}
Visual Basic
C opy C ode

Handles MyBase.Load
For i As Integer = 1 To 10
Dim record As New SeriesRecord()
record.Argument = "Item " & i.ToString()
record.Value = i
xpCollection1.Add(record)
Next i
End Sub
6.Rebuild the application so that this object can be used for the XPCollection.
7.Set the ObjectClassInfo property of the XPCollection object to the SeriesRecord object.
8.Now , set the ChartControl.DataSource property to this XPCollection object.
And, define w here the chart's series should obtain data for its points' arguments and their values, set
the SeriesBase.ArgumentDataMember property to Argument, and the SeriesBase.ValueDataMembers
property to Value.
653
Examples
654
The chart is now bound to the XPO data source, and the result is show n in the following image.
Show Me
654
Examples
655
How to: Link a Chart to the PivotGridControl's Data Source

Charting > Examples > How to: Link a Chart to the PivotGridControl's Data Source
This tutorial demonstrates how you can link a ChartControl to a PivotGridControl at design time, and adjust the
options of this bridged pair. For general information, see Pivot Charting (Integration with a Pivot Grid Control).
Show Me
To link a chart to a pivot grid, do the follow ing.
existing one.
2.Drop the PivotGridControl item from the DX.12.2: Data toolbox tab onto the form, and bind it to the
"GSP" table in the gsp.mdb file that is shipped w ith the XtraCharts installation.
3.Then, drop the ChartControl onto the same form, and set its ChartControl.DataSource property to the
Pivot Grid instance.
4.At this time, all the chart's binding and layout settings are adjusted automatically, and you can launch
the application, yielding the following result.
655
Examples
656
5.To exclude the column grand totals from the chart, set the corresponding option in the chart's
ChartControl.PivotGridDataSourceOptions.
656
Examples
657
As a result, a user can choose the required rows in the Pivot Grid, to see only the actual cell values.
657
Examples
658
6.If this result is not satisfactory, adjustments to the automatic options can be made (e.g. disable the
AxisLabel.Staggered property of axis labels, and change the series view type to Line).
To so this, handle the corresponding events as the follow ing code demonstrates.
C#
C opy C ode
// ...
private void chartControl1_CustomizeXAxisLabels(object sender, CustomizeXAxisLabelsEventArgs e
e.Staggered = false;
}
private void chartControl1_BoundDataChanged(object sender, EventArgs e) {
((ChartControl)sender).SeriesTemplate.ChangeView(ViewType.Line);
}
Visual Basic
C opy C ode
' ...
Private Sub chartControl1_CustomizeXAxisLabels(ByVal sender As Object, _
ByVal e As CustomizeXAxisLabelsEventArgs) Handles chartControl1.CustomizeXAxisLabels
e.Staggered = False
End Sub
Private Sub chartControl1_BoundDataChanged(ByVal sender As Object, _
ByVal e As EventArgs) Handles chartControl1.BoundDataChanged
CType(sender, ChartControl).SeriesTemplate.ChangeView(ViewType.Line)
658
Examples
659
End Sub
The result (w ith the point labels completely hidden) is shown in the follow ing image.
For the complete list of the automatic settings, as well as the event handlers where they can be
adjusted, see Pivot Charting (Integration with a Pivot Grid Control).
See Also
Pivot Charting (Integration w ith a Pivot Grid Control)
Pivot Charting on the W eb (Integration with the ASPxPivotGrid)
659
Examples
660
How to: Create a Custom Summary Function

Charting > Examples > How to: Create a Custom Summary Function
XtraCharts provides you w ith the capability to calculate several built-in summary functions (MIN, MAX, SUM,
AVERAGE, COUNT) against series values. In addition to the provided summary functions, you can create a custom
one to calculate a summary value in any required w ay in your application. Moreover, the convenient approach of
registering custom summary functions within a particular chart instance makes it possible for your end-users to
use these functions in the Chart Wizard.
The follow ing example demonstrates how to create a custom summary function, which returns a product of two
values (Price * Count). To accomplish this task, it is required to create a summary function delegate and register it
via the ChartControl.RegisterSummaryFunction (or WebChartControl.RegisterSummaryFunction) method.
The code below illustrates how this can be done.
C#
C opy C ode
using System;
// ...
namespace WindowsApplication1 {
// Declare the Product summary function.
private static SeriesPoint[] CalcProductValue(Series series, object argument,
string[] functionArguments, DataSourceValues[] values) {
// Create an array of the resulting series points.
SeriesPoint[] points = new SeriesPoint[values.Length];
// Calculate the resulting series points as Price * Count.
for (int i = 0; i < values.Length; i++)
points[i] = new SeriesPoint(argument,
Convert.ToDouble(values[i][functionArguments[0]]) *
Convert.ToDouble(values[i][functionArguments[1]]));
// Return the result.
return points;
}
public Form1() {
// Create argument descriptions for the summary function.
SummaryFunctionArgumentDescription argument1Description =
new SummaryFunctionArgumentDescription("Price", ScaleType.Numerical);
SummaryFunctionArgumentDescription argument2Description =
new SummaryFunctionArgumentDescription("Count", ScaleType.Numerical);
// Register the summary function in a chart.
chartControl1.RegisterSummaryFunction("PRODUCT", "PRODUCT", 1,
new SummaryFunctionArgumentDescription[] {
argument1Description, argument2Description },
CalcProductValue);
// Provide a datasource for the chart.
chartControl1.DataSource = nwindDataSet.Products;
}
// This line of code loads data into the 'nwindDataSet.Products' table.
this.productsTableAdapter.Fill(this.nwindDataSet.Products);
}
}
}
Visual Basic
C opy C ode
Imports System
660
Examples
661
' ...
Public Class Form1
' Declare the Product summary function.
Private Shared Function CalcProductValue(ByVal series As Series, _
ByVal argument As Object, ByVal functionArguments() As String, _
ByVal values() As DataSourceValues) As SeriesPoint()
' Create an array of the resulting series points.
Dim points(values.Length - 1) As SeriesPoint
' Calculate the resulting series points as Price * Count.
For i As Integer = 0 To values.Length - 1
points(i) = New SeriesPoint(argument, _
Convert.ToDouble(values(i)(functionArguments(0))) * _
Convert.ToDouble(values(i)(functionArguments(1))))
Next i
' Return the result.
Return points
End Function
Public Sub New()
InitializeComponent()
' Create argument descriptions for the summary function.
Dim argument1Description As New SummaryFunctionArgumentDescription("Price", _
ScaleType.Numerical)
Dim argument2Description As New SummaryFunctionArgumentDescription("Count", _
ScaleType.Numerical)
' Register the summary function in a chart.
ChartControl1.RegisterSummaryFunction("PRODUCT", "PRODUCT", 1, _
New SummaryFunctionArgumentDescription() {argument1Description, _
argument2Description}, AddressOf CalcProductValue)
' Provide a datasource for the chart.
ChartControl1.DataSource = ProductsBindingSource
End Sub
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
Handles MyBase.Load
' This line of code loads data into the 'NwindDataSet.Products' table.
Me.ProductsTableAdapter.Fill(Me.NwindDataSet.Products)
End Sub
End Class
Show Me
See Also
Calculating Summaries
661
Examples
662
Data Representation
Charting > Examples > How to: Change the Display Format for Series Labels
This tutorial demonstrates how to change the display format of series labels of a Pie chart at design time, to show
both arguments and values (as real values, as opposed to percents).
To change the display format of series labels for the Pie chart, do the follow ing.
1.Create a simple unbound chart of the PieSeriesView type. Or, for an existing chart, change the view of
its series to Pie. The following image demonstrates the points added to the series in this example (for
more information, refer to Manually Add Points to a Series).
2.After this step, the Pie chart has the following look (w ith its legend hidden).
The following steps demonstrate how to customize the display format of its series labels.
3.By default, a Pie series labels display their points' values as percents. To make them display real values,
do the follow ing.
Click the Pie series in the ChartControl, to select it. In the Properties window , expand its SeriesBase.
PointOptions property. Then, expand the SimplePointOptions.PercentOptions property, to access the
PercentOptions.ValueAsPercent property and disable it.
662
Examples
663
4.To display both arguments and values in series labels, in the SeriesBase.PointOptions property, locate
the PointOptions.PointView property, and set it to ArgumentAndValuess.
5.Finally, w e'll apply the currency format to the points' values. To do this, expand the PointOptions.
ValueNumericOptions property, and set its NumericOptions.Format property to Currency. To disable
decimals, we will set the NumericOptions.Precision property - to 0.
In addition, you can perform similar operations with regard to the Pie chart's legend, e.g. to make it display values
663
Examples
664
in percentages, and show their arguments, too. To learn how to do this, refer to How to: Show Values as
Percents in the Legend of a Pie Chart.
See Also
Series Point Labels
664
Examples
665

Charting > Examples > How to: Change the Display Format for Axis Labels
The follow ing tutorial demonstrates how to customize the display format of the date-time values for axis labels at
design time. To learn more on using different scale types in XtraCharts, refer to Axis Scale Types.
In this example, w e use a simple unbound chart, w ith a set of manually entered points for its series. These points'
values are shown in the follow ing image.
However, the approach shown here can also be applied to a data-bound chart.
To change the display format of the date-time values for axis labels, do the following.
1.Since it's critical to use the DateTime argument's scale type, first ensure that the scale type for the
series argument is set correctly. To do this, select the series, and in the Properties w indow, locate the
SeriesBase.ArgumentScaleType property. If it's set to Qualitative (the default value), change it to
DateTime. Otherwise, the date-time options will not become available.
2.Then, select the axis of arguments (X-axis), and in the Properties window , set the AxisBase.
DateTimeMeasureUnit property to Month. After this, the AxisBase.DateTimeGridAlignment property will
be automatically set to Month, too.
665
Examples
666
3.Now , expand the AxisBase.DateTimeOptions property. Via the DateTimeOptions.Format property, you
can either define one of the built-in formats for the axis labels, or set this property to Custom, to apply
another format. In this example, we use a custom format, and then set the DateTimeOptions.
FormatString property to MMMM, to display the full names of months, only.
See Also
How to: Exclude Weekends and Holidays from the Axis Scale
Axis Scale Types
Axis Labels
666
Examples
667
Charting > Examples > How to: Change the Display Format for Axis Labels (Runtime Sample)
This example demonstrates how you can customize the numerical and date-time options of an axis.
C#
C opy C ode
using System;
// ...
ChartControl chartControl1 = new ChartControl();
// Create a bar series and add points to it.
Series series1 = new Series("Series 1", ViewType.Bar);
series1.Points.Add(new SeriesPoint(new DateTime(2009, 1, 1), new double[] { 26.25
// Add the series to the chart.
chartControl1.Series.Add(series1);
// Hide the legend (if necessary).
chartControl1.Legend.Visible = false;
// Set the scale type for the series' arguments and values.
series1.ArgumentScaleType = ScaleType.DateTime;
series1.ValueScaleType = ScaleType.Numerical;
// Cast the chart's diagram to the XYDiagram type, to access its axes.
XYDiagram diagram = (XYDiagram)chartControl1.Diagram;
// Define the date-time measurement unit, to which the beginning of
// a diagram's gridlines and labels should be aligned.
diagram.AxisX.DateTimeGridAlignment = DateTimeMeasurementUnit.Day;
// Define the detail level for date-time values.
diagram.AxisX.DateTimeMeasureUnit = DateTimeMeasurementUnit.Month;
// Define the custom date-time format (name of a month) for the axis labels.
diagram.AxisX.DateTimeOptions.Format = DateTimeFormat.Custom;
diagram.AxisX.DateTimeOptions.FormatString = "MMMM";
// Since the ValueScaleType of the chart's series is Numerical,
// it is possible to customize the NumericOptions of Y-axis.
diagram.AxisY.NumericOptions.Format = NumericFormat.Currency;
diagram.AxisY.NumericOptions.Precision = 1;
// Add the chart to the form.
chartControl1.Dock = DockStyle.Fill;
this.Controls.Add(chartControl1);
}
}));
}));
}));
}));
}));
Visual Basic
Imports System
' ...
Private Sub Form1_Load(ByVal sender As Object, ByVal e As
Dim chartControl1 As New ChartControl()
' Create a bar series and add points to it.
Dim series1 As New Series("Series 1", ViewType.Bar)
series1.Points.Add(New SeriesPoint(New DateTime(2009,
C opy C ode
EventArgs) Handles MyBase.Load
1,
2,
3,
4,
1),
1),
1),
1),
New
New
New
New
Double()
Double()
Double()
Double()
{
{
{
{
26.25
16.52
22.21
15.35
}))
}))
}))
}))
667
Examples
668
series1.Points.Add(New SeriesPoint(New DateTime(2009, 5, 1), New Double() { 24.15 }))

' Add the series to the chart.
chartControl1.Series.Add(series1)
' Hide the legend (if necessary).
chartControl1.Legend.Visible = False
' Set the scale type for the series' arguments and values.
series1.ArgumentScaleType = ScaleType.DateTime
series1.ValueScaleType = ScaleType.Numerical
' Cast the chart's diagram to the XYDiagram type, to access its axes.
Dim diagram As XYDiagram = CType(chartControl1.Diagram, XYDiagram)
' Define the date-time measurement unit, to which the beginning of
' a diagram's gridlines and labels should be aligned.
diagram.AxisX.DateTimeGridAlignment = DateTimeMeasurementUnit.Day
' Define the detail level for date-time values.
diagram.AxisX.DateTimeMeasureUnit = DateTimeMeasurementUnit.Month
' Define the custom date-time format (name of a month) for the axis labels.
diagram.AxisX.DateTimeOptions.Format = DateTimeFormat.Custom
diagram.AxisX.DateTimeOptions.FormatString = "MMMM"
' Since the ValueScaleType of the chart's series is Numerical,
' it is possible to customize the NumericOptions of Y-axis.
diagram.AxisY.NumericOptions.Format = NumericFormat.Currency
diagram.AxisY.NumericOptions.Precision = 1
' Add the chart to the form.
chartControl1.Dock = DockStyle.Fill
Me.Controls.Add(chartControl1)
End Sub
Show Me
See Also
Axis Labels
Axis Scale Types
668
Examples
669
How to: Show Values as Percents in the Legend of a Pie Chart

Charting > Examples > How to: Show Values as Percents in the Legend of a Pie Chart
The follow ing tutorial demonstrates how to change the display format of point values in the legend to
percentages, using a Pie chart as an example.
To display both points arguments and values, and show values as percentages in the legend, do the follow ing.
1.Select the series in the chart's diagram, and in the Properties window , expand the SeriesBase.
LegendPointOptions property.
2.Expand the SimplePointOptions.PercentOptions, and make sure that the PercentOptions.ValueAsPercent

property is enabled (it is by default).
Then, expand the PointOptions.ValueNumericOptions property, and set the NumericOptions.Format
property to NumericFormat.Percent.
3.Finally, set the PointOptions.PointView property (of the SeriesBase.LegendPointOptions property) to

PointView.ArgumentAndValues.
669
Examples
670
In addition, it's possible to define the accuracy of the percentage values (via the PercentOptions.
PercentageAccuracy property), and the number of decimal places (via the NumericOptions.Precision
property).
See Also
Legend Overview
670
Examples
671
How to: Filter Data

Charting > Examples > How to: Filter Data
The follow ing example demonstrates how to create DataFilter objects, and apply their conditions to a series at
runtime. For more information, refer to Filtering Data.
For this example to work correctly, a chart should contain at least one series, w hich is bound to the "Categories"
data table in the Northwind Traders database (nw ind.mdb file shipped with the XtraCharts demo). Please refer
to the following tutorial to see how to bind a series to data: How to: Bind Individual Chart Series to Data (Runtime
Sample).
The code below creates and applies the follow ing filter to series data: "CategoryID = 1 or CategoryID = 4 or
CategoryID = 7"
C#
C opy C ode
// ...
// Create new data filters and specify conditions for them.
DataFilter dataFilter1 = new DataFilter("CategoryID", "System.Int32", DataFilterCondition.Equal, 1);
// Obtain the first series of the chart.
Series series1 = chartControl1.Series[0];
// Set the logical operator used to combine individual data filter conditions for this series.
series1.DataFiltersConjunctionMode = ConjunctionTypes.Or;
// Remove all other filters.
series1.DataFilters.Clear();
// Add new filters to apply to the series data.
series1.DataFilters.AddRange(new DataFilter[] {dataFilter1, dataFilter2, dataFilter3});
Visual Basic
C opy C ode
' ...
' Create new data filters and specify conditions for them.
Dim dataFilter1 As New DataFilter("CategoryID", "System.Int32", DataFilterCondition.Equal, 1)
' Obtain the first series of the chart.
Dim series1 As Series = chartControl1.Series(0)
' Set the logical operator used to combine individual data filter conditions for this series.
series1.DataFiltersConjunctionMode = ConjunctionTypes.Or
' Remove all other filters.
series1.DataFilters.Clear()
' Add new filters to apply to the series data.
series1.DataFilters.AddRange(New DataFilter() {dataFilter1, dataFilter2, dataFilter3})
See Also
Filtering Data
671
Examples
672

Charting > Examples > How to: Show N Top Points as a Single Section in a Pie Chart
This tutorial demonstrates how to show a number of series points as an aggregation. In this example - as a single
slice of a Pie chart. It's the so-called Top N feature, which is intended to visually represent selected points of a
series as a single point.
To learn how the "Top N" feature can be used, do the following.
1.Create a simple unbound chart of the PieSeriesView type. For this example, w e'll use the chart created
for the follow ing tutorial: How to: Change the Display Format for Series Labels. It is show n in the
following image.
The following steps demonstrate how to aggregate some of the Pie series points into a single slice.
2.Select the Pie series, and in the Properties w indow, expand its SeriesBase.TopNOptions property. Then,
set the TopNOptions.Enabled property to true.
3.Now , the available options are visible. They are briefly described below.
The key option is the TopNOptions.Mode property, w hich allows you to choose from three different
modes in which the TopN feature can be implemented:
Count
This setting determines that the defined
of series points should be aggregated into the single
slice.
After you set the TopNOptions.Mode property to Count, define the number of series points
, via the TopNOptions.Count property. The result is shown in the follow ing image.
672
Examples
673
ThresholdValue
This setting determines that series points are aggregated into a single slice, if their
, determined by the TopNOptions.ThresholdValue property.
ThresholdPercent
This setting determines that series points are aggregated into a single slice, if their
, relative to the series points' overall value. The TopNOptions.
ThresholdPercent property determines the threshold percent.
Note
You can completely exclude the aggregated points from the chart, by disabling the TopNOptions.Show Others
property.
To customize the text of the argument, which is shown instead of the real points' arguments, use the
TopNOptions.OthersArgument property. The follow ing images demonstrate how this property w orks.
OthersArgument isn't defined (default)
OthersArgument = "Rest"
673
Examples
674
See Also
Using The Top-N Feature
674
Examples
675

Charting > Examples > How to: Use Automatic Date-Time Scale Modes of an Axis
This example demonstrates how to use date-time scale modes of an axis (both manual and automatic).
Note that when the AxisXBase.DateTimeScaleMode property is set to Manual, you should manually define the
AxisBase.DateTimeGridAlignment and AxisBase.DateTimeMeasureUnit properties. W hen using any of the automatic
date-time scale modes, the automatically calculated values for these properties can be obtained in the special
ChartControl.DateTimeMeasurementUnitsCalculated (W ebChartControl.DateTimeMeasurementUnitsCalculated)
event.
Since these modes belong to an axis, you should cast your diagram object to an appropriate diagram type, to
access them at runtime.
For this example to work properly, add a chart control to a form, and a combo box, which lists the available
modes. After you populate your chart w ith data, handle the comboBox1_SelectedIndexChanged event in the
following w ay.
C#
C opy C ode
using System;
// ...
this.comboBox1.SelectedIndex = 0;
}
private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) {
switch (comboBox1.SelectedIndex) {
case 0:
((XYDiagram)this.chartControl1.Diagram).AxisX.DateTimeScaleMode =
DateTimeScaleMode.Manual;
((XYDiagram)this.chartControl1.Diagram).AxisX.DateTimeMeasureUnit =
DateTimeMeasurementUnit.Day;
((XYDiagram)this.chartControl1.Diagram).AxisX.DateTimeGridAlignment =
DateTimeMeasurementUnit.Day;
break;
case 1:
DateTimeScaleMode.AutomaticAverage;
break;
case 2:
DateTimeScaleMode.AutomaticIntegral;
break;
}
}
Visual Basic
C opy C ode
Imports System
' ...
Me.comboBox1.SelectedIndex = 0
End Sub
Private Sub comboBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) _
Handles comboBox1.SelectedIndexChanged
Select Case comboBox1.SelectedIndex
Case 0
CType(Me.chartControl1.Diagram, XYDiagram).AxisX.DateTimeScaleMode = _
DateTimeScaleMode.Manual
CType(Me.chartControl1.Diagram, XYDiagram).AxisX.DateTimeMeasureUnit = _
675
Examples
676
DateTimeMeasurementUnit.Day
CType(Me.chartControl1.Diagram, XYDiagram).AxisX.DateTimeGridAlignment = _
DateTimeMeasurementUnit.Day
Case 1
DateTimeScaleMode.AutomaticAverage
Case 2
DateTimeScaleMode.AutomaticIntegral
End Select
End Sub
Show Me
See Also
Date-Time Data Representation
676
Examples
677
Charting > Examples > How to: Obtain Values Calculated for Automatic Axis Date-Time Scale Modes
This example demonstrates how you can obtain the values calculated for an axis' date-time grid alignment and
measure unit properties w hich are read-only, w hen automatic axis date-time scale modes are used. Moreover, in
the ChartControl.DateTimeMeasurementUnitsCalculated (W ebChartControl.DateTimeMeasurementUnitsCalculated
) event, you can access the axis itself, and customize its properties.
C#
C opy C ode
// ...
private void chartControl1_DateTimeMeasurementUnitsCalculated
(object sender, DateTimeMeasurementUnitsCalculatedEventArgs e) {
// In this event, you can access the properties of the corresponding axis,
// and obtain the automatically calculated value
// for the axis date-time grid alignment and measure unit.
((AxisX)e.Axis).Title.Visible = true;
((AxisX)e.Axis).Title.Text = "The Axis Grid Alignment Unit is " + e.GridAlignment.ToString() +
"\r\nThe Axis Measure Unit is " + e.MeasureUnit.ToString();
}
Visual Basic
C opy C ode
' ...
Private Sub chartControl1_DateTimeMeasurementUnitsCalculated(ByVal sender As Object, _
ByVal e As DateTimeMeasurementUnitsCalculatedEventArgs) _
Handles chartControl1.DateTimeMeasurementUnitsCalculated
' In this event, you can access the properties of the corresponding axis,
' and obtain the automatically calculated value
' for the axis date-time grid alignment and measure unit.
CType(e.Axis, AxisX).Title.Visible = True
CType(e.Axis, AxisX).Title.Text = _
"The Axis Grid Alignment Unit is " & e.GridAlignment.ToString() & _
Constants.vbCrLf & "The Axis Measure Unit is " & e.MeasureUnit.ToString()
End Sub
Show Me
677
Examples
678
See Also
678
Examples
679
Charting > Examples > How to: Exclude W eekends and Holidays from the Axis Scale
Show Me
This example demonstates how to exclude non-working days (weekdays and holidays) from an axis range, via
the AxisBase.W orkdaysOnly and AxisBase.WorkdaysOptions properties.
C#
C opy C ode
(Form1.cs)
using System;
// ...
AxisX axisX = ((XYDiagram)chartControl1.Diagram).AxisX;
// Exclude holidays from the axis scale.
axisX.WorkdaysOnly = true;
// Specify custom working days.
axisX.WorkdaysOptions.Workdays = Weekday.Sunday | Weekday.Monday | Weekday.Tuesday |
Weekday.Wednesday | Weekday.Thursday | Weekday.Friday;
// Specify holidays
axisX.WorkdaysOptions.Holidays.AddRange(new KnownDate[] {
new KnownDate("Custom Holiday 1", new DateTime(1994, 3, 2, 0, 0, 0, 0)),
new KnownDate("Custom Holiday 2", new DateTime(1994, 4, 2, 0, 0, 0, 0))});
// Specify strict working days.
// Thay will have a priority over the holidays specified.
axisX.WorkdaysOptions.ExactWorkdays.Add(
new KnownDate("Community Work Day", new DateTime(1994, 3, 2, 0, 0, 0, 0)));
Visual Basic
C opy C ode
(Form1.vb)
Imports System
' ...
Dim axisX As AxisX = (CType(chartControl1.Diagram, XYDiagram)).AxisX
' Exclude holidays from the axis scale.
axisX.WorkdaysOnly = True
' Specify custom working days.
axisX.WorkdaysOptions.Workdays = Weekday.Sunday Or Weekday.Monday Or _
Weekday.Tuesday Or Weekday.Wednesday Or Weekday.Thursday Or Weekday.Friday
' Specify holidays
axisX.WorkdaysOptions.Holidays.AddRange(New KnownDate() { _
New KnownDate("Custom Holiday 1", New DateTime(1994, 3, 2, 0, 0, 0, 0)), _
New KnownDate("Custom Holiday 2", New DateTime(1994, 4, 2, 0, 0, 0, 0))})
' Specify strict working days.
' Thay will have a priority over the holidays specified.
axisX.WorkdaysOptions.ExactWorkdays.Add(New KnownDate _
("Community Work Day", New DateTime(1994, 3, 2, 0, 0, 0, 0)))
The follow ing images demonstrate a chart with non-working days excluded, and included.
WorkdaysOnly = false
WorkdaysOnly = true
679
Examples
680
See Also
680
Examples
681
How to: Adjust Point Options of the Pie Series View Type at Runtime
Charting > Examples > How to: Adjust Point Options of the Pie Series View Type at Runtime
Show Me
The follow ing example demonstrates how to specify the appearance of series labels in the Pie chart using its point
options.
To accomplish this at runtime, it is necessary to handle the Form.Load event and then transform series labels of
the Series object to the corresponding labels of the PieSeriesLabel object.
And finally, get access to the point view and point value numeric options via the PointOptions.PointView and
PointOptions.ValueNumericOptions properties correspondingly.
C#
C opy C ode
(Form1.cs)
using System;
namespace XtraChart_PointOptions
{
public partial class Form1 : Form
{
public Form1()
{
}
private void Form1_Load(object sender, EventArgs e)
{
ChartControl pieChart = new ChartControl();
// Create a pie series.
Series series1 = new Series("A Pie Series", ViewType.Pie);
// Populate the series with points.
series1.Points.Add(new SeriesPoint("Russia", 17.0752));
series1.Points.Add(new SeriesPoint("Canada", 9.98467));
series1.Points.Add(new SeriesPoint("USA", 9.63142));
series1.Points.Add(new SeriesPoint("China", 9.59696));
series1.Points.Add(new SeriesPoint("Brazil", 8.511965));
series1.Points.Add(new SeriesPoint("Australia", 7.68685));
series1.Points.Add(new SeriesPoint("India", 3.28759));
series1.Points.Add(new SeriesPoint("Others", 81.2));
pieChart.Series.Add(series1);
// Adjust the point options of the series label.
PieSeriesLabel label = (PieSeriesLabel)series1.Label;
label.PointOptions.PointView = PointView.ArgumentAndValues;
label.PointOptions.ValueNumericOptions.Format = NumericFormat.Percent;
label.PointOptions.ValueNumericOptions.Precision = 0;
// Detect overlapping of series labels.
label.ResolveOverlappingMode = ResolveOverlappingMode.Default;
pieChart.Dock = DockStyle.Fill;
this.Controls.Add(pieChart);
}
}
}
681
Examples
Visual Basic
682
C opy C ode
(Form1.vb)
Imports Microsoft.VisualBasic
Imports System
Namespace XtraChart_PointOptions
Partial Public Class Form1
Inherits Form
Public Sub New()
End Sub
Dim pieChart As New ChartControl()
' Create a pie series.
Dim series1 As New Series("A Pie Series", ViewType.Pie)
' Populate the series with points.
series1.Points.Add(New SeriesPoint("Russia", 17.0752))
series1.Points.Add(New SeriesPoint("Canada", 9.98467))
series1.Points.Add(New SeriesPoint("USA", 9.63142))
series1.Points.Add(New SeriesPoint("China", 9.59696))
series1.Points.Add(New SeriesPoint("Brazil", 8.511965))
series1.Points.Add(New SeriesPoint("Australia", 7.68685))
series1.Points.Add(New SeriesPoint("India", 3.28759))
series1.Points.Add(New SeriesPoint("Others", 81.2))
pieChart.Series.Add(series1)
' Adjust the point options of the series label.
Dim label As PieSeriesLabel = CType(series1.Label, PieSeriesLabel)
label.PointOptions.PointView = PointView.ArgumentAndValues
label.PointOptions.ValueNumericOptions.Format = NumericFormat.Percent
label.PointOptions.ValueNumericOptions.Precision = 0
' Detect overlapping of series labels.
label.ResolveOverlappingMode = ResolveOverlappingMode.Default
pieChart.Dock = DockStyle.Fill
Me.Controls.Add(pieChart)
End Sub
End Class
End Namespace
682
Examples
683
Appearance Customization
How to: Customize a Chart's Appearance
Charting > Examples > How to: Customize a Chart's Appearance
Show Me
This example demonstrates how to customize a chart's appearance at runtime, via the ChartControl.
AppearanceName, ChartControl.PaletteName and ChartControl.PaletteBaseColorNumber properties.
Note that you can define a separate palette for painting all indicators available in your chart, via the ChartControl.
IndicatorsPaletteName property.
C#
C opy C ode
(Form1.cs)
using System;
// ...
ChartControl barChart = new ChartControl();
// Create a series and add points to it.
Series series1 = new Series("Bar Series", ViewType.Bar);
series1.Points.Add(new SeriesPoint("A", new double[] { 10 }));
series1.Points.Add(new SeriesPoint("B", new double[] { 12 }));
series1.Points.Add(new SeriesPoint("C", new double[] { 14 }));
series1.Points.Add(new SeriesPoint("D", new double[] { 17 }));
// Create an indicator (e.g. Regression Line),
// and add it to the series' collection.
RegressionLine myLine = new RegressionLine(ValueLevel.Value);
((SideBySideBarSeriesView)series1.View).Indicators.Add(myLine);
barChart.Series.Add(series1);
// Define the chart's appearance and palette.
barChart.AppearanceName = "Dark";
barChart.PaletteName = "Opulent";
barChart.PaletteBaseColorNumber = 5;
// Define a separate palette for the chart's indicators.
barChart.IndicatorsPaletteName = "Default";
barChart.Dock = DockStyle.Fill;
this.Controls.Add(barChart);
}
Visual Basic
C opy C ode
(Form1.vb)
Imports System
' ...
Dim barChart As New ChartControl()
' Create a series and add points to it.
Dim series1 As New Series("Bar Series", ViewType.Bar)
683
Examples
684
series1.Points.Add(New SeriesPoint("A", New Double() { 10 }))

series1.Points.Add(New SeriesPoint("B", New Double() { 12 }))
series1.Points.Add(New SeriesPoint("C", New Double() { 14 }))
series1.Points.Add(New SeriesPoint("D", New Double() { 17 }))
' Create an indicator (e.g. Regression Line),
' and add it to the series' collection.
Dim myLine As New RegressionLine(ValueLevel.Value)
CType(series1.View, SideBySideBarSeriesView).Indicators.Add(myLine)
barChart.Series.Add(series1)
' Define the chart's appearance and palette.
barChart.AppearanceName = "Dark"
barChart.PaletteName = "Opulent"
barChart.PaletteBaseColorNumber = 5
' Define a separate palette for the chart's indicators.
barChart.IndicatorsPaletteName = "Default"
barChart.Dock = DockStyle.Fill
Me.Controls.Add(barChart)
End Sub
Show Me
684
Examples
685
How to: Customize the Appearance of a Chart's Legend

Charting > Examples > How to: Customize the Appearance of a Chart's Legend
This example demonstrates how a chart's Legend can be accessed and customized at runtime.
To control whether series, indicators, Constant Lines and Strips should be show n in the legend, use their
SeriesBase.ShowInLegend, Indicator.Show InLegend, ConstantLine.ShowInLegend and Strip.ShowInLegend
properties.
C#
C opy C ode
Legend legend = chartControl1.Legend;

// Display the chart control's legend.
legend.Visible = true;
// Define its margins and alignment relative to the diagram.
legend.Margins.All = 8;
legend.AlignmentHorizontal = LegendAlignmentHorizontal.RightOutside;
legend.AlignmentVertical = LegendAlignmentVertical.Top;
// Define the layout of items within the legend.
legend.Direction = LegendDirection.LeftToRight;
legend.EquallySpacedItems = true;
legend.HorizontalIndent = 8;
legend.VerticalIndent = 8;
legend.TextVisible = true;
legend.TextOffset = 8;
legend.MarkerVisible = true;
legend.MarkerSize = new Size(20, 20);
legend.Padding.All = 4;
// Define the limits for the legend to occupy the chart's space.
legend.MaxHorizontalPercentage = 50;
legend.MaxVerticalPercentage = 50;
// Customize the legend appearance.
legend.BackColor = Color.Beige;
legend.FillStyle.FillMode = FillMode.Gradient;
((RectangleGradientFillOptions)legend.FillStyle.Options).Color2 = Color.Bisque;
legend.Border.Visible = true;
legend.Border.Color = Color.DarkBlue;
legend.Border.Thickness = 2;
legend.Shadow.Visible = true;
legend.Shadow.Color = Color.LightGray;
legend.Shadow.Size = 2;
// Customize the legend text properties.
legend.Antialiasing = false;
legend.Font = new Font("Arial", 9, FontStyle.Bold);
legend.TextColor = Color.DarkBlue;
Visual Basic
C opy C ode
Dim legend As Legend = chartControl1.Legend

' Display the chart control's legend.
legend.Visible = True
' Define its margins and alignment relative to the diagram.
legend.Margins.All = 8
legend.AlignmentHorizontal = LegendAlignmentHorizontal.RightOutside
legend.AlignmentVertical = LegendAlignmentVertical.Top
' Define the layout of items within the legend.
legend.Direction = LegendDirection.LeftToRight
legend.EquallySpacedItems = True
legend.HorizontalIndent = 8
legend.VerticalIndent = 8
legend.TextVisible = True
legend.TextOffset = 8
685
Examples
686
legend.MarkerVisible = True
legend.MarkerSize = New Size(20, 20)
legend.Padding.All = 4
' Define the limits for the legend to occupy the chart's space.
legend.MaxHorizontalPercentage = 50
legend.MaxVerticalPercentage = 50
' Customize the legend appearance.
legend.BackColor = Color.Beige
legend.FillStyle.FillMode = FillMode.Gradient
CType(legend.FillStyle.Options, RectangleGradientFillOptions).Color2 = Color.Bisque
legend.Border.Visible = True
legend.Border.Color = Color.DarkBlue
legend.Border.Thickness = 2
legend.Shadow.Visible = True
legend.Shadow.Color = Color.LightGray
legend.Shadow.Size = 2
' Customize the legend text properties.
legend.Antialiasing = False
legend.Font = New Font("Arial", 9, FontStyle.Bold)
legend.TextColor = Color.DarkBlue
Show Me
See Also
Legend Appearance
686
Examples
687
How to: Customize Gridlines and Tickmarks of an Axis

Charting > Examples > How to: Customize Gridlines and Tickmarks of an Axis
This example demonstrates how the grid lines and tickmarks of an axis can be customized at runtime.
To access an axis, you should cast your chart's diagram object to the required diagram type. Then, use the
Axis2D.Tickmarks and AxisBase.GridLines properties to access the corresponding elements. To define the number
of minor tickmarks (grid lines), use the AxisBase.MinorCount property.
C#
C opy C ode
// Customize the appearance of the axes' tickmarks.
diagram.AxisX.Tickmarks.CrossAxis = true;
diagram.AxisX.Tickmarks.Length = 5;
diagram.AxisX.Tickmarks.Thickness = 2;
diagram.AxisY.Tickmarks.Visible = false;
diagram.AxisY.Tickmarks.MinorVisible = false;
diagram.AxisX.Tickmarks.MinorLength = 3;
diagram.AxisX.Tickmarks.MinorThickness = 1;
diagram.AxisX.MinorCount = 2;
diagram.AxisY.MinorCount = 4;
// Customize the appearance of the axes' grid lines.
diagram.AxisX.GridLines.Visible = false;
diagram.AxisX.GridLines.MinorVisible = false;
diagram.AxisY.GridLines.Visible = true;
diagram.AxisY.GridLines.MinorVisible = true;
diagram.AxisY.GridLines.Color = Color.Red;
diagram.AxisY.GridLines.LineStyle.DashStyle = DashStyle.Solid;
diagram.AxisY.GridLines.LineStyle.Thickness = 2;
diagram.AxisY.GridLines.MinorColor = Color.Blue;
diagram.AxisY.GridLines.MinorLineStyle.DashStyle = DashStyle.Dash;
diagram.AxisY.GridLines.MinorLineStyle.Thickness = 1;
Visual Basic
C opy C ode
' Customize the appearance of the axes' tickmarks.
diagram.AxisX.Tickmarks.CrossAxis = True
diagram.AxisX.Tickmarks.Length = 5
diagram.AxisX.Tickmarks.Thickness = 2
diagram.AxisY.Tickmarks.Visible = False
diagram.AxisY.Tickmarks.MinorVisible = False
diagram.AxisX.Tickmarks.MinorLength = 3
diagram.AxisX.Tickmarks.MinorThickness = 1
diagram.AxisX.MinorCount = 2
diagram.AxisY.MinorCount = 4
' Customize the appearance of the axes' grid lines.
diagram.AxisX.GridLines.Visible = False
diagram.AxisX.GridLines.MinorVisible = False
diagram.AxisY.GridLines.Visible = True
diagram.AxisY.GridLines.MinorVisible = True
diagram.AxisY.GridLines.Color = Color.Red
diagram.AxisY.GridLines.LineStyle.DashStyle = DashStyle.Solid
diagram.AxisY.GridLines.LineStyle.Thickness = 2
diagram.AxisY.GridLines.MinorColor = Color.Blue
diagram.AxisY.GridLines.MinorLineStyle.DashStyle = DashStyle.Dash
diagram.AxisY.GridLines.MinorLineStyle.Thickness = 1
687
Examples
688
Show Me
See Also
Grid Lines, Tickmarks and Interlacing
688
Examples
689
Charting > Examples > How to: Customize the Appearance of a Pane's Scroll Bar (Runtime Sample)
This example demonstrates how the appearance of a pane's
can be customized.
Note that for a pane, it's possible to individually adjust the position and visibility of its X and Y-axis' scroll bars.
C#
C opy C ode
ScrollBarOptions scrollBarOptions = diagram.DefaultPane.ScrollBarOptions;

scrollBarOptions.BackColor = Color.White;
scrollBarOptions.BarColor = Color.Blue;
scrollBarOptions.BorderColor = Color.Navy;
scrollBarOptions.BarThickness = 15;
scrollBarOptions.XAxisScrollBarAlignment = ScrollBarAlignment.Far;
scrollBarOptions.XAxisScrollBarVisible = true;
Visual Basic
C opy C ode
Dim scrollBarOptions As ScrollBarOptions = diagram.DefaultPane.ScrollBarOptions

scrollBarOptions.BackColor = Color.White
scrollBarOptions.BarColor = Color.Blue
scrollBarOptions.BorderColor = Color.Navy
scrollBarOptions.BarThickness = 15
scrollBarOptions.XAxisScrollBarAlignment = ScrollBarAlignment.Far
scrollBarOptions.XAxisScrollBarVisible = True
Show Me
See Also
Panes
Axis Visible and Scrolling Ranges
689
Examples
690

Charting > Examples > How to: Custom Paint Series
This example demonstrates how to implement custom draw ing in charts when draw ing its series. To do this you
should handle the ChartControl.CustomDrawSeries event, and then you're able to change some drawing
parameters using its event args.
Note
For the W ebChartControl you should handle its W ebChartControl.CustomDrawSeries event to implement this task.
C#
C opy C ode
// ...
private void chartControl1_CustomDrawSeries(object sender,
CustomDrawSeriesEventArgs e) {
// Find all Bar Series by their view type,
// and fill them with Aqua color.
if (e.Series.View is BarSeriesView)
e.SeriesDrawOptions.Color = Color.Aqua;
// Find the series by its name,
// and change its line style to dash-dot-dot.
// (Here it's assumed that the series view type is LineSeriesView).
if (e.Series.Name == "Line Series")
((LineDrawOptions)e.SeriesDrawOptions).LineStyle.DashStyle =
DashStyle.DashDotDot;
// Find all Point Series by the type of its DrawOptions,
// and change their marker kind to diamond.
if (e.SeriesDrawOptions.GetType() == typeof(PointDrawOptions))
((PointDrawOptions)e.SeriesDrawOptions).Marker.Kind =
MarkerKind.Diamond;
}
Visual Basic
C opy C ode
' ...
Private Sub OnCustomDrawSeries(sender As Object, e As CustomDrawSeriesEventArgs) _
Handles ChartControl1.CustomDrawSeries
' Find all Bar Series by their view type, and fill them with Aqua color.
If TypeOf e.Series.View Is BarSeriesView Then
e.SeriesDrawOptions.Color = Color.Aqua
End If
' Find the series by its name, and change its line style to dash-dot-dot.
' (Here it's assumed that the series view type is LineSeriesView).
If e.Series.Name = "Line Series" Then
CType(e.SeriesDrawOptions, LineDrawOptions).LineStyle.DashStyle = DashStyle.DashDotDot
End If
' Find all Point Series by the type of its DrawOptions,
' and change their marker kind to diamond.
If e.SeriesDrawOptions.GetType() Is GetType(PointDrawOptions) Then
CType(e.SeriesDrawOptions, PointDrawOptions).Marker.Kind = MarkerKind.Diamond
End If
End Sub
See Also
Series
690
Examples
691

Charting > Examples > How to: Custom Paint Series Points
This example demonstrates how to implement custom draw ing in charts when draw ing the series points of charts.
To do this you should handle the ChartControl.CustomDraw SeriesPoint event, and then you can change some of
the drawing parameters using its event args.
Note
For the W ebChartControl you should handle its W ebChartControl.CustomDrawSeriesPoint event to do this.
C#
C opy C ode
// ...
private void chartControl1_CustomDrawSeriesPoint(object sender,
CustomDrawSeriesPointEventArgs e) {
// These changes will be applied to Bar Series only.
BarDrawOptions drawOptions = e.SeriesDrawOptions as BarDrawOptions;
if (drawOptions == null)
return;
// Get the fill options for the series point.
drawOptions.FillStyle.FillMode = FillMode.Gradient;
RectangleGradientFillOptions options =
drawOptions.FillStyle.Options as RectangleGradientFillOptions;
if (options == null)
return;
// Get the value at the current series point.
double val = e.SeriesPoint[0];
// If the value is less than 2.5, then fill the bar with green colors.
if (val < 2.5) {
options.Color2 = Color.FromArgb(154, 196, 84);
drawOptions.Color = Color.FromArgb(81, 137, 3);
drawOptions.Border.Color = Color.FromArgb(100, 39, 91, 1);
}
// ... if the value is less than 5.5, then fill the bar with yellow colors.
else if (val < 5.5) {
drawOptions.Color = Color.FromArgb(249, 170, 15);
}
// ... if the value is greater, then fill the bar with red colors.
else {
drawOptions.Color = Color.FromArgb(199, 57 ,12);
}
}
Visual Basic
C opy C ode
' ...
Private Sub OnCustomDrawSeriesPoint(ByVal sender As Object, _
ByVal e As CustomDrawSeriesPointEventArgs) _
Handles chartControl1.CustomDrawSeriesPoint
' These changes will be applied to Bar Series only.
Dim drawOptions = CType(e.SeriesDrawOptions, BarDrawOptions)
If drawOptions Is Nothing Then
Return
End If
' Get the fill options for the series point.
drawOptions.FillStyle.FillMode = FillMode.Gradient
691
Examples
692
Dim options = CType(drawOptions.FillStyle.Options, RectangleGradientFillOptions)

If options Is Nothing Then
Return
End If
' Get the value at the current series point.
Dim val As Double = e.SeriesPoint(0)
' If the value is less than 2.5, then fill the bar with green colors.
If val < 2.5 Then
options.Color2 = Color.FromArgb(154, 196, 84)
drawOptions.Color = Color.FromArgb(81, 137, 3)
drawOptions.Border.Color = Color.FromArgb(100, 39, 91, 1)
' ... if the value is less than 5.5, then fill the bar with yellow colors.
Else
If val < 5.5 Then
' ... if the value is greater, then fill the bar with red colors.
Else
End If
End If
End Sub
See Also
Series Points
692
Examples
693

Charting > Examples > How to: Conditionally Hide Series Labels
This example demonstrates how to conditionally hide series labels of charts. To do this, you should handle the
ChartControl.CustomDraw SeriesPoint event, and then, you can change the CustomDrawSeriesPointEventArgs.
LabelText parameter's value.
Note
For the W ebChartControl you should handle its W ebChartControl.CustomDrawSeriesPoint event to do this.
C#
C opy C ode
using System;
// ...
private void chart_CustomDrawSeriesPoint (object sender, CustomDrawSeriesPointEventArgs e) {
// If the value is less than 1, hide the point's label.
if(e.SeriesPoint[0] < 1) {
e.LabelText = "";
}
}
Visual Basic
C opy C ode
Imports System
' ...
Private Sub chart_CustomDrawSeriesPoint (ByVal sender As Object, _
ByVal e As CustomDrawSeriesPointEventArgs)
' If the value is less than 1, hide the point's label.
If e.SeriesPoint(0) < 1 Then
e.LabelText = ""
End If
End Sub
Show Me
See Also
693
Examples
694
Series Point Labels

694
Examples
695

Charting > Examples > How to: Make Series Labels Display Custom Information
This example demonstrates how to make series points labels display custom information, in particular - based on
the series points values.
C#
C opy C ode
using System;
// ...
private void chartControl1_CustomDrawSeriesPoint(object sender,
CustomDrawSeriesPointEventArgs e) {
if(e.SeriesPoint.Values[0] > 1) {
e.LabelText = "Critical value";
}
}
Visual Basic
C opy C ode
Imports System
' ...
Private Sub chartControl1_CustomDrawSeriesPoint(ByVal sender As Object, _
ByVal e As CustomDrawSeriesPointEventArgs) Handles chartControl1.CustomDrawSeriesPoint
If e.SeriesPoint.Values(0) > 1 Then
e.LabelText = "Critical value"
End If
End Sub
See Also
695
Examples
696

Charting > Examples > How to: Avoid Overlapping of Series Labels
This tutorial explains how overlap resolving can be applied to series labels.
W hen series point labels are numerous and lengthy, they may overlap, making a chart crow ded, and its data
unreadable. Show n below is the appearance of a Line series, w hose points are too close to each other, so that
their labels overlap.
XtraCharts can help to avoid this, by applying an overlap resolving algorithm to series labels. Then, label overlap
is auto-detected, and based on a chosen algorithm, either hides the overlapped labels, or distributes labels to
avoid overlap. This functionality is available for both 2D and 3D chart types.
Note
The available modes differ from one series view type to another, and in this example we'll use the most popular Line
view type. To learn w hich options are available for each view type, refer to Series Point Labels.
To enable overlap detection, simply set the SeriesLabelBase.ResolveOverlappingMode property to a value other
than None. The set of modes that are available for this property depend on the view type of the series. For the
Line series, the following options are available:
For example, set the SeriesLabelBase.ResolveOverlappingMode property to HideOverlapped, to get the following
result.
696
Examples
697
For information on the availability of specific overlap resolving modes for every chart type, refer to the
corresponding section of the Series Point Labels document.
In addition, you can specify the minimum indent which should be preserved between adjacent series labels, via
the SeriesLabelBase.ResolveOverlappingMinIndent property.
Show Me
See Also
Series Point Labels
697
Examples
698
How to: Change the Names for Auto-Created Series

Charting > Examples > How to: Change the Names for Auto-Created Series
This example details how to programmatically change the names for auto-created series.
To accomplish this, handle the ChartControl.CustomDrawSeries (W ebChartControl.CustomDraw Series) event in
the following w ay.
C#
C opy C ode
using System;
// ...
private void chartControl1_CustomDrawSeries(object sender, CustomDrawSeriesEventArgs e) {
e.LegendText = e.LegendText.Remove(0, 3);
}
Visual Basic
C opy C ode
Private Sub chartControl1_CustomDrawSeries(ByVal sender As Object, _

ByVal e As CustomDrawSeriesEventArgs) Handles chartControl1.CustomDrawSeries
e.LegendText = e.LegendText.Remove(0, 3)
End Sub
Show Me
698
Examples
699
How to: Custom Draw a Crosshair Cursor

Charting > Examples > How to: Custom Draw a Crosshair Cursor
Show Me
This example show s how to provide a custom appearance for the crosshair cursor using the ChartControl.
CustomDrawCrosshair event. This event is invoked when you click the Custom Draw Crosshair Cursor button on
the form.
If you wish to display crosshair axis lines and labels on a chart before custom draw ing the crosshair cursor, set
the CrosshairOptions.Show ArgumentLine, CrosshairOptions.ShowArgumentLabels, CrosshairOptions.
ShowValueLabels and CrosshairOptions.ShowValueLine properties to true.
Note that the customization of the crosshair cursor is provided for the CrosshairOptions.SnapMode property set
to NearestArgument.
C#
C opy C ode
(Form1.cs)
using System;
namespace CustomDrawCrosshair {
bool handleCustomDraw;
public Form1() {
}
public void button1_Click(object sender, EventArgs e) {
handleCustomDraw = true;
chartControl1.CustomDrawCrosshair += chartControl1_CustomDrawCrosshair;
}
private void chartControl1_CustomDrawCrosshair(object sender, DevExpress.XtraCharts.CustomDrawC
if (!handleCustomDraw) return;
// Specify the crosshair argument line color, dash style and thickness.
e.CrosshairLineElement.Color = Color.Green;
e.CrosshairLineElement.LineStyle.DashStyle = DashStyle.DashDot;
e.CrosshairLineElement.LineStyle.Thickness = 3;
// Specify the back color for crosshair argument label.
foreach (CrosshairAxisLabelElement axisLabelElement in e.CrosshairAxisLabelElements)
axisLabelElement.BackColor = Color.Blue;
foreach (CrosshairElement element in e.CrosshairElements) {
// Specify the color, dash style and thickness for the crosshair value lines.
element.LineElement.Color = Color.DarkViolet;
element.LineElement.LineStyle.DashStyle = DashStyle.Dash;
element.LineElement.LineStyle.Thickness = 2;
// Specify the text color and back color for the crosshair value labels.
element.AxisLabelElement.TextColor = Color.Red;
element.AxisLabelElement.BackColor = Color.Yellow;
// Specify the text color and marker size for the crosshair cursor label that shows se
element.LabelElement.TextColor = Color.Red;
element.LabelElement.MarkerSize = new Size(15, 15);
}
}
}
}
Visual Basic
C opy C ode
699
Examples
700
(Form1.vb)
Imports System
Namespace CustomDrawCrosshair
Inherits Form
Private handleCustomDraw As Boolean
Public Sub New()
End Sub
Public Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles button1.Click
handleCustomDraw = True
AddHandler chartControl1.CustomDrawCrosshair, AddressOf chartControl1_CustomDrawCrosshair
End Sub
Private Sub chartControl1_CustomDrawCrosshair(ByVal sender As Object, ByVal e As DevExpress.Xtr
If (Not handleCustomDraw) Then
Return
End If
' Specify the crosshair argument line color, dash style and thickness.
e.CrosshairLineElement.Color = Color.Green
e.CrosshairLineElement.LineStyle.DashStyle = DashStyle.DashDot
e.CrosshairLineElement.LineStyle.Thickness = 3
' Specify the back color for crosshair argument label.
For Each axisLabelElement As CrosshairAxisLabelElement In e.CrosshairAxisLabelElements
axisLabelElement.BackColor = Color.Blue
Next axisLabelElement
For Each element As CrosshairElement In e.CrosshairElements
' Specify the color, dash style and thickness for the crosshair value lines.
element.LineElement.Color = Color.DarkViolet
element.LineElement.LineStyle.DashStyle = DashStyle.Dash
element.LineElement.LineStyle.Thickness = 2
' Specify the text color and back color for the crosshair value labels.
element.AxisLabelElement.TextColor = Color.Red
element.AxisLabelElement.BackColor = Color.Yellow
' Specify the text color and marker size for the crosshair cursor label that shows ser
element.LabelElement.TextColor = Color.Red
element.LabelElement.MarkerSize = New Size(15, 15)
Next element
End Sub
End Class
End Namespace
700
Examples
701
Series Views
Charting > Examples > How to: Change the View of a Series
This topic illustrates how to change the current view type of a series at both design and runtime.
Design time.
To change the view type of a particular series, select this series at design time, and in the Property Grid,
click the ellipsis button for the SeriesBase.View property.
In the invoked Series View Types dialog, choose the new view type and click OK.
701
Examples
702
Runtime.
The follow ing example demonstrates how to programmatically change the current series view via the
SeriesBase.ChangeView method. Note that this method is better than directly changing the SeriesBase.
View property, because the ChangeView is implemented in a w ay that saves the property values of the
old view to the greatest degree possible.
C#
C opy C ode
// ...
public void ToPie(SeriesBase series) {
series.ChangeView(ViewType.Pie);
}
public void ToBars(SeriesBase series) {
series.ChangeView(ViewType.Bar);
}
Visual Basic
C opy C ode
' ...
Public Sub ToPie(series As SeriesBase)
702
Examples
703
series.ChangeView(ViewType.Pie)
End Sub
Public Sub ToBars(series As SeriesBase)
series.ChangeView(ViewType.Bar)
End Sub
See Also
Series View s
703
Examples
704
How to: Create a Gantt Chart with Task Links

Charting > Examples > How to: Create a Gantt Chart w ith Task Links
The follow ing example demonstrates how to create a Gantt chart at design time, add activity dependencies and a
progress line, and improve the chart appearance. To display planned task durations and completions, add two
sets of data to the chart, i.e. tw o different series of the Gantt type. The reason is that, for now , XtraCharts can't
automatically calculate the degree of task completion, so one series is used to represent tasks, and another
series is used to represent their degree of completion.
This document consists of the following sections.
Steps 1-6. Creating a New Chart and Adding Data
Steps 7-8. Adding Relations and a Progress Line
Steps 9-12. Customizing the Appearance
Result
existing one.
2.Drop the ChartControl onto the form. Note that in this instance the Chart Wizard may be invoked (in
case its "Show w izard every time a new chart is added" option is enabled). In this example, w e don't
need to use the wizard, so click Cancel to close the w izard's window and manually customize the
ChartControl.
Dock the control to fill the form, by clicking Dock in parent container in the Chart's actions list.
3.To add a new series to the chart, select the ChartControl, open its smart tag and choose the Series...
item in the tasks list. Then, the Series Collection Editor will be invoked.
Note
Note that you may also invoke this editor by clicking on the ellipsis button for the ChartControl.Series property in
the Properties w indow.
4.Then, a dialog appears that allow s you to add a new series to a chart, and maintain their properties.
Click Add... and select the Gantt series view from the list.
704
Examples
705
This series w ill display the planned duration. Switch to the Properties tab and change the series' Name
to Planned.
5.Click Copy to create the similar series.
Then, name that series Completed.

6.Add data points to series by filling in the grid at the Points tab of the Series Collection Editor, as
show n in the following image.
705
Examples
706
Repeat this operation for the Completed data series.
Steps 7-8. Adding Relations and a Progress Line

7.In this step w e w ill add activity dependencies (also called "task links" or "relations"). They will show the
task order and indicate (in our instance) that an activity should not begin until the previous one is
finished.
Use the TaskLink Collection Editor, that is invoked by clicking the button with an ellipsis (...) in the
"Links" column at the Series Collection Editor w indow. The task link collection can be created for each
data point in a series. This point becomes the Parent point of the relation.
706
Examples
707
Add a task link to each point except the first, connecting it with a "Finish-to-Start" type link to the
previous one. The linked points are listed below:
Parent Point
Link Type
Child Point
Implementation
Finish-to-Start
Planning
Demos&Docs
Finish-to-Start
Implementation
Testing
Finish-to-Start
Demos&Docs
Presentation
Finish-to-Start
Testing
Note that in the link representation an arrow is oriented tow ards the parent point of relation.
8.A constant line w ill act as a "progress line" of a Gantt chart. Select the horizontal AxisY (date-time axis
in this instance), click the ConstantLines item at the Property window and invoke the Constant Line
Collection Editor. Click Add to add an item and set its Name to PROGRESS, LineStyle.DashStyle - to
Dash and AxisValue - to 10/10/2008.
707
Examples
708
Steps 9-12. Customizing the Appearance

Now the chart is ready, but it seems clogged, and it's difficult to distinguish between data labels and axis marks.
To improve its appearance, do the following:
9.Hide the chart legend, since it's not very informative. Select it and set its Visible property to false.
10.Select the date-time axis (AxisY). Change its DateTimeOptions.Format to MonthAndDay, GridSpacing
- to 10 (that means one tick mark equals ten days).
Set the Interlaced property to true to lay out the diagram space by creating two sets of stripes w ith
different colors, and alternating the tick marks along the axis.
Adjust the Label.Angle to -30 to visually separate the labels. Then you need an anti-aliasing option set the Label.Antialiasing property to true.
11.Hide the data series labels - set the Label.Visible property to false for each data series.
Mark the task termination point w ith a common symbol for milestones - an inverted triangle. So, change
the MaxValueMarker.Kind to "Inverted Triangle" for the "Planned" series, and set its Visible property
value to true
If we want the milestone to be solid black, w e have to change the follow ing properties of the
MaxValueMarker - the Color - to "Black", the BorderColor to "Black", and the FillStyle.FillMode - to
"Solid".
12.You can also change the bar's w idth so two overlapping series w ould be clearly visible (Series.Vierw.
BarWidth = 0.5 and 0.3), and adjust the arrowhead dimensions (LinkOptions.ArrowHeight = 11,
LinkOptions.ArrowWidth = 9).
708
Examples
709
Result
The resulting chart is show n in the following image.
See Also
Gantt Series Views
Gantt Diagram
709
Examples
710

Charting > Examples > How to: Explode Points of a Pie Chart
This tutorial demonstrates ways in which Pie series points (visually represented as the pie's slices) can be
exploded (sliced out from the series circle). This functionality is also available for series of the Doughnut view type.
To begin, w e need to create a simple unbound chart of the PieSeriesView type. For this example, w e'll use the
chart created for the follow ing tutorial: How to: Change the Display Format for Series Labels. It is show n in the
following image.
Then, select the Pie series, and in the Properties w indow, expand its SeriesBase.View property, to access options
specific for the Pie series. Among these options, locate the PieSeriesViewBase.ExplodeMode property, allow ing
you to choose from several modes where the exploded points are defined. These modes are briefly described
below .
UsePoints
If you choose the PieExplodeMode.UsePoints mode, you should explicitly determine which points to explode, via
the PieSeriesViewBase.ExplodedPoints property. So, click the ellipsis button of this property, and in the invoked
dialog, check the series points to be exploded, and click Close.

710
Examples
711
UseFilters
W hen you select the PieExplodeMode.UseFilters mode, the PieSeriesViewBase.ExplodedPointsFilters property
becomes available. Click its ellipsis button, and in the invoked dialog, create a new filtering criteria, and define its
properties.
For example, to explode points whose values are greater than 30, set the SeriesPointFilter.Condition property to
GreaterThan, SeriesPointFilter.Key - to Value, and SeriesPointFilter.Value - to 30. The result is shown in the
following image.
711
Examples
712
MinValue and MaxValue

The PieExplodeMode.MinValue and PieExplodeMode.MaxValue modes determine the minimum or maximum values
of the series points to be exploded.. The follow ing images demonstrate these settings in action.
PieExplodeMode = MinValue
PieExplodeMode = MaxValue
All and None

Finally, you can explode
the series points, by choosing the PieExplodeMode.All mode, or
of them - by
choosing the PieExplodeMode.None mode. The following images demonstrate these settings in action.
PieExplodeMode = All
PieExplodeMode = None
Others
The special PieExplodeMode.Others mode should be applied when the "TopN" feature is enabled, to explode the
points aggregated under the "Others" argument. The image below demonstrates this mode in a chart created for
the following tutorial: How to: Show N Top Points as a Single Section in a Pie Chart.
712
Examples
713
In addition, use the PieSeriesView Base.ExplodedDistancePercentage property, to define the distance at which the
exploded points are sliced out.
To allow your end users interactively explode the required series points at runtime, enable the PieSeriesView.
RuntimeExploding property.
See Also
713
Examples
714

How to: Add a Chart to a Web Page (Runtime Sample)
Charting > Examples > How to: Add a Chart to a W eb Page (Runtime Sample)
This tutorial demonstrates how a chart can be generated and show n in a w eb page with a button click. For an
alternative approach to this task, refer to How to: Add a Chart to an ASPxCallbackPanel during its Callback
(Runtime Sample).
To demonstrate how this can be done, do the following.
1.Create a new ASP.NET Web Application (Visual Studio 2008 or 2010), or open an existing one.
2.Switch to the Design view of the Default.aspx page, and from the DX.12.2: Common Controls toolbox
tab, drop an ASPxButton onto the page. We'll handle its Click event, to generate a w eb chart.
3.Add the required assemblies to the project.

Note that if you prefer that the assemblies be added automatically (by dropping a WebChartControl
instance onto the page), this affects your web application's Web.config file. To learn about the changes
being made to it, refer to Adding a W eb Chart.
4.Now , double-click the ASPxButton1, to handle its Click event. Add the follow ing code to the event
handler.
Note that prior to accessing elements and properties of a dynamically created WebChartControl, it
should be added to the Page.Form.Controls collection.
C#
C opy C ode
using System;
using DevExpress.XtraCharts.Web;
// ...
protected void ASPxButton1_Click(object sender, EventArgs e) {
// Create a WebChartControl instance.
WebChartControl WebChartControl1 = new WebChartControl();
// Note that a chart isn't initialized until it's added to the form's collection of contro
this.form1.Controls.Add(WebChartControl1);
// Create a line series and add points to it.
Series series1 = new Series("My Series", ViewType.Line);
series1.Points.Add(new SeriesPoint("A", new double[] { 2 }));
series1.Points.Add(new SeriesPoint("B", new double[] { 7 }));
series1.Points.Add(new SeriesPoint("C", new double[] { 5 }));
series1.Points.Add(new SeriesPoint("D", new double[] { 9 }));
WebChartControl1.Series.Add(series1);
}
Visual Basic
C opy C ode
Imports System
Imports DevExpress.XtraCharts.Web
' ...
Protected Sub ASPxButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
714
Examples
715
' Create a WebChartControl instance.
Dim WebChartControl1 As New WebChartControl()
' Note that a chart isn't initialized until it's added
Me.form1.Controls.Add(WebChartControl1)
' Create a line series and add points to it.
Dim series1 As New Series("My Series", ViewType.Line)
series1.Points.Add(New SeriesPoint("A", New Double() {
series1.Points.Add(New SeriesPoint("B", New Double() {
series1.Points.Add(New SeriesPoint("C", New Double() {
series1.Points.Add(New SeriesPoint("D", New Double() {
WebChartControl1.Series.Add(series1)
End Sub
to the form's collection of control
2
7
5
9
}))
}))
}))
}))
Run the w eb application, and click the ASPxButton1 to see the resulting chart.
Show Me
See Also
How to: Bind a W eb Chart to Data (Runtime Sample)
How to: Bind a W eb Chart to an ASPxPivotGrid
715
Examples
716
How to: Add a Chart to an ASPxCallbackPanel during its Callback (Runtime Sa

Charting > Examples > How to: Add a Chart to an ASPxCallbackPanel during its Callback (Runtime Sample)
This tutorial demonstrates how a W ebChartControl can be added to an ASPxCallbackPanel during its
Show Me
2.Add the required assemblies to the project.
Note that if you prefer that the assemblies be added automatically (by dropping a WebChartControl
instance onto the page), this affects your web application's Web.config file. To learn about the changes
being made to it, refer to Adding a W eb Chart.
3.Switch to the Design view of the Default.aspx page, and from the DX.12.2: Common Controls toolbox
tab, drop an ASPxButton onto the page.
4.Then, click the button's smart tag. In the invoked actions list, disable the AutoPostBack property, and
click Client-Side Events... link.
In the invoked dialog, from w ithin the client-side Click event handler, call the PerformCallback() for the
callback panel.
To apply the changes, and quit the dialog, click OK.

5.Now , from the DX.12.2: Navigation & Layout toolbox tab, drop an ASPxCallbackPanel onto the page.
716
Examples
717
6.Set its ClientInstanceName to panel, and handle its Callback event in the follow ing way.
C#
C opy C ode
using System;
using DevExpress.XtraCharts.Web;
using DevExpress.Web.ASPxClasses;
using DevExpress.Web.ASPxCallbackPanel;
// ...
protected void ASPxCallbackPanel1_Callback(object sender,
CallbackEventArgsBase e) {
WebChartControl wbc = new WebChartControl();
wbc.Series.Add(new Series("Series", ViewType.Line));
wbc.Series[0].ArgumentScaleType = ScaleType.DateTime;
wbc.Series[0].ValueScaleType = ScaleType.Numerical;
Random r = new Random();
for (int i = 0; i < 5; i++) {
wbc.Series[0].Points.Add(new SeriesPoint(DateTime.Today.AddDays(i),
((int)((r.NextDouble() * 100) * 10)) / 10.0));
}
wbc.Width = ((ASPxCallbackPanel)sender).Width;
((ASPxCallbackPanel)sender).Controls.Add(wbc);
}
Visual Basic
C opy C ode
Imports System
Imports DevExpress.XtraCharts.Web
Imports DevExpress.Web.ASPxClasses
Imports DevExpress.Web.ASPxCallbackPanel
' ...
Protected Sub ASPxCallbackPanel1_Callback(ByVal sender As Object, _
ByVal e As CallbackEventArgsBase)
Dim wbc As New WebChartControl()
wbc.Series.Add(New Series("Series", ViewType.Line))
wbc.Series(0).ArgumentScaleType = ScaleType.DateTime
wbc.Series(0).ValueScaleType = ScaleType.Numerical
Dim r As New Random()
For i As Integer = 0 To 4
wbc.Series(0).Points.Add(New SeriesPoint(DateTime.Today.AddDays(i), _
(CInt(Fix((r.NextDouble() * 100) * 10))) / 10.0))
Next i
wbc.Width = (CType(sender, ASPxCallbackPanel)).Width
CType(sender, ASPxCallbackPanel).Controls.Add(wbc)
End Sub
Run the application, and view the result.
717
Examples
718
See Also
How to: Bind a W eb Chart to Data (Runtime Sample)
718
Examples
719
How to: Bind a Web Chart to Data (Runtime Sample)

Charting > Examples > How to: Bind a Web Chart to Data (Runtime Sample)
Show Me
This example demonstrates how to bind a web chart to data using series templates. For specific information on
working w ith XtraCharts in an ASP.NET platform, refer to W eb Charting Specifics.
Create a new ASP.NET Web Application, add a WebChartControl, and a data source to it (these steps are similar
to the steps 1-8 of this tutorial).
Then, add a button to your application, and handle its Click event as follow s.
Note
For the W ebChartControl to be properly bound to its data source, and to create series points, consider calling the
ASPxWebControl.DataBind method, after customizing the chart's properties. W hen resolving the data source, the
data source identified by the ASPxDataW ebControlBase.DataSourceID property takes precedence. If the
ASPxDataWebControlBase.DataSourceID is not set, the object identified by the ASPxDataWebControlBase.
DataSource property is used.
C#
C opy C ode
(Default.aspx.cs)
using System;
// ...
namespace WebChartDataBinding {
public partial class _Default : System.Web.UI.Page {
protected void Button1_Click(object sender, EventArgs e) {
WebChartControl1.DataSourceID = "AccessDataSource1";
WebChartControl1.SeriesDataMember = "Year";
WebChartControl1.SeriesTemplate.ArgumentDataMember = "Region";
WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(new string[] {"GSP"});
WebChartControl1.SeriesTemplate.View = new SideBySideBarSeriesView();
WebChartControl1.DataBind();
}
}
}
Visual Basic
C opy C ode
(Default.aspx.vb)
Imports System
' ...
Namespace WebChartDataBinding
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
WebChartControl1.DataSourceID = "AccessDataSource1"
WebChartControl1.SeriesDataMember = "Year"
WebChartControl1.SeriesTemplate.ArgumentDataMember = "Region"
WebChartControl1.SeriesTemplate.ValueDataMembers.AddRange(New String() {"GSP"})
WebChartControl1.SeriesTemplate.View = New SideBySideBarSeriesView()
WebChartControl1.DataBind()
End Sub
End Class
End Namespace
See Also
719
Examples
720
How to: Bind a Web Chart to an ASPxPivotGrid

Charting > Examples > How to: Bind a Web Chart to an ASPxPivotGrid
This tutorial describes how to create a Web page w ith two linked controls: an ASPxPivotGrid bound to a data
source, and a WebChartControl bound to that pivot grid.
Note that in order to synchronize both controls during callbacks, they should both be placed within an
ASPxCallbackPanel, and have their EnableCallbacks properties disabled.
Show Me
This tutorial consists of the following sections.
Bind a Pivot Grid to Data
Bind a Chart to the Pivot Grid
Get the Result
Bind a Pivot Grid to Data
2.Drop the ASPxPivotGrid control from the DX.12.2: Data Toolbox tab onto the Web page.
3.To bind the pivot grid to a data base, click its smart tag, and in the invoked actions list, expand the
drop-dow n menu for the Choose Data Source entry.
And, click New data source... link.
720
Examples
721
4.Then, proceed w ith the steps of the Data Source Configuration Wizard, to connect to your data
source. In this example, we'll use the gsp.mdb file (w hich is shipped w ith the installation of the
XtraCharts suite), copied to the application's folder.
5.After you've connected to a data source, click the pivot grid's smart tag again, and in its actions list,
choose Fields.
721
Examples
722
6.In the invoked dialog, click Retrieve fields, and among the obtained fields, remove the ID field, since it
is unnecessary in this project.
7.Then, for each field, specify its Area property. In particular:

- for the Region field, set this property to ColumnArea;
- for the Year field, set this property to RowArea;
- and, for the GSP field, set this property to DataArea.
722
Examples
723
To close the dialog, and apply the changes, click OK.

8.To avoid grand totals shown in both the grid and chart, you can switch them off, via the
PivotGridOptionsChartDataSourceBase.ProvideColumnGrandTotals and
PivotGridOptionsChartDataSourceBase.ProvideRowGrandTotals properties.
Now, the pivot grid has been successfully bound to data, and it's only left to create a W eb chart bound to this
grid. This is explained in the next section of this tutorial.
723
Examples
724
Bind a Chart to the Pivot Grid

9.Add a chart to the W eb page.
10.Then, click its smart tag, and in the invoked actions list, expand the Choose Data Source drop-down
menu, and select the ASPxPivotGrid1.
11.In the Properties w indow, specify the follow ing properties of the chart's
- set the WebChartControl.SeriesDataMember property to Series;

- the SeriesBase.ArgumentDataMember property to Arguments;
- and, the SeriesBase.ValueDataMembers property to Values.
12.Then, you can adjust other chart's options, e.g. disable its series labels.
Get the Result
The W ebChartControl has now successfully bound to the ASPxPivotGrid. Run the application, and view the result.
724
Examples
725
Note that after you filter the grid's columns and row s right in the browser, this has an immediate effect on the
linked chart.
See Also
725
Examples
726
How to: Show Custom Data Over a Web Chart Using ASPxPopupControl
Charting > Examples > How to: Show Custom Data Over a Web Chart Using ASPxPopupControl
This example demonstrates how to show custom data obtained from a WebChartControl's data source, when a
series point is hovered with the mouse. This can be implemented, using the ASPxPopupControl, with the
ASPxCallbackPanel being placed in it, so that data is obtained during its
.
Show Me
To implement tooltips for a Web chart, do the follow ing.
2.Drop a chart onto the W eb page, and bind it to a data source.
3.From the DX.12.2: Navigation & Layout toolbox tab, drop an ASPxPopupControl onto the page.
Set its ASPxPopupControlBase.ClientInstanceName property to pc.

4.Then, from the same toolbox tab, drop an ASPxCallbackPanel onto the ASPxPopupControl1.
Set its ASPxCallbackPanel.ClientInstanceName property to cbp.

5.Now , sw itch to the DX.12.2: Common Controls toolbox tab, and place tw o ASPxLabel controls w ithin
the ASPxCallbackPanel1.
726
Examples
727
6.Now , select the ASPxCallbackPanel1, and click its smart tag. In its actions list, click Client-Side
Events... link.
In the invoked dialog, handle the CallbackClientSideEvents.EndCallback event in the following way.
JScript
C opy C ode
function(s, e) {
pc.SetHeaderText(s.cpHeaderText);
pc.ShowAtPos(pcX, pcY);
}
7.In a similar w ay, click the chart's smart tag, and in its actions list, click Client-Side Events... link.
727
Examples
728
In the invoked dialog, handle the ChartClientSideEvents.ObjectSelected event in the following way.
JScript
C opy C ode
function(s, e) {
if (e.hitInfo.inSeries) {
var obj = e.additionalHitObject;
if (obj != null){
pcX = e.absoluteX;
pcY = e.absoluteY;
cbp.PerformCallback(obj.argument);
}
}
}
8.Now , handle the ASPxCallbackPanel.Callback event in the following w ay.
C#
using
using
using
using
using
C opy C ode
System;
System.Data;
System.Web.UI;
System.Collections;
DevExpress.Web.ASPxClasses;
728
Examples
729
// ...
string headerText = null;
protected void ASPxCallbackPanel1_Callback(object sender, CallbackEventArgsBase e) {
String param = e.Parameter.Replace("'", "''");
AccessDataSource1.SelectCommand =
"SELECT * FROM [Products] WHERE ProductName = '" + param + "'";
IEnumerable data = AccessDataSource1.Select(DataSourceSelectArguments.Empty);
foreach (DataRowView row in data) {
ASPxLabel1.Text = "Price: " + row["UnitPrice"].ToString();
ASPxLabel2.Text = "Units in Stock: " + row["UnitsInStock"].ToString();
headerText = row["ProductName"].ToString();
break;
}
}
Visual Basic
C opy C ode
Imports System
Imports System.Data
Imports System.Web.UI
Imports System.Collections
' ...
Private headerText As String = Nothing
Protected Sub ASPxCallbackPanel1_Callback(ByVal source As Object, _
ByVal e As CallbackEventArgsBase)
AccessDataSource1.SelectCommand = _
"SELECT * FROM [Products] WHERE ProductName = '" & e.Parameter & "'"
Dim data As IEnumerable = AccessDataSource1.Select(DataSourceSelectArguments.Empty)
For Each row As DataRowView In data
ASPxLabel1.Text = "Price: " & row("UnitPrice").ToString()
ASPxLabel2.Text = "Units in Stock: " & row("UnitsInStock").ToString()
headerText = row("ProductName").ToString()
Exit For
Next row
End Sub
9.And, write the follow ing code into the ASPxCallbackPanel.CustomJSProperties event handler.
C#
C opy C ode
protected void ASPxCallbackPanel1_CustomJSProperties(object sender,

CustomJSPropertiesEventArgs e) {
if (headerText != null)
e.Properties.Add("cpHeaderText", headerText);
}
Visual Basic
C opy C ode
Protected Sub ASPxCallbackPanel1_CustomJSProperties(ByVal sender As Object, _

ByVal e As CustomJSPropertiesEventArgs)
If Not headerText Is Nothing Then
e.Properties.Add("cpHeaderText", headerText)
End If
End Sub
729
Examples
730
See Also
730
Examples
731
How to: Use the Client-Side Model of the WebChartControl

Charting > Examples > How to: Use the Client-Side Model of the W ebChartControl
This tutorial demonstrates how to use the client-side API of the WebChartControl. In particular, it explains how to
convert the point coordinates into the diagram coordinates, and display them on the client side.
To obtain the point coordinates under into the diagram coordinates on the client side, do the follow ing.
2.Drop a W ebChartControl onto the page, and enable its W ebChartControl.EnableClientSideAPI and
WebChartControl.EnableClientSidePointToDiagram properties.
Add a series to the chart. In this example, we'll use a Spline series w ith its SeriesBase.
ArgumentScaleType as date-time. So, for the X-axis, set the AxisBase.DateTimeMeasureUnit property
to Millisecond, and AxisBase.DateTimeGridAlignment to Month. The chart will then look as follows.
3.Then, from the DX.12.2: Navigation & Layout toolbox tab, drop an ASPxRoundPanel onto the page.
And, from the DX.12.2: Common Controls toolbox tab, drop two ASPxLabel controls onto the panel.
And, set their ClientInstanceName properties to lblArgument and lblValue, respectively.
4.Again, select the chart, and click its smart tag. In its actions list, choose Client-Side Events... link.
In the invoked dialog, handle the ASPxClientW ebChartControl.ObjectHotTracked event as follows.
JScript
C opy C ode
function(s, e) {
var chart = s.GetChart();
var coord = chart.diagram.PointToDiagram(e.x, e.y);
lblArgument.SetText(coord.dateTimeArgument);
lblValue.SetText(Math.round(coord.numericalValue*100)/100);
}
731
Examples
732
In a similar way, it's possible to obtain the diagram coordinates of a series (e.g. Line Chart). A sample project is
available online, in the DevExpress Code Central database at How to use the client-side model of the
W ebChartControl.
See Also
How to: Show Custom Data Over a W eb Chart Using ASPxPopupControl
732
Examples
733
How to: Show Tooltips for a WebChartControl

Charting > Examples > How to: Show Tooltips for a WebChartControl
Show Me
This example demonstrates how to display tooltipsfor series points displayed in a W ebChartControl. Note that
tooltips are shown using the ASPxPopupControl.
C#
C opy C ode
(Default.aspx.cs)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web.ASPxClasses;
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
ASPxWebControl.RegisterBaseScript(this);
}
}
Visual Basic
C opy C ode
(Default.aspx.vb)
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
ASPxWebControl.RegisterBaseScript(Me)
End Sub
End Class
aspx
C opy C ode
(Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="DevExpress.XtraCharts.v11.2.Web, Version=11.2.5.0, Culture=neutral, PublicKeyTok
<%@ Register assembly="DevExpress.XtraCharts.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b
<%@ Register assembly="DevExpress.Web.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.style1
{
height: 94px;
}
</style>
</head>
<body>
733
Examples
734
<form id="form1" runat="server">

<script type="text/javascript">
_aspxAttachEventToElement(window, "load", f);
function f() {
var panel = document.getElementById("panel");
_aspxAttachEventToDocument("mousemove", OnMouseMove);
}
function CalculateRelativeX(x, clickedElement) {
var left = _aspxGetAbsoluteX(clickedElement);
return Math.abs(x - left);
}
function CalculateRelativeY(y, clickedElement) {
var top = _aspxGetAbsoluteY(clickedElement);
return Math.abs(y - top);
}
function OnMouseMove(evt) {
var srcElement = _aspxGetEventSource(evt);
if (chart.GetMainDOMElement() != srcElement)
return;
var x = CalculateRelativeX(_aspxGetEventX(evt), srcElement);
var y = CalculateRelativeY(_aspxGetEventY(evt), srcElement);
var hitInfo = chart.HitTest(x, y);
var text = "";
for (var i = 0; i < hitInfo.length; i++)
if (hitInfo[i].additionalObject instanceof ASPxClientSeriesPoint) {
text += "Argument: " + hitInfo[i].additionalObject.argument;
if (!hitInfo[i].additionalObject.isEmpty)
text += "<br>Value: " + hitInfo[i].additionalObject.values[0] + "<br>";
break;
}
if (text.length > 0) {
Tooltip.ShowAtPos(_aspxGetEventX(evt), _aspxGetEventY(evt));
Tooltip.SetContentHtml(text);
} else
Tooltip.Hide();
}
</script>
<table><tr>
<td id="panel" class="style1" />
<dxchartsui:WebChartControl ID="chart" runat="server" Height="200px"
Width="300px" ClientInstanceName="chart">
<SeriesTemplate><ViewSerializable>
<cc1:SideBySideBarSeriesView></cc1:SideBySideBarSeriesView>
</ViewSerializable>
<LabelSerializable>
<cc1:SideBySideBarSeriesLabel LineVisible="True">
<FillStyle><OptionsSerializable>
<cc1:SolidFillOptions></cc1:SolidFillOptions>
</OptionsSerializable>
</FillStyle>
<PointOptionsSerializable>
<cc1:PointOptions></cc1:PointOptions>
</PointOptionsSerializable>
</cc1:SideBySideBarSeriesLabel>
</LabelSerializable>
<LegendPointOptionsSerializable>
<cc1:PointOptions></cc1:PointOptions>
</LegendPointOptionsSerializable>
</SeriesTemplate>
<FillStyle><OptionsSerializable>
<cc1:SolidFillOptions></cc1:SolidFillOptions>
734
Examples
735
</OptionsSerializable>
</FillStyle>
<seriesserializable>
<cc1:Series Name="Series 1">
<points>
<cc1:SeriesPoint ArgumentSerializable="A" Values="1">
</cc1:SeriesPoint>
<cc1:SeriesPoint ArgumentSerializable="B" Values="3">
</cc1:SeriesPoint>
<cc1:SeriesPoint ArgumentSerializable="C" Values="5">
</cc1:SeriesPoint>
</points>
<viewserializable>
<cc1:SideBySideBarSeriesView>
</cc1:SideBySideBarSeriesView>
</viewserializable>
<labelserializable>
<fillstyle>
<optionsserializable>
<cc1:SolidFillOptions />
</optionsserializable>
</fillstyle>
<pointoptionsserializable>
<cc1:PointOptions>
</cc1:PointOptions>
</pointoptionsserializable>
</labelserializable>
<legendpointoptionsserializable>
<cc1:PointOptions>
</cc1:PointOptions>
</legendpointoptionsserializable>
</cc1:Series>
<cc1:Series Name="Series 2">
<points>
<cc1:SeriesPoint ArgumentSerializable="A" Values="2">
</cc1:SeriesPoint>
<cc1:SeriesPoint ArgumentSerializable="B" Values="4">
</cc1:SeriesPoint>
<cc1:SeriesPoint ArgumentSerializable="C" Values="6">
</cc1:SeriesPoint>
</points>
<viewserializable>
<cc1:SideBySideBarSeriesView>
</cc1:SideBySideBarSeriesView>
</viewserializable>
<labelserializable>
<fillstyle>
<optionsserializable>
<cc1:SolidFillOptions />
</optionsserializable>
</fillstyle>
<pointoptionsserializable>
<cc1:PointOptions>
</cc1:PointOptions>
</pointoptionsserializable>
</labelserializable>
<legendpointoptionsserializable>
735
Examples
736
<cc1:PointOptions>
</cc1:PointOptions>
</legendpointoptionsserializable>
</cc1:Series>
</seriesserializable>
<diagramserializable>
<cc1:XYDiagram>
<axisx visibleinpanesserializable="-1">
<range sidemarginsenabled="True" />
</axisx>
<axisy visibleinpanesserializable="-1">
<range sidemarginsenabled="True" />
</axisy>
</cc1:XYDiagram>
</diagramserializable>
</dxchartsui:WebChartControl>
</tr>
</table>
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server"
ClientInstanceName="Tooltip" ShowHeader="false" Width="0" Height="0">
<ContentStyle Wrap="False"></ContentStyle>
</dx:ASPxPopupControl>
</form>
</body>
</html>
736
Examples
737
Chart Elements
How to: Add Titles to a Chart
Charting > Examples > How to: Add Titles to a Chart
This example demonstrates how chart titles can be accessed and customized at runtime.
C#
C opy C ode
// Create chart titles.

ChartTitle chartTitle1 = new ChartTitle();
// Define the text for the titles.
chartTitle1.Text = "<i>Basic</i> <b>HTML</b> <u>is</u> <color=blue>supported</color>.";
chartTitle2.Text = "The capability to word-wrap is available for chart titles.";
chartTitle2.WordWrap = true;
chartTitle2.MaxLineCount = 2;
// Define the alignment of the titles.
chartTitle1.Alignment = StringAlignment.Center;
chartTitle2.Alignment = StringAlignment.Near;
// Place the titles where it's required.
chartTitle1.Dock = ChartTitleDockStyle.Top;
chartTitle2.Dock = ChartTitleDockStyle.Bottom;
// Customize a title's appearance.
chartTitle1.Antialiasing = true;
chartTitle1.Font = new Font("Tahoma", 14, FontStyle.Bold);
chartTitle1.TextColor = Color.Red;
chartTitle1.Indent = 10;
// Add the titles to the chart.
chartControl1.Titles.AddRange(new ChartTitle[] {
chartTitle1,
chartTitle2});
Visual Basic
C opy C ode
' Create chart titles.

Dim chartTitle1 As New ChartTitle()
' Define the text for the titles.
chartTitle1.Text = "<i>Basic</i> <b>HTML</b> <u>is</u> <color=blue>supported</color>."
chartTitle2.Text = "The capability to word-wrap is available for chart titles."
chartTitle2.WordWrap = True
chartTitle2.MaxLineCount = 2
' Define the alignment of the titles.
chartTitle1.Alignment = StringAlignment.Center
chartTitle2.Alignment = StringAlignment.Near
' Place the titles where it's required.
chartTitle1.Dock = ChartTitleDockStyle.Top
chartTitle2.Dock = ChartTitleDockStyle.Bottom
' Customize a title's appearance.
chartTitle1.Antialiasing = True
chartTitle1.Font = New Font("Tahoma", 14, FontStyle.Bold)
chartTitle1.TextColor = Color.Red
chartTitle1.Indent = 10
' Add the titles to the chart.
chartControl1.Titles.AddRange(New ChartTitle() { chartTitle1, chartTitle2})
737
Examples
738
Show Me
See Also
Chart Titles
738
Examples
739
How to: Enable Word Wrapping for Chart Titles

Charting > Examples > How to: Enable Word W rapping for Chart Titles
This example demonstrates how word-wrapping can be enabled for chart titles at runtime. In addition, you can
determine the maximum number of lines in which a title is allow ed to w rap.
C#
C opy C ode
// Create a title and add it to the chart's collection.

ChartControl1.Titles.Add(chartTitle1);
chartTitle1.Text = "Just a Very Lengthy Title for Such a Small Chart";
// Enable word-wrapping for the title,
// and define a limit for its lines.
chartTitle1.WordWrap = true;
chartTitle1.MaxLineCount = 2;
Visual Basic
C opy C ode
' Create a title and add it to the chart's collection.

myChart.Titles.Add(chartTitle1)
chartTitle1.Text = "Just a Very Lengthy Title for Such a Small Chart"
' Enable word-wrapping for the title,
' and define a limit for its lines.
chartTitle1.WordWrap = True
chartTitle1.MaxLineCount = 2
The title is cut by the ellipsis, since it's text exceeds the defined tw o lines. If required, you can increase the
DockableTitle.MaximumLinesCount property's value, so the entire text w ill fit. Note that in this case, the chart's
diagram, in turn, w ill be shrunk.
Show Me
739
Examples
740
See Also
Chart Titles
740
Examples
741
How to: Create a Multi-Pane Chart

Charting > Examples > How to: Create a Multi-Pane Chart
The follow ing example demonstrates how to create a chart with multiple series placed in separate panes.
For the purpose of simplicity, in this tutorial, data for the chart's series is set manually. How ever, in the real-life
charts, it's possible to use any other type of a datasource.
This topic consists of the follow ing sections:
Create a Chart and Provide Its Data
Create and Customize Panes
Get the Result
Create a Chart and Provide Its Data
existing one.
2.Drop the ChartControl onto the form. Note that in this instance the Chart Wizard may be invoked (in
case its "Show w izard every time a new chart is added" option is enabled). In this example, w e don't
need to use the wizard, so click the Cancel button to close the w izard's w indow and manually customize
the ChartControl.
Note
To fit the ChartControl on the form in which it is contained, set its Dock property to Fill.
3.In the Properties window, locate the Series item and click its ellipsis button. The Series Collection
Editor dialog will be invoked.
In this dialog, click Add..., to create a new series of the bar view type. Then, click Copy tw o times, to
create tw o more similar series.
Define the data for these series as show n in the following table.
Argument
Series 1 value
Series 2 value
Series 3 value
To apply the changes, click Close.
Create and Customize Panes

4.Select the Series2 element in the chart. Then, invoke the drop-down list of the Series2.View.Pane
property, and click the New Pane button there. Now, a new pane (named Pane1) is created and the
741
Examples
742
selected series is placed on it.
Repeat this procedure for the Series3, so that it is placed in the Pane2.
5.Select the DefaultPane element, and set its XYDiagramPaneBase.Weight property to 1.5, XYDiagram2D.
PaneLayoutDirection to Horizontal, XYDiagram.Rotated to true and XYDiagram2D.PaneDistance to 5.
6.Select the Axis X element. In the Property w indow, locate the VisibleInPanes property and click its
ellipsis button. In the invoked Axis Visibility dialog, check DefaultPane, so that only the current axis is
show n in it.
Also, for the AxisX, you can set the Axis.Reverse property to true, so that arguments are displayed
descending from top to bottom.
Get the Result
The complete chart is show n in the following image.
See Also
Panes
742
Examples
743
How to: Display a Series in an Additional Pane (Runtime Sample)

Charting > Examples > How to: Display a Series in an Additional Pane (Runtime Sample)
This example demonstrates how panes can be accessed and customized at runtime.
Assuming that there are tw o series of the line view type in the chart, in the following code, we create an
additional pane, and assign the second series to it. In addition, a secondary axis is created and assigned to that
series, and it is also visible in the additional pane.
C#
C opy C ode
using System;
// ...
// Create a new chart.
// Create two series.
Series series2 = new Series("Series 2", ViewType.Line);
// Add points to them, with their arguments different.
series1.Points.Add(new SeriesPoint("A", 10));
series1.Points.Add(new SeriesPoint("B", 12));
series1.Points.Add(new SeriesPoint("C", 17));
series1.Points.Add(new SeriesPoint("D", 14));
series2.Points.Add(new SeriesPoint("I", 2500));
series2.Points.Add(new SeriesPoint("II", 3800));
series2.Points.Add(new SeriesPoint("III", 1500));
series2.Points.Add(new SeriesPoint("IV", 1300));
// Add both series to the chart.
chartControl1.Series.AddRange(new Series[] { series1, series2 });
// Hide the legend (optional).
// Cast the chart's diagram to the XYDiagram type,
// to access its axes and panes.
// Add secondary axes to the diagram, and adjust their options.
diagram.SecondaryAxesX.Add(new SecondaryAxisX("My Axis X"));
diagram.SecondaryAxesY.Add(new SecondaryAxisY("My Axis Y"));
diagram.SecondaryAxesX[0].Alignment = AxisAlignment.Near;
diagram.SecondaryAxesY[0].Alignment = AxisAlignment.Near;
// Add a new additional pane to the diagram.
diagram.Panes.Add(new XYDiagramPane("My Pane"));
// Assign both the additional pane and, if required,
// the secondary axes to the second series.
LineSeriesView myView = (LineSeriesView)series2.View;
myView.AxisX = diagram.SecondaryAxesX[0];
myView.AxisY = diagram.SecondaryAxesY[0];
// Note that the created pane has the zero index in the collection,
// because the existing Default pane is a separate entity.
myView.Pane = diagram.Panes[0];
// Customize the layout of the diagram's panes.
diagram.PaneDistance = 10;
diagram.PaneLayoutDirection = PaneLayoutDirection.Horizontal;
diagram.DefaultPane.SizeMode = PaneSizeMode.UseWeight;
diagram.DefaultPane.Weight = 1.2;
}
743
Examples
Visual Basic
744
C opy C ode
Imports System
' ...
' Create a new chart.
' Create two series.
Dim series2 As New Series("Series 2", ViewType.Line)
' Add points to them, with their arguments different.
series1.Points.Add(New SeriesPoint("A", 10))
series1.Points.Add(New SeriesPoint("B", 12))
series1.Points.Add(New SeriesPoint("C", 17))
series1.Points.Add(New SeriesPoint("D", 14))
series2.Points.Add(New SeriesPoint("I", 2500))
series2.Points.Add(New SeriesPoint("II", 3800))
series2.Points.Add(New SeriesPoint("III", 1500))
series2.Points.Add(New SeriesPoint("IV", 1300))
' Add both series to the chart.
chartControl1.Series.AddRange(New Series() { series1, series2 })
' Hide the legend (optional).
' Cast the chart's diagram to the XYDiagram type,
' to access its axes and panes.
' Add secondary axes to the diagram, and adjust their options.
diagram.SecondaryAxesX.Add(New SecondaryAxisX("My Axis X"))
diagram.SecondaryAxesY.Add(New SecondaryAxisY("My Axis Y"))
diagram.SecondaryAxesX(0).Alignment = AxisAlignment.Near
diagram.SecondaryAxesY(0).Alignment = AxisAlignment.Near
' Add a new additional pane to the diagram.
diagram.Panes.Add(New XYDiagramPane("My Pane"))
' Assign both the additional pane and, if required,
' the secondary axes to the second series.
Dim myView As LineSeriesView = CType(series2.View, LineSeriesView)
myView.AxisX = diagram.SecondaryAxesX(0)
myView.AxisY = diagram.SecondaryAxesY(0)
' Note that the created pane has the zero index in the collection,
' because the existing Default pane is a separate entity.
myView.Pane = diagram.Panes(0)
' Customize the layout of the diagram's panes.
diagram.PaneDistance = 10
diagram.PaneLayoutDirection = PaneLayoutDirection.Horizontal
diagram.DefaultPane.SizeMode = PaneSizeMode.UseWeight
diagram.DefaultPane.Weight = 1.2
End Sub
744
Examples
745
Show Me
See Also
Panes
745
Examples
746
How to: Display Automatically Created Series in Separate Panes

Charting > Examples > How to: Display Automatically Created Series in Separate Panes
This example demonstrates how to display automatically created series in separate panes.
existing one.
2.Include all necessary assemblies to the References list of your project.
3.Open the Solution Explorer window (e.g. by pressing CTRL+ALT+L), right-click the
WindowsApplication1 item and in the invoked menu, point to Add and click Existing Item.... Then,
locate the gsp.mdb file (it is shipped with XtraCharts suite and located in the directory, w here you
installed DevExpress demos) and click Add. In the displayed dialog, select the GSP table of this
database.
A dataset (named gspDataSet) is automatically created after performing the above steps.
4.Drop a button onto the form and add the following code to the Button1.Click event handler.
C#
C opy C ode
using System;
using DevExpress.XtraEditors;
using gspDataSetTableAdapters;
// ...
// Create and customize a form.
XtraForm form = new XtraForm();
form.Text = "Multiple Panes and Chart Binding";
form.Size = new Size(800, 600);
// Create a chart.
// Handle the chart's BoundDataChanged event.
chart.BoundDataChanged += new BoundDataChangedEventHandler(chart_BoundDataChanged);
// Initialize a dataset. Initialize and fill data adapter.
gspDataSet dataSet = new gspDataSet();
GSPTableAdapter dataAdapter = new GSPTableAdapter();
dataAdapter.Fill(dataSet.GSP);
// Assign the chart's datasource to the created dataset.
chart.DataSource = dataSet.GSP;
// Define a data member for the chart's series.
chart.SeriesDataMember = "Year";
// Define an argument and value data members for the chart's series template,
// so that the created series inherit these properties.
chart.SeriesTemplate.ArgumentDataMember = "Region";
chart.SeriesTemplate.ValueDataMembers[0] = "GSP";
// Add the chart to the form's controls collection and fit the chart to the form's dimensions.
// Show the result.
form.Show();
}
private void chart_BoundDataChanged(object sender, EventArgs e) {
ChartControl chart = (ChartControl)sender;
// Check whether the chart contains series.
if(chart.Series.Count > 0) {
// Obtain a diagram and clear its collection of panes.
XYDiagram diagram = (XYDiagram)chart.Diagram;
diagram.Panes.Clear();
746
Examples
747
// Create a pane for each series.
for(int i = 1; i < chart.Series.Count; i++) {
XYDiagramPane pane = new XYDiagramPane("The Pane's Name");
diagram.Panes.Add(pane);
XYDiagramSeriesViewBase view = (XYDiagramSeriesViewBase)chart.Series[i].View;
view.Pane = pane;
}
}
}
Visual Basic
C opy C ode
Imports System
Imports DevExpress.XtraEditors
Imports gspDataSetTableAdapters
' ...
' Create and customize a form.
Dim form As XtraForm = New XtraForm()
form.Text = "Multiple Panes and Chart Binding"
form.Size = New Size(800, 600)
' Create a chart.
Dim chart As ChartControl = New ChartControl()
' Handle the chart's BoundDataChanged event.
AddHandler chart.BoundDataChanged, AddressOf chart_BoundDataChanged
' Initialize a dataset. Initialize and fill data adapter.
Dim dataSet As gspDataSet = New gspDataSet()
Dim dataAdapter As GSPTableAdapter = New GSPTableAdapter()
dataAdapter.Fill(dataSet.GSP)
' Assign the chart's datasource to the created dataset.
chart.DataSource = dataSet.GSP
' Define a data member for the chart's series.
chart.SeriesDataMember = "Year"
' Define an argument and value data members for the chart's series template,
' so that the created series inherit these properties.
chart.SeriesTemplate.ArgumentDataMember = "Region"
chart.SeriesTemplate.ValueDataMembers(0) = "GSP"
' Add the chart to the form's controls collection and fit the chart to the form's dimensions.
' Show the result.
form.Show()
End Sub
Private Sub chart_BoundDataChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim chart As ChartControl = CType(sender, ChartControl)
' Check whether the chart contains series.
If chart.Series.Count > 0 Then
' Obtain a diagram and clear its collection of panes.
Dim diagram As XYDiagram = CType(chart.Diagram, XYDiagram)
diagram.Panes.Clear()
' Create a pane for each series.
Dim i As Integer = 1
Do While i < chart.Series.Count
Dim pane As XYDiagramPane = New XYDiagramPane("The Pane's Name")
diagram.Panes.Add(pane)
Dim view As XYDiagramSeriesViewBase = CType _
(chart.Series(i).View, XYDiagramSeriesViewBase)
view.Pane = pane
747
Examples
748
i += 1
Loop
End If
End Sub
Show Me
See Also
Panes
748
Examples
749
How to: Add a Title to an Axis

Charting > Examples > How to: Add a Title to an Axis
This example demonstrates how to access an axis title at runtime.
To do this, cast your diagram object to the required diagram type to access its axes. Then, you can access the
Axis2D.Title property.
C#
C opy C ode
// Customize the appearance of the X-axis title.
diagram.AxisX.Title.Visible = true;
diagram.AxisX.Title.Alignment = StringAlignment.Center;
diagram.AxisX.Title.Text = "X-axis Title";
diagram.AxisX.Title.TextColor = Color.Red;
diagram.AxisX.Title.Antialiasing = true;
diagram.AxisX.Title.Font = new Font("Tahoma", 14, FontStyle.Bold);
// Customize the appearance of the Y-axis title.
diagram.AxisY.Title.Visible = true;
diagram.AxisY.Title.Alignment = StringAlignment.Center;
diagram.AxisY.Title.Text = "Y-axis Title";
diagram.AxisY.Title.TextColor = Color.Blue;
diagram.AxisY.Title.Antialiasing = true;
diagram.AxisY.Title.Font = new Font("Tahoma", 14, FontStyle.Bold);
Visual Basic
C opy C ode
' Customize the appearance of the X-axis title.
diagram.AxisX.Title.Visible = True
diagram.AxisX.Title.Alignment = StringAlignment.Center
diagram.AxisX.Title.Text = "X-axis Title"
diagram.AxisX.Title.TextColor = Color.Red
diagram.AxisX.Title.Antialiasing = True
diagram.AxisX.Title.Font = New Font("Tahoma", 14, FontStyle.Bold)
' Customize the appearance of the Y-axis title.
diagram.AxisY.Title.Visible = True
diagram.AxisY.Title.Alignment = StringAlignment.Center
diagram.AxisY.Title.Text = "Y-axis Title"
diagram.AxisY.Title.TextColor = Color.Blue
diagram.AxisY.Title.Antialiasing = True
diagram.AxisY.Title.Font = New Font("Tahoma", 14, FontStyle.Bold)
749
Examples
750
Show Me
See Also
Axis Titles
How to: Determine w hether an Axis Title is Being Hovered by the Mouse Pointer
750
Examples
751
How to: Determine whether an Axis Title is Being Hovered by the Mouse
Pointer
Charting > Examples > How to: Determine whether an Axis Title is Being Hovered by the Mouse Pointer
This example demonstrates how you can determine whether an axis title is being hovered by the mouse pointer,
and if so, display its type (AxisTitleX or AxisTitleY) in a message box.
C#
C opy C ode
using System;
// ...
private void chartControl1_ObjectHotTracked(object sender, HotTrackEventArgs e) {
if (e.AdditionalObject is AxisTitle) {
MessageBox.Show(e.AdditionalObject.GetType().ToString());
}
}
Visual Basic
C opy C ode
Imports System
' ...
Private Sub chartControl1_ObjectHotTracked(ByVal sender As Object, _
ByVal e As HotTrackEventArgs) Handles chartControl1.ObjectHotTracked
If TypeOf e.AdditionalObject Is AxisTitle Then
MessageBox.Show(e.AdditionalObject.GetType().ToString())
End If
End Sub
Show Me
751
Examples
752
See Also
Axis Titles
752
Examples
753
How to: Add Secondary Axes to a Chart

Charting > Examples > How to: Add Secondary Axes to a Chart
This example demonstrates how secondary axes can be added to a chart at runtime.
C#
C opy C ode
using System;
// ...
// Create a new chart.
// Create two series.
Series series2 = new Series("Series 2", ViewType.Line);
// Add points to them, with their arguments different.
series1.Points.Add(new SeriesPoint("A", 10));
series1.Points.Add(new SeriesPoint("B", 12));
series1.Points.Add(new SeriesPoint("C", 17));
series1.Points.Add(new SeriesPoint("D", 14));
series2.Points.Add(new SeriesPoint("I", 1500));
series2.Points.Add(new SeriesPoint("II", 1800));
series2.Points.Add(new SeriesPoint("III", 2500));
series2.Points.Add(new SeriesPoint("IV", 3300));
// Add both series to the chart.
chartControl1.Series.AddRange(new Series[] { series1, series2 });
// Hide the legend (optional).
// Create two secondary axes, and add them to the chart's Diagram.
SecondaryAxisX myAxisX = new SecondaryAxisX("my X-Axis");
SecondaryAxisY myAxisY = new SecondaryAxisY("my Y-Axis");
((XYDiagram)chartControl1.Diagram).SecondaryAxesX.Add(myAxisX);
((XYDiagram)chartControl1.Diagram).SecondaryAxesY.Add(myAxisY);
// Assign the series2 to the created axes.
((LineSeriesView)series2.View).AxisX = myAxisX;
((LineSeriesView)series2.View).AxisY = myAxisY;
// Customize the appearance of the secondary axes (optional).
myAxisX.Title.Text = "A Secondary X-Axis";
myAxisX.Title.Visible = true;
myAxisX.Title.TextColor = Color.Red;
myAxisX.Label.TextColor = Color.Red;
myAxisX.Color = Color.Red;
myAxisY.Title.Text = "A Secondary Y-Axis";
myAxisY.Title.Visible = true;
myAxisY.Title.TextColor = Color.Blue;
myAxisY.Label.TextColor = Color.Blue;
myAxisY.Color = Color.Blue;
}
Visual Basic
Imports
Imports
Imports
Imports
' ...
C opy C ode
System
System.Drawing
System.Windows.Forms
DevExpress.XtraCharts
753
Examples
754

Handles MyBase.Load
' Create a new chart.
' Create two series.
Dim series2 As New Series("Series 2", ViewType.Line)
' Add points to them, with their arguments different.
series1.Points.Add(New SeriesPoint("A", 10))
series1.Points.Add(New SeriesPoint("B", 12))
series1.Points.Add(New SeriesPoint("C", 17))
series1.Points.Add(New SeriesPoint("D", 14))
series2.Points.Add(New SeriesPoint("I", 1500))
series2.Points.Add(New SeriesPoint("II", 1800))
series2.Points.Add(New SeriesPoint("III", 2500))
series2.Points.Add(New SeriesPoint("IV", 3300))
' Add both series to the chart.
chartControl1.Series.AddRange(New Series() { series1, series2 })
' Hide the legend (optional).
' Create two secondary axes, and add them to the chart's Diagram.
Dim myAxisX As New SecondaryAxisX("my X-Axis")
Dim myAxisY As New SecondaryAxisY("my Y-Axis")
CType(chartControl1.Diagram, XYDiagram).SecondaryAxesX.Add(myAxisX)
CType(chartControl1.Diagram, XYDiagram).SecondaryAxesY.Add(myAxisY)
' Assign the series2 to the created axes.
CType(series2.View, LineSeriesView).AxisX = myAxisX
CType(series2.View, LineSeriesView).AxisY = myAxisY
' Customize the appearance of the secondary axes (optional).
myAxisX.Title.Text = "A Secondary X-Axis"
myAxisX.Title.Visible = True
myAxisX.Title.TextColor = Color.Red
myAxisX.Label.TextColor = Color.Red
myAxisX.Color = Color.Red
myAxisY.Title.Text = "A Secondary Y-Axis"
myAxisY.Title.Visible = True
myAxisY.Title.TextColor = Color.Blue
myAxisY.Label.TextColor = Color.Blue
myAxisY.Color = Color.Blue
End Sub
Show Me
754
Examples
755
See Also
Primary and Secondary Axes
755
Examples
756
How to: Create Custom Axis Labels

Charting > Examples > How to: Create Custom Axis Labels
This example demonstrates how custom axis labels can be created and customized at runtime.
C#
// Cast the chart's diagram to the XYDiagram type, to access its

// Add two custom labels to the X-axis' collection.
diagram.AxisX.CustomLabels.Add(new CustomAxisLabel("Custom Label
diagram.AxisX.CustomLabels.Add(new CustomAxisLabel("Custom Label
// Define their AxisValue. Since the custom labels belong to the
// this property determines the series argument, to which labels
diagram.AxisX.CustomLabels[0].AxisValue = "B";
diagram.AxisX.CustomLabels[1].AxisValue = "D";
// Customize the custom labels' appearance.
diagram.AxisX.Label.TextColor = Color.Red;
C opy C ode
axes.
1"));
2"));
X-axis,
should stick.
Visual Basic
C opy C ode
' Add two custom labels to the X-axis' collection.
diagram.AxisX.CustomLabels.Add(New CustomAxisLabel("Custom Label 1"))
diagram.AxisX.CustomLabels.Add(New CustomAxisLabel("Custom Label 2"))
' Define their AxisValue. Since the custom labels belong to the X-axis,
' this property determines the series argument, to which labels should stick.
diagram.AxisX.CustomLabels(0).AxisValue = "B"
diagram.AxisX.CustomLabels(1).AxisValue = "D"
' Customize the custom labels' appearance.
diagram.AxisX.Label.TextColor = Color.Red
Show Me
See Also
Axis Labels
756
Examples
757
How to: Individually Customize Axis Labels

Charting > Examples > How to: Individually Customize Axis Labels
Apart from the capability to customize the overall appearance of axis labels, you can obtain individual axis labels
at runtime. Then, it's possible to apply all the options available for axis labels to them, individually. For example,
based on some criteria (e.g. an axis value threshold), you can apply different formatting to axis labels.
For this, the special ChartControl.CustomDraw AxisLabel event is introduced. Handle it to obtain axis labels.
Note
For the W ebChartControl you should handle its W ebChartControl.CustomDrawSeries event to implement this task.
The follow ing code demonstrates one possible implementation of this capability.
C#
C opy C ode
private void chartControl1_CustomDrawAxisLabel(object sender, CustomDrawAxisLabelEventArgs e) {

AxisBase axis = e.Item.Axis;
if (axis is AxisY || axis is AxisY3D || axis is RadarAxisY) {
double axisValue = (double)e.Item.AxisValue;
if (axisValue < 0) {
e.Item.TextColor = Color.Red;
}
else if (axisValue > 0) {
e.Item.Text = "+" + e.Item.Text;
e.Item.TextColor = Color.Green;
}
else if (axisValue == 0) {
e.Item.Text = "Zero";
}
}
}
Visual Basic
C opy C ode
Private Sub chartControl1_CustomDrawAxisLabel(sender As Object, e As CustomDrawAxisLabelEventArgs)

Dim axis As AxisBase = e.Item.Axis
If TypeOf axis Is AxisY Or TypeOf axis Is AxisY3D Or TypeOf axis Is RadarAxisY Then
Dim axisValue As Double = CDbl(e.Item.AxisValue)
If axisValue < 0 Then
e.Item.TextColor = Color.Red
Else
If axisValue > 0 Then
e.Item.Text = "+" + e.Item.Text
e.Item.TextColor = Color.Green
Else
If axisValue = 0 Then
e.Item.Text = "Zero"
End If
End If
End If
End If
End Sub
757
Examples
758
Show Me
See Also
Axis Labels
758
Examples
759

Charting > Examples > How to: Add a Constant Line to an Axis
This example demonstrates how a constant line can be created and customized at runtime.
Since constant lines belong to a diagram's axis, it's first required to cast your diagram object to the appropriate
diagram's type. After that, it's possible to access axes and manage their constant lines collection.
C#
C opy C ode
// Create a constant line.
ConstantLine constantLine1 = new ConstantLine("Constant Line 1");
diagram.AxisY.ConstantLines.Add(constantLine1);
// Define its axis value.
constantLine1.AxisValue = 7;
// Customize the behavior of the constant line.
constantLine1.Visible = true;
constantLine1.ShowInLegend = true;
constantLine1.LegendText = "Some Threshold";
constantLine1.ShowBehind = false;
// Customize the constant line's title.
constantLine1.Title.Visible = true;
constantLine1.Title.Text = "Constant Line Title";
constantLine1.Title.TextColor = Color.Red;
constantLine1.Title.Antialiasing = false;
constantLine1.Title.Font = new Font("Tahoma", 14, FontStyle.Bold);
constantLine1.Title.ShowBelowLine = true;
constantLine1.Title.Alignment = ConstantLineTitleAlignment.Far;
// Customize the appearance of the constant line.
constantLine1.Color = Color.Red;
constantLine1.LineStyle.DashStyle = DashStyle.Dash;
constantLine1.LineStyle.Thickness = 2;
Visual Basic
C opy C ode
' Create a constant line.
Dim constantLine1 As New ConstantLine("Constant Line 1")
diagram.AxisY.ConstantLines.Add(constantLine1)
' Define its axis value.
constantLine1.AxisValue = 7
' Customize the behavior of the constant line.
constantLine1.Visible = True
constantLine1.ShowInLegend = True
constantLine1.LegendText = "Some Threshold"
constantLine1.ShowBehind = False
' Customize the constant line's title.
constantLine1.Title.Visible = True
constantLine1.Title.Text = "Constant Line Title"
constantLine1.Title.TextColor = Color.Red
constantLine1.Title.Antialiasing = False
constantLine1.Title.Font = New Font("Tahoma", 14, FontStyle.Bold)
constantLine1.Title.ShowBelowLine = True
constantLine1.Title.Alignment = ConstantLineTitleAlignment.Far
' Customize the appearance of the constant line.
constantLine1.Color = Color.Red
constantLine1.LineStyle.DashStyle = DashStyle.Dash
constantLine1.LineStyle.Thickness = 2
759
Examples
760
Show Me
See Also
Constant Lines
760
Examples
761
How to: Add a Strip to an Axis

Charting > Examples > How to: Add a Strip to an Axis
This example demonstrates how strips can be created and customized at runtime.
Since strips reside in an appropriate axis collection, you should first cast your diagram object to the required
diagram's type. Then, you can access the collection via the Axis2D.Strips property.
C#
C opy C ode
// Create a strip with its maximum and minimum axis value defined.
diagram.AxisY.Strips.Add(new Strip("Strip 1", 5, 15));
// Customize the strip's behavior.
diagram.AxisY.Strips[0].Visible = true;
diagram.AxisY.Strips[0].ShowAxisLabel = true;
diagram.AxisY.Strips[0].AxisLabelText = "My Range";
diagram.AxisY.Strips[0].ShowInLegend = true;
diagram.AxisY.Strips[0].LegendText = "A Sample Strip";
// Customize the strip's appearance.
diagram.AxisY.Strips[0].Color = Color.CornflowerBlue;
diagram.AxisY.Strips[0].FillStyle.FillMode = FillMode.Empty;
Visual Basic
C opy C ode
' Create a strip with its maximum and minimum axis value defined.
diagram.AxisY.Strips.Add(new Strip("Strip 1", 5, 15))
' Customize the strip's behavior.
diagram.AxisY.Strips(0).Visible = True
diagram.AxisY.Strips(0).ShowAxisLabel = True
diagram.AxisY.Strips(0).AxisLabelText = "My Range"
diagram.AxisY.Strips(0).ShowInLegend = True
diagram.AxisY.Strips(0).LegendText = "A Sample Strip"
' Customize the strip's appearance.
diagram.AxisY.Strips(0).Color = Color.CornflowerBlue
diagram.AxisY.Strips(0).FillStyle.FillMode = FillMode.Empty
Show Me
See Also
Strips
761
Examples
762

Charting > Examples > How to: Enable Automatic Scale Breaks for an Axis
This tutorial demonstrates how an axis range can be automatically split by scale breaks, if the chart's data
suggests their use. To learn about an alternative approach - manual scale breaks creation, refer to How to:
Manually Insert a Scale Break into an Axis or How to: Manually Insert a Scale Break into an Axis (Runtime Sample).
W ith XtraCharts, you can allow your chart to automatically split an axis range by scale breaks, w hen they are
required. Note that both auto-created and manual scale breaks on an axis can co-exist, without affecting the
chart's output, in cases where their ranges interfere.
To enable automatic scale breaks at design time, select the required axis, expand its Axis.AutoScaleBreaks
property, and set the AutoScaleBreaks.Enabled property to true.
To define the maximum number for automatic scale breaks, use the AutoScaleBreaks.MaxCount property.
In addition, you can use the Axis.ScaleBreakOptions property, to adjust the common appearance of both manual
and auto-created scale breaks.
Use the follow ing code, to enable automatic scale breaks at runtime.
C#
C opy C ode
// Cast your diagram object to an appropriate diagram type,

// to access its axes.
// Enable automatic scale breaks creation,
// and define their maximum number.
diagram.AxisY.AutoScaleBreaks.Enabled = true;
diagram.AxisY.AutoScaleBreaks.MaxCount = 5;
// Define the scale breaks' options, which are common
// for both manual and automatic scale breaks.
diagram.AxisY.ScaleBreakOptions.Style = ScaleBreakStyle.Waved;
diagram.AxisY.ScaleBreakOptions.SizeInPixels = 30;
diagram.AxisY.ScaleBreakOptions.Color = Color.Turquoise;
Visual Basic
C opy C ode
' Cast your diagram object to an appropriate diagram type,

' to access its axes.
762
Examples
763

' Enable automatic scale breaks creation,
' and define their maximum number.
diagram.AxisY.AutoScaleBreaks.Enabled = True
diagram.AxisY.AutoScaleBreaks.MaxCount = 5
' Define the scale breaks' options, which are common
' for both manual and automatic scale breaks.
diagram.AxisY.ScaleBreakOptions.Style = ScaleBreakStyle.Waved
diagram.AxisY.ScaleBreakOptions.SizeInPixels = 30
diagram.AxisY.ScaleBreakOptions.Color = Color.Turquoise
A hypothetical result is shown in the follow ing image.
Show Me
See Also
Scale Breaks
763
Examples
764

Charting > Examples > How to: Manually Insert a Scale Break into an Axis
This tutorial demonstrates how an axis range can be manually split by scale breaks at design time. For the
runtime example, refer to How to: Manually Insert a Scale Break into an Axis (Runtime Sample). For a general
information, refer to Scale Breaks. To learn about an alternative approach - automatic scale breaks creation, refer
to How to: Enable Automatic Scale Breaks for an Axis.
This tutorial consists of the following sections.
Steps 6-7. Insert and Adjust Scale Breaks
existing one.
2.Drop the ChartControl onto the form. Note that in this instance, the Chart Wizard may be invoked (if its
"Show w izard every time a new chart is added" option is enabled). In this example, w e don't need to
use the wizard, so click Cancel to close the w izard's window and manually customize the ChartControl.
Dock the control to fill the form by clicking Dock in parent container in the Chart's actions list.
3.To add a new series to the chart, select the ChartControl, open its smart tag and choose the Series...
item in the tasks list. Then, the Series Collection Editor will be invoked.
4.This dialog allow s you to add new series to a chart, and maintain their properties. Click Add... and
select Bar from the list of view types.
764
Examples
765
5.To populate the created series w ith data points in this example, we'll use the following arguments and
values for the series. These values have a significant spread, and simultaneously represent decimals,
hundreds, and thousands.
Argument
Value
104
2006
108
2007
105
2009
Steps 6-7. Insert and Adjust Scale Breaks

6.Now , the chart has the follow ing look.
765
Examples
766
As the image above demonstrates, the default look isn't very informative, since the points that
represent thousands occupy the most of the diagram, and the specifics of lesser values are obscured.
To improve that, we'll insert scale breaks into the axis of values (Y-axis) as a replacement for two
sparsely used regions (decimals - hundreds, and hundreds - thousands) with special strips, and the axis
range w ill be adjusted appropriately.
7.To do this, select the Y-axis, and in the Properties w indow, locate the Axis.ScaleBreaks property, and
click its ellipsis button, to invoke the Scale Break Collection Editor.
In this dialog, use the Add button to create two scale breaks. For the first scale break, set its
ScaleBreak.Edge1 and ScaleBreak.Edge2 properties to 10 and 100, correspondingly. And, for the
second scale break, set these properties to 110 and 2000.
Click Close, to quit the dialog, and apply the changes.
Our goal is achieved - the scale breaks are added to the axis. The result is shown in the following image.
766
Examples
767
Now, if required, you can customize the appearance of scale breaks, via the Axis.ScaleBreakOptions property. It
provides access to the following appearance settings (note that these settings affect all scale breaks at one time,
and don't allow you to individually access a scale break entry).
These options are described below :

The ScaleBreakOptions.Color property determines the color of the scale breaks' edges;
The ScaleBreakOptions.SizeInPixels property determines the width of scale breaks, in pixels;
The ScaleBreakOptions.Style property allow s you to choose whether scale break edges should be ragged,
wavy or straight.
See Also
Scale Breaks
767
Examples
768
Charting > Examples > How to: Manually Insert a Scale Break into an Axis (Runtime Sample)
This example demonstrates how scale breaks can be created w ithin an axis, and customized at runtime.
C#
C opy C ode
// Cast your diagram object to an appropriate diagram type,

// to access its axes.
// Add scale breaks to the Y-axis collection,
// with their Edge1 and Edge2 properties defined in the constructor.
diagram.AxisY.ScaleBreaks.Add(new ScaleBreak("Scale Break 1", 10, 100));
diagram.AxisY.ScaleBreaks.Add(new ScaleBreak("Scale Break 2", 110, 2000));
// Define the scale breaks' options.
diagram.AxisY.ScaleBreakOptions.Style = ScaleBreakStyle.Ragged;
diagram.AxisY.ScaleBreakOptions.SizeInPixels = 20;
diagram.AxisY.ScaleBreakOptions.Color = Color.Turquoise;
Visual Basic
C opy C ode
' Cast your diagram object to an appropriate diagram type,

' to access its axes.
' Add scale breaks to the Y-axis collection,
' with their Edge1 and Edge2 properties defined in the constructor.
diagram.AxisY.ScaleBreaks.Add(New ScaleBreak("Scale Break 1", 10, 100))
diagram.AxisY.ScaleBreaks.Add(New ScaleBreak("Scale Break 2", 110, 2000))
' Define the scale breaks' options.
diagram.AxisY.ScaleBreakOptions.Style = ScaleBreakStyle.Ragged
diagram.AxisY.ScaleBreakOptions.SizeInPixels = 20
diagram.AxisY.ScaleBreakOptions.Color = Color.Turquoise
Show Me
See Also
Scale Breaks
768
Examples
769
How to: Add a Trend Line to a Chart

Charting > Examples > How to: Add a Trend Line to a Chart
Show Me
This example demonstrates how a Trend Line can be added to a series' collection of indicators at runtime.
C#
C opy C ode
(Form1.cs)
using System;
// ...
private void Form1_Load (object sender, EventArgs e) {
ChartControl stockChart = new ChartControl();
// Create a stock series, add it to the chart and set its properties.
Series series1 = new Series("Series 1", ViewType.Stock);
stockChart.Series.Add(series1);
series1.ArgumentScaleType = ScaleType.DateTime;
series1.ValueScaleType = ScaleType.Numerical;
// Add points to the series.
series1.Points.Add(new SeriesPoint(new DateTime(1994, 3, 1),
new object[] { 4.00, 5.00, 5.00, 4.85 }));
new object[] { 6.05, 8.05, 6.05, 7.05 }));
new object[] { 6.25, 8.25, 6.75, 7.15 }));
// Create and customize a trendline,
TrendLine trendline1 = new TrendLine("A Trend");
trendline1.Point1.Argument = new DateTime(1994, 3, 1);
trendline1.Point1.ValueLevel = ValueLevel.High;
trendline1.Point2.Argument = new DateTime(1994, 3, 3);
trendline1.Point2.ValueLevel = ValueLevel.High;
trendline1.ExtrapolateToInfinity = false;
trendline1.Color = Color.Red;
trendline1.LineStyle.DashStyle = DashStyle.Dash;
// Cast the view type of the series to the Stock view.
StockSeriesView myView = ((StockSeriesView)series1.View);
// Define the Y-axis range.
myView.AxisY.Range.AlwaysShowZeroLevel = false;
// Add the trendline to the series collection of indicators.
myView.Indicators.Add(trendline1);
stockChart.Dock = DockStyle.Fill;
this.Controls.Add(stockChart);
}
Visual Basic
C opy C ode
(Form1.vb)
Imports System
' ...
769
Examples
770
Dim stockChart As New ChartControl()
' Create a stock series, add it to the chart and set its properties.
Dim series1 As New Series("Series 1", ViewType.Stock)
stockChart.Series.Add(series1)
series1.ArgumentScaleType = ScaleType.DateTime
series1.ValueScaleType = ScaleType.Numerical
' Add points to the series.
series1.Points.Add(New SeriesPoint(New DateTime(1994, 3, 1), _
New Object() {4.0, 5.0, 5.0, 4.85}))
New Object() {6.05, 8.05, 6.05, 7.05}))
New Object() {6.25, 8.25, 6.75, 7.15}))
' Create and customize a trendline,
Dim trendline1 As New TrendLine("A Trend")
trendline1.Point1.Argument = New DateTime(1994, 3, 1)
trendline1.Point1.ValueLevel = ValueLevel.High
trendline1.Point2.Argument = New DateTime(1994, 3, 3)
trendline1.Point2.ValueLevel = ValueLevel.High
trendline1.ExtrapolateToInfinity = False
trendline1.Color = Color.Red
trendline1.LineStyle.DashStyle = DashStyle.Dash
' Cast the view type of the series to the Stock view.
Dim myView As StockSeriesView = (CType(series1.View, StockSeriesView))
' Define the Y-axis range.
myView.AxisY.Range.AlwaysShowZeroLevel = False
' Add the trendline to the series collection of indicators.
myView.Indicators.Add(trendline1)
stockChart.Dock = DockStyle.Fill
Me.Controls.Add(stockChart)
End Sub
Show Me
See Also
Trend Lines
770
Examples
771
How to: Add a Fibonacci Indicator to a Chart

Charting > Examples > How to: Add a Fibonacci Indicator to a Chart
This tutorial demonstrates a w ay of showing a Fibonacci indicator for a series. For general information, see
Fibonacci Indicators.
To show a Fibonacci indicator for a Stock chart, do the following.
1.Create a new or open an existing Stock chart. For this example, w e w ill use the follow ing chart.
2.Select the series in the Property Grid, expand its SeriesBase.View property and click the ellipsis button
for the XYDiagram2DSeriesViewBase.Indicators property.
In the invoked Indicators dialog, click the Add... button.
3.Then, in the Indicator Type dialog, choose the required Fibonacci indicator kind and click OK.
771
Examples
772
If required, you can change the kind later, via the FibonacciIndicator.Kind property.
4.Now , back in the Indicators dialog, define the arguments and values for the FinancialIndicator.Point1
and FinancialIndicator.Point2 properties, and adjust other options of the indicator.
For each kind of Fibonacci indicator, it is possible to display extra lines for the
the Fibonacci sequence. The set of these levels is unique for each kind.
implied by
The follow ing image demonstrates the resulting Fibonacci Arcs indicator.
772
Examples
773
Note that as w ith other indicators, all Fibonacci indicators that exist in a chart are painted based on the palette
defined via the ChartControl.IndicatorsPaletteName property.
Show Me
See Also
Fibonacci Indicators
773
Examples
774

Charting > Examples > How to: Add a Fibonacci Indicator to a Chart (Runtime Sample)
Show Me
This example demonstrates how to create a Fibonacci Indicator of a certain kind (Arcs, Fans or Retracements), and
add it to a financial series. To do this, create an instance of the FibonacciIndicator class, and specify its
FibonacciIndicator.Kind property. Then, add this indicator to the series collection of indicators, returned by the
XYDiagram2DSeriesViewBase.Indicators property.
C#
C opy C ode
(Form1.cs)
using System;
namespace FibonacciIndicators {
public Form1() {
}
#region Initialization
// Create a series.
Series series = new Series("Stock", ViewType.Stock);
series.ArgumentScaleType = ScaleType.DateTime;
// Populate the series with data.
AddPoints(series);
// Add it to the chart.
this.chartControl1.Series.Add(series);
// Adjust the chart's appearance.
XYDiagram diagram = (XYDiagram)this.chartControl1.Diagram;
diagram.AxisY.Range.AlwaysShowZeroLevel = false;
diagram.AxisX.Label.Staggered = true;
}
#endregion
#region Providing Data
private void AddPoints(Series series) {
series.Points.AddRange(new SeriesPoint[] {
new SeriesPoint(new DateTime(2007, 12, 24), new object[] {110.55, 112, 111.3, 111.65}),
new SeriesPoint(new DateTime(2007, 12, 26), new object[] {110.9, 112.09, 110.9, 111.56}
new SeriesPoint(new DateTime(2007, 12, 27), new object[] {109.49, 111.3, 110.53, 109.6
new SeriesPoint(new DateTime(2007, 12, 28), new object[] {109.108, 110.76, 110.76, 110.
new SeriesPoint(new DateTime(2008, 1, 3), new object[] {103.98, 105.57, 104.83, 104.9})
new SeriesPoint(new DateTime(2008, 1, 8), new object[] {97.17, 100.38, 100.05, 97.59}),
new SeriesPoint(new DateTime(2008, 1, 17), new object[] {100.05, 103.45, 102, 101.1}),
774
Examples
775
new
new
new
new
new
new
new
});
SeriesPoint(new
SeriesPoint(new
SeriesPoint(new
SeriesPoint(new
SeriesPoint(new
SeriesPoint(new
SeriesPoint(new
DateTime(2008,
DateTime(2008,
DateTime(2008,
DateTime(2008,
DateTime(2008,
DateTime(2008,
DateTime(2008,
1,
1,
1,
1,
1,
1,
1,
23),
24),
25),
28),
29),
30),
31),
new
new
new
new
new
new
new
object[]
object[]
object[]
object[]
object[]
object[]
object[]
{98.5, 106.335, 99.63, 106.1}),

{104.68, 107.51, 106.38, 106.91
{104.1, 107.79, 107.79, 104.52}
{103.83, 105.77, 104.44, 104.98
{104.6, 106.8, 105.5, 106.1}),
{104.855, 107.65, 105.85, 105.6
{103.7, 107.97, 104.21, 107.11}
}
#endregion
#region Processing Button_Click
private void btnArcs_Click(object sender, EventArgs e) {
AddIndicator(chartControl1.Series[0], FibonacciIndicatorKind.FibonacciArcs);
}
private void btnFans_Click(object sender, EventArgs e) {
AddIndicator(chartControl1.Series[0], FibonacciIndicatorKind.FibonacciFans);
}
private void btnRetracements_Click(object sender, EventArgs e) {
AddIndicator(chartControl1.Series[0], FibonacciIndicatorKind.FibonacciRetracement);
}
#endregion
private void AddIndicator(Series ser, FibonacciIndicatorKind kind) {
// Get a collection of indicators.
IndicatorCollection indicators =
((StockSeriesView)ser.View).Indicators;
// Clear it.
indicators.Clear();
// Add a new indicator to it.
indicators.Add(CreateIndicator(kind, new DateTime(2007, 12, 27),
new DateTime(2008, 1, 17), ValueLevel.High));
}
private FibonacciIndicator CreateIndicator(FibonacciIndicatorKind kind,
DateTime arg1, DateTime arg2, ValueLevel level) {
// Create the Fibonacci Indicator of the specified kind.
FibonacciIndicator fi = new FibonacciIndicator(kind);
// Specify its start and end points.
fi.Point1.Argument = arg1;
fi.Point1.ValueLevel = level;
fi.Point2.Argument = arg2;
fi.Point2.ValueLevel = level;
// Select the name.
switch (fi.Kind) {
case FibonacciIndicatorKind.FibonacciArcs: {
fi.Name = "Arcs";
break;
}
case FibonacciIndicatorKind.FibonacciFans: {
fi.Name = "Fans";
break;
}
case FibonacciIndicatorKind.FibonacciRetracement: {
fi.Name = "Retracement";
break;
}
}
// Make all its levels visible.
fi.ShowLevel23_6 = true;
fi.ShowLevel76_4 = true;
fi.ShowLevel0 = true;
fi.ShowLevel100 = true;
fi.ShowAdditionalLevels = true;
775
Examples
776
// Customize its appearance.
fi.BaseLevelColor = Color.Green;
fi.BaseLevelLineStyle.DashStyle = DashStyle.Dash;
return fi;
}
}
}
Visual Basic
C opy C ode
(Form1.vb)
Imports System
Namespace FibonacciIndicators
Inherits Form
Public Sub New()
End Sub
#Region "Initialization"
Handles MyBase.Load
' Create a series.
Dim series As New Series("Stock", ViewType.Stock)
series.ArgumentScaleType = ScaleType.DateTime
' Populate the series with data.
AddPoints(series)
' Add it to the chart.
Me.chartControl1.Series.Add(series)
' Adjust the chart's appearance.
Dim diagram As XYDiagram = CType(Me.chartControl1.Diagram, XYDiagram)
diagram.AxisY.Range.AlwaysShowZeroLevel = False
diagram.AxisX.Label.Staggered = True
End Sub
#EndRegion
#Region "Providing Data"
Private Sub AddPoints(ByVal series As Series)
series.Points.AddRange(New SeriesPoint() { _
New SeriesPoint(New DateTime(2007, 12, 24), New Object() {110.55, 112, 111.3, 111.65}
New SeriesPoint(New DateTime(2007, 12, 26), New Object() {110.9, 112.09, 110.9, 111.5
New SeriesPoint(New DateTime(2007, 12, 27), New Object() {109.49, 111.3, 110.53, 109.
New SeriesPoint(New DateTime(2007, 12, 28), New Object() {109.108, 110.76, 110.76, 11
New SeriesPoint(New DateTime(2007, 12, 31), New Object() {107.26, 110, 109.51, 108.1}
New SeriesPoint(New DateTime(2008, 1, 7), New Object() {99.03, 101, 100.25, 100.05}),
New SeriesPoint(New DateTime(2008, 1, 8), New Object() {97.17, 100.38, 100.05, 97.59}
New SeriesPoint(New DateTime(2008, 1, 9), New Object() {97.16, 99.15, 97.76, 98.31}),
New SeriesPoint(New DateTime(2008, 1, 11), New Object() {97.09, 99.46, 99.2, 97.67}),
New SeriesPoint(New DateTime(2008, 1, 17), New Object() {100.05, 103.45, 102, 101.1})
776
Examples
777
New
New
New
New
SeriesPoint(New
SeriesPoint(New
SeriesPoint(New
SeriesPoint(New
DateTime(2008,
DateTime(2008,
DateTime(2008,
DateTime(2008,
1,
1,
1,
1,
28),
29),
30),
31),
New
New
New
New
Object()
Object()
Object()
Object()
{103.83, 105.77, 104.44, 104.

{104.6, 106.8, 105.5, 106.1})
{104.855, 107.65, 105.85, 105
{103.7, 107.97, 104.21, 107.1
End Sub
#EndRegion
#Region "Processing Button_Click"
Private Sub btnArcs_Click(ByVal sender As Object, ByVal e As EventArgs) _
Handles btnArcs.Click
AddIndicator(chartControl1.Series(0), FibonacciIndicatorKind.FibonacciArcs)
End Sub
Private Sub btnFans_Click(ByVal sender As Object, ByVal e As EventArgs) _
Handles btnFans.Click
AddIndicator(chartControl1.Series(0), FibonacciIndicatorKind.FibonacciFans)
End Sub
Private Sub btnRetracements_Click(ByVal sender As Object, ByVal e As EventArgs) _
Handles btnRetracements.Click
AddIndicator(chartControl1.Series(0), FibonacciIndicatorKind.FibonacciRetracement)
End Sub
#EndRegion
Private Sub AddIndicator(ByVal ser As Series, ByVal kind As FibonacciIndicatorKind)
' Get a collection of indicators.
Dim indicators As IndicatorCollection = (CType(ser.View, StockSeriesView)).Indicators
' Clear it.
indicators.Clear()
' Add a new indicator to it.
indicators.Add(CreateIndicator(kind, New DateTime(2007, 12, 27), _
New DateTime(2008, 1, 17), ValueLevel.High))
End Sub
Private Function CreateIndicator(ByVal kind As FibonacciIndicatorKind, ByVal arg1 As DateTime, _
ByVal arg2 As DateTime, ByVal level As ValueLevel) As FibonacciIndicator
' Create the Fibonacci Indicator of the specified kind.
Dim fi As New FibonacciIndicator(kind)
' Specify its start and end points.
fi.Point1.Argument = arg1
fi.Point1.ValueLevel = level
fi.Point2.Argument = arg2
fi.Point2.ValueLevel = level
' Select the name.
Select Case fi.Kind
Case FibonacciIndicatorKind.FibonacciArcs
fi.Name = "Arcs"
Exit Select
Case FibonacciIndicatorKind.FibonacciFans
fi.Name = "Fans"
Exit Select
Case FibonacciIndicatorKind.FibonacciRetracement
fi.Name = "Retracement"
Exit Select
End Select
' Make all its levels visible.
fi.ShowLevel23_6 = True
fi.ShowLevel76_4 = True
fi.ShowLevel0 = True
fi.ShowLevel100 = True
fi.ShowAdditionalLevels = True
' Customize its appearance.
fi.BaseLevelColor = Color.Green
fi.BaseLevelLineStyle.DashStyle = DashStyle.Dash
Return fi
End Function
777
Examples
778
End Class
End Namespace
See Also
Fibonacci Indicators
778
Examples
779
How to: Show a Regression Line for a Stock Chart

Charting > Examples > How to: Show a Regression Line for a Stock Chart
This tutorial demonstrates how
general information, see Regression Lines.
can be applied to a chart's visual data at design time. For
To show a Regression Line for a Stock chart follow the steps below .
1.Create a new or open an existing Stock chart. For this example w e w ill use the follow ing chart.
2.Select the series in the Property Grid, expand its SeriesBase.View property and click the ellipsis button
for the XYDiagram2DSeriesViewBase.Indicators property.
In the invoked Indicators dialog, click the Add... button.
3.Then, in the Indicator Type dialog, choose Regression Line and click OK.
779
Examples
780
4.Now , back in the Indicators dialog, you can specify the Regression Line's SingleLevelIndicator.
ValueLevel and other options.
780
Examples
781
Note that as w ith other indicators, all Regression Lines that exist in a chart are painted based on the palette
defined via the ChartControl.IndicatorsPaletteName property.
See Also
Regression Lines
781
Examples
782
Charting > Examples > How to: Show a Regression Line for a Stock Chart (Runtime Sample)
This example demonstrates how a Regression Line can be displayed for a series of the Stock view type.
To access the series' collection of indicators (via the XYDiagram2DSeriesViewBase.Indicators property), you should
cast your series view to an appropriate type.
C#
C opy C ode
// Create a regression line for the Open value level.

RegressionLine myLine = new RegressionLine(ValueLevel.Open);
// Access the series collection of indicators,
// and add the regression line to it.
((StockSeriesView)chartControl1.Series[0].View).Indicators.Add(myLine);
// Customize the regression line's appearance.
myLine.LineStyle.DashStyle = DashStyle.DashDot;
myLine.LineStyle.Thickness = 2;
myLine.Color = Color.Crimson;
Visual Basic
C opy C ode
' Create a regression line for the Open value level.

Dim myLine As New RegressionLine(ValueLevel.Open)
' Access the series collection of indicators,
' and add the regression line to it.
CType(chartControl1.Series(0).View, StockSeriesView).Indicators.Add(myLine)
' Customize the regression line's appearance.
myLine.LineStyle.DashStyle = DashStyle.DashDot
myLine.LineStyle.Thickness = 2
myLine.Color = Color.Crimson
Show Me
See Also
Regression Lines
782
Examples
783

Charting > Examples > How to: Create a Text Annotation Anchored to a Series Point
This example demonstrates how to create a text annotation anchored to a series point. For general information,
refer to Annotations.
Show Me
To create an annotation anchored to a series point, do the following.
1.Create a chart w ith a Bar series.
2.Click the chart's smart tag, and in its actions list, click Annotations... link.
3.In the invoked Annotation Collection Editor, click Add, and then double-click the Text Annotation type.
4.For the created annotation, click the ellipsis button for its Annotation.AnchorPoint property.
783
Examples
784
5.Then, choose the Series Point Anchor Point type.
6.And, choose the series point to w hich the annotation is anchored.
784
Examples
785
7.Now , the annotation has been anchored to that point, and back in the Annotation Collection Editor you
can adjust its text (TextAnnotation.Text) and position (Annotation.ShapePosition), as well as its
appearance options.
See Also
785
Examples
786

Charting > Examples > How to: Create an Image Annotation Anchored to a Chart or Pane
This example demonstrates how to create two image annotations - one anchored to a chart (by specifying two
absolute pixel coordinates), and another one - to a pane (by specifying two axis values). For general information,
refer to Annotations.
Show Me
To demonstrate how this can be done, we'll use a chart similar to the one created in the following tutorial: Lesson
2 - Create a Simple Unbound Chart.
Anchor an Annotation to a Chart
Anchor an Annotation to a Pane
Anchor an Annotation to a Chart
1.Click the chart's smart tag, and in its actions list, click Annotations... link.
2.In the invoked Annotation Collection Editor, click Add, and then double-click the Image Annotation
type.
3.For the created annotation, click the ellipsis button for its Annotation.AnchorPoint property.
786
Examples
787
4.Then, choose the Chart Anchor Point type.
5.And, define the X and Y coordinates (in pixels) for the annotation's anchor point. Note that these
coordinates are absolute, and w ill not be changed w hen the chart is resized.
787
Examples
788
6.Now , the annotation has been anchored to that point, and after you specify its image (
ImageAnnotation.Image) and position (Annotation.ShapePosition), the chart looks as follows.
Anchor an Annotation to a Pane

7.Now , create another image annotation, and via its Annotation.AnchorPoint property, specify the Pane
Anchor Point type.
8.Then, choose the pane, to w hich the annotation is anchored, and specify the axes, and their values for
788
Examples
789
the anchor point.
9.After you specify the annotation's image (ImageAnnotation.Image) and position (Annotation.
ShapePosition), the chart looks as follow s.
Note that the pane anchor point sticks to the specified axes' coordinates when the chart is being
resized, or scrolled and zoomed.
See Also
789
Examples
790
How to: Add an Annotation at Runtime

Charting > Examples > How to: Add an Annotation at Runtime
Show Me
This example illustrates how to initialize a TextAnnotation object at runtime, and enable its Annotation.
RuntimeMoving option.
C#
C opy C ode
(Form1.cs)
using System;
namespace TextAnnotationRuntime {
public Form1 () {
}
private void Form1_Load (object sender, EventArgs e) {
SeriesPoint sp = this.chartControl1.Series["Series 1"].Points[1];
TextAnnotation annotation = new TextAnnotation("Annotation 1", "test");
annotation.AnchorPoint = new SeriesPointAnchorPoint(sp);
annotation.ShapePosition = new RelativePosition();
RelativePosition position = annotation.ShapePosition as RelativePosition;
position.ConnectorLength = 50;
position.Angle = 270;
annotation.RuntimeMoving = true;
this.chartControl1.AnnotationRepository.Add(annotation);
}
}
}
Visual Basic
C opy C ode
(Form1.vb)
Imports System
Namespace TextAnnotationRuntime
Inherits Form
Public Sub New()
End Sub
Dim sp As SeriesPoint = Me.chartControl1.Series("Series 1").Points(1)
Dim annotation As New TextAnnotation("Annotation 1", "test")
annotation.AnchorPoint = New SeriesPointAnchorPoint(sp)
annotation.ShapePosition = New RelativePosition()
Dim position As RelativePosition = TryCast(annotation.ShapePosition, RelativePosition)
position.ConnectorLength = 50
position.Angle = 270
annotation.RuntimeMoving = True
Me.chartControl1.AnnotationRepository.Add(annotation)
End Sub
End Class
End Namespace
790
Examples
791
End-User Interaction
How to: Determine which Chart Element Is Hovered by the Mouse
Pointer
Charting > Examples > How to: Determine which Chart Element Is Hovered by the Mouse Pointer
The follow ing examples demonstrates how to handle the ChartControl.MouseMove event and calculate the hit
information for the point w hich the mouse pointer is currently hovering over. Then, the name of the chart element
located under the mouse pointer is shown within the form caption.
C#
C opy C ode
// ...
private void chartControl1_MouseMove(object sender, MouseEventArgs e) {
ChartHitInfo hi = chartControl1.CalcHitInfo(new System.Drawing.Point(e.X, e.Y));
this.Text = hi.HitTest.ToString();
}
Visual Basic
C opy C ode
' ...
Private Sub ChartControl1_MouseMove(ByVal sender As System.Object, ByVal e As MouseEventArgs) _
Handles ChartControl1.MouseMove
Dim hi As ChartHitInfo = ChartControl1.CalcHitInfo(New System.Drawing.Point(e.X, e.Y))
Me.Text = hi.HitTest.ToString()
End Sub
See Also
How to: Determine w hich Series Point Is Located Under the Test Point
791
Examples
792
How to: Determine which Series Point Is Located Under the Test Point
Charting > Examples > How to: Determine which Series Point Is Located Under the Test Point
Show Me
This example demonstrates how to handle the ChartControl.MouseMove event, to determine w hich series point
is located under the test point and display information about its argument and value using ToolTipController.
To enable hit testing at runtime so that this example w orks correctly, make sure that the ChartControl.
RuntimeHitTesting property is set to true.
C#
C opy C ode
(Form1.cs)
using System;
using DevExpress.Utils;
// ...
chartControl1.CrosshairEnabled = DefaultBoolean.False;
chartControl1.RuntimeHitTesting = true;
}
// Obtain hit information under the test point.
ChartHitInfo hi = chartControl1.CalcHitInfo(e.X, e.Y);
// Obtain the series point under the test point.
SeriesPoint point = hi.SeriesPoint;
// Check whether the series point was clicked or not.
if (point != null) {
// Obtain the series point argument.
string argument = "Argument: " + point.Argument.ToString();
// Obtain series point values.
string values = "Value(s): " + point.Values[0].ToString();
if (point.Values.Length > 1) {
for (int i = 1; i < point.Values.Length; i++) {
values = values + ", " + point.Values[i].ToString();
}
}
// Show the tooltip.
toolTipController1.ShowHint(argument + "\n" + values, "SeriesPoint Data");
}
else {
// Hide the tooltip.
toolTipController1.HideHint();
}
}
Visual Basic
C opy C ode
(Form1.vb)
Imports System
Imports DevExpress.Utils
' ...
Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) _
Handles MyBase.Load
chartControl1.CrosshairEnabled = DefaultBoolean.False
792
Examples
793
chartControl1.RuntimeHitTesting = True
End Sub
Private Sub chartControl1_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs) _
Handles chartControl1.MouseMove
' Obtain hit information under the test point.
Dim hi As ChartHitInfo = chartControl1.CalcHitInfo(e.X, e.Y)
' Obtain the series point under the test point.
Dim point As SeriesPoint = hi.SeriesPoint
' Check whether the series point was clicked or not.
If point IsNot Nothing Then
' Obtain the series point argument.
Dim argument As String = "Argument: " & point.Argument.ToString()
' Obtain series point values.
Dim values As String = "Value(s): " & point.Values(0).ToString()
If point.Values.Length > 1 Then
For i As Integer = 1 To point.Values.Length - 1
values = values & ", " & point.Values(i).ToString()
Next i
End If
' Show the tooltip.
toolTipController1.ShowHint(argument & Constants.vbLf & values, "SeriesPoint Data")
Else
' Hide the tooltip.
toolTipController1.HideHint()
End If
End Sub
The ChartControl.HitTest method cannot be used for that purpose since it returns the ChartElement clicked by the
mouse. The SeriesPoint object is not a chart element, w hile the Series, XYDiagram, ChartControl are.
See Also
ChartControl.CalcHitInfo
ChartHitInfo.HitTest
HotTrackEventArgs.HitInfo
793
Examples
794
How to: Show a Tooltip with a Series Point's Data

Charting > Examples > How to: Show a Tooltip with a Series Point's Data
This example demonstrates how to display custom information from the underlying datasource in a tooltip for
every series point.
1.Start MS Visual Studio (2008 or 2010).
2.Create a new Windows Forms Application, or open an existing one.
3.Drop the ChartControl onto the form.
4.Also add the ToolTipController component, w hich is located on the DX.12.2: Components toolbox tab.
5.Add a single Bar Series to the chart, then bind it to the Products table from the nwind.mdb database
(see this tutorial to learn how to do this).
6.Set the series' SeriesBase.ArgumentDataMember property to ProductName and its SeriesBase.
ValueDataMembers.Value property to UnitPrice.
7.Then handle the ChartControl.ObjectHotTracked event, as shown in the code below.
C#
C opy C ode
using System;
using System.Data;
// ...
SeriesPoint point = e.AdditionalObject as SeriesPoint;
DataRowView rowView = (DataRowView)point.Tag;
string s = "Unit price = " + rowView["UnitPrice"].ToString() +
"\r\nUnits in stock = " + rowView["UnitsInStock"].ToString() +
"\r\nQuantity per unit = " + rowView["QuantityPerUnit"].ToString();
toolTipController1.ShowHint(s);
}
else
toolTipController1.HideHint();
}
Visual Basic
C opy C ode
Imports System
Imports System.Data
' ...
Private Sub chartControl1_ObjectHotTracked(ByVal sender As Object, ByVal e As HotTrackEventArgs) _
Handles chartControl1.ObjectHotTracked
Dim point As SeriesPoint = TryCast(e.AdditionalObject, SeriesPoint)
If Not point Is Nothing Then
Dim rowView As DataRowView = CType(point.Tag, DataRowView)
Dim s As String = "Unit price = " & rowView("UnitPrice").ToString() & Constants.vbCrLf & _
"Units in stock = " & rowView("UnitsInStock").ToString() & Constants.vbCrLf & _
"Quantity per unit = " & rowView("QuantityPerUnit").ToString()
toolTipController1.ShowHint(s)
Else
toolTipController1.HideHint()
End If
End Sub
794
Examples
795
The result of executing this code is shown in the follow ing image.
Show Me
See Also
How to:
How to:
How to:
How to:
Determine w hich Series Point Is Located Under the Test Point

Show Custom Data Over a W eb Chart Using ASPxPopupControl
Show Series Labels Only for Hot-tracked Points
Create a Text Annotation Anchored to a Series Point
795
Examples
796

Charting > Examples > How to: Show Series Labels Only for Hot-tracked Points
Show Me
This example demonstrates how to make a chart show a series point label only for the point that has been hottracked.
To do this, in the ChartControl.CustomDraw SeriesPoint event handler, assign an empty string to the
CustomDrawSeriesPointEventArgs.LabelText property of each series point, and then assign the point's value to
the hot-tracked point, which is obtained in the ChartControl.ObjectHotTracked event handler.
C#
C opy C ode
(Form1.cs)
using System;
// ...
SeriesPoint m_HotTrackedPoint;
void chartControl1_ObjectHotTracked(object sender, HotTrackEventArgs e) {
SeriesPoint point = e.AdditionalObject as SeriesPoint;
if (!Object.ReferenceEquals(point, m_HotTrackedPoint)) {
m_HotTrackedPoint = point;
chartControl1.Refresh();
}
}
void chartControl1_CustomDrawSeriesPoint(object sender, CustomDrawSeriesPointEventArgs e) {
e.LabelText = "";
if (e.SeriesPoint == m_HotTrackedPoint) {
e.LabelText = e.SeriesPoint.Values[0].ToString();
}
}
Visual Basic
C opy C ode
(Form1.vb)
Imports System
' ...
Private m_HotTrackedPoint As SeriesPoint
Dim point As SeriesPoint = TryCast(e.AdditionalObject, SeriesPoint)
If (Not Object.ReferenceEquals(point, m_HotTrackedPoint)) Then
m_HotTrackedPoint = point
chartControl1.Refresh()
End If
End Sub
Private Sub chartControl1_CustomDrawSeriesPoint(ByVal sender As Object, _
ByVal e As CustomDrawSeriesPointEventArgs) Handles chartControl1.CustomDrawSeriesPoint
e.LabelText = ""
If e.SeriesPoint Is m_HotTrackedPoint Then
e.LabelText = e.SeriesPoint.Values(0).ToString()
End If
End Sub
796
Examples
See Also
How to:
How to:
How to:
How to:
797
Determine w hich Chart Element Is Hovered by the Mouse Pointer

Determine w hich Series Point Is Located Under the Test Point
Show a Tooltip with a Series Point's Data
Create a Text Annotation Anchored to a Series Point
797
Examples
798
How to: Implement Custom Hot-Tracking and Selection

Charting > Examples > How to: Implement Custom Hot-Tracking and Selection
This example demonstrates how to implement custom hot-tracking and selection of the chart's elements at
runtime.
Note
To enable runtime hot-tracking and selection, the ChartControl.RuntimeSelection property should be set to true.
If you want to change the default hot-tracking and selection, you should handle the ChartControl.
ObjectHotTracked and ChartControl.ObjectSelected events, implement your custom hot-tracking and selection
approaches and set the Cancel property to true.
For example, the code below illustrates how to disable selection and hot-tracking of a chart's diagram.
C#
C opy C ode
// ...
// Prevent the chart's diagram from being hot-tracked.
if (e.Object is Diagram)
e.Cancel = true;
}
private void chartControl1_ObjectSelected(object sender, HotTrackEventArgs e) {
// Prevent the chart's Diagram from being selected.
if (e.Object is Diagram)
e.Cancel = true;
}
Visual Basic
C opy C ode
' ...
Private Sub OnObjectHotTracked(sender As Object, e As HotTrackEventArgs) _
Handles ChartControl1.ObjectHotTracked
' Prevent the chart's Diagram from being hot-tracked.
If TypeOf e.Object Is Diagram Then
e.Cancel = True
End If
End Sub
Private Sub OnObjectSelected(sender As Object, e As HotTrackEventArgs) _
Handles ChartControl1.ObjectSelected
' Prevent the chart's Diagram from being selected.
If TypeOf e.Object Is Diagram Then
e.Cancel = True
End If
End Sub
See Also
How to: Determine w hich Chart Element Is Hovered by the Mouse Pointer
798
Examples
799
How to: Provide a Custom Cursor for a Chart

Charting > Examples > How to: Provide a Custom Cursor for a Chart
Show Me
This example demonstrates how to substitute the Hand and Grab cursors show n w hen a chart's area is being
scrolled w ith a default system cursor.
To do this, handle the ChartControl.QueryCursor event, and use the QueryCursorEventArgs.Cursor and
QueryCursorEventArgs.CursorType properties.
C#
C opy C ode
(Form1.cs)
using System;
// ...
private void chartControl1_QueryCursor(object sender, QueryCursorEventArgs e) {
if (e.CursorType == CursorType.Hand || e.CursorType == CursorType.Grab) {
e.Cursor = Cursors.Default;
}
}
Visual Basic
C opy C ode
(Form1.vb)
Imports System
' ...
Private Sub chartControl1_QueryCursor(ByVal sender As Object, _
ByVal e As QueryCursorEventArgs) Handles chartControl1.QueryCursor
If e.CursorType = CursorType.Hand OrElse e.CursorType = CursorType.Grab Then
e.Cursor = Cursors.Default
End If
End Sub
The follow ing images demonstrate how this works.
Default Cursor
Custom Cursor
799
Examples
800

Charting > Examples > How to: Provide Interactive Editing for Series Points
This example describes how to make points in a ChartControl adjustable interactively. The key principals of this
example include handling the ChartControl.ObjectHotTracked event and using the XYDiagram2D.PointToDiagram
method to convert physical coordinates of the mouse to logical.
C#
C opy C ode
// ...
static int lastY = -1;
static bool isPressed = false;
static SeriesPoint selectedPoint = null;
if(e.HitInfo.SeriesPoint != null)
selectedPoint = e.HitInfo.SeriesPoint;
if(selectedPoint != null && isPressed) {
DiagramCoordinates point =
((XYDiagram)(sender as ChartControl).Diagram).PointToDiagram(e.HitInfo.HitPoint);
if(lastY != -1) {
AxisRange range = ((XYDiagram)(sender as ChartControl).Diagram).AxisY.Range;
double delta = ((double)range.MaxValue - (double)range.MinValue) / 8;
if(selectedPoint.Values[0] >= (double)range.MaxValue - delta)
range.MaxValue = selectedPoint.Values[0] + delta;
selectedPoint.Values[0] = point.NumericalValue;
if(point.QualitativeArgument != "")
selectedPoint.Argument = point.QualitativeArgument;
}
((ChartControl)sender).RefreshData();
lastY = e.HitInfo.HitPoint.Y;
return;
}
lastY = -1;
}
private void chartControl1_MouseDown(object sender, MouseEventArgs e) {
isPressed = true;
}
private void chartControl1_MouseUp(object sender, MouseEventArgs e) {
isPressed = false;
}
private void chartControl1_MouseLeave(object sender, EventArgs e) {
isPressed = false;
}
Visual Basic
C opy C ode
' ...
Private Shared lastY As Integer = -1
Private Shared isPressed As Boolean = False
Private Shared selectedPoint As SeriesPoint = Nothing
If e.HitInfo.SeriesPoint IsNot Nothing Then
selectedPoint = e.HitInfo.SeriesPoint
End If
If selectedPoint IsNot Nothing AndAlso isPressed Then
Dim point As DiagramCoordinates = _
(CType((TryCast(sender, ChartControl)).Diagram, _
800
Examples
801
XYDiagram)).PointToDiagram(e.HitInfo.HitPoint)
If lastY <> -1 Then
Dim range As AxisRange = _
(CType((TryCast(sender, ChartControl)).Diagram, XYDiagram)).AxisY.Range
Dim delta As Double = (CDbl(range.MaxValue) - CDbl(range.MinValue)) / 8
If selectedPoint.Values(0) >= CDbl(range.MaxValue) - delta Then
range.MaxValue = selectedPoint.Values(0) + delta
End If
selectedPoint.Values(0) = point.NumericalValue
If point.QualitativeArgument <> "" Then
selectedPoint.Argument = point.QualitativeArgument
End If
End If
CType(sender, ChartControl).RefreshData()
lastY = e.HitInfo.HitPoint.Y
Return
End If
lastY = -1
End Sub
Private Sub chartControl1_MouseDown(ByVal sender As Object, _
ByVal e As MouseEventArgs) Handles chartControl1.MouseDown
isPressed = True
End Sub
Private Sub chartControl1_MouseUp(ByVal sender As Object, _
ByVal e As MouseEventArgs) Handles chartControl1.MouseUp
isPressed = False
End Sub
Private Sub chartControl1_MouseLeave(ByVal sender As Object, _
ByVal e As MouseEventArgs) Handles chartControl1.MouseLeave
isPressed = False
End Sub
Show Me
See Also
801
Examples
802

Charting > Examples > How to: Provide Interactive Editing for a Constant Line
The follow ing example illustrates use of XYDiagram2D.PointToDiagram method for dragging the constant line with
the mouse, and changing the series point values accordingly.
C#
C opy C ode
using System;
// ...
Cursor defCursor;
bool dragging = false;
ChartControl chart;
XYDiagram diagram;
ConstantLine line;
this.chart = this.chartControl1;
this.diagram = (XYDiagram)this.chart.Diagram;
this.line = this.diagram.AxisX.ConstantLines.GetConstantLineByName("ConstantLine1");
}
private void chartControl1_MouseDown(object sender, MouseEventArgs e) {
if(diagram == null)
return;
// Get the information about the clicked point.
DiagramCoordinates coords = diagram.PointToDiagram(e.Location);
// If the point is within the diagram and in the constant line ...
if(!coords.IsEmpty && line.AxisValue is DateTime &&
coords.DateTimeArgument.Equals((DateTime)line.AxisValue)) {
// Allow dragging, catch the mouse and change the cursor.
dragging = true;
chart.Capture = true;
SetCursor();
}
}
private void chartControl1_MouseUp(object sender, MouseEventArgs e) {
dragging = false;
chart.Capture = false;
}
if(diagram == null)
return;
if(dragging && (e.Button & MouseButtons.Left) == 0) {
dragging = false;
chart.Capture = false;
}
DiagramCoordinates coords = diagram.PointToDiagram(e.Location);
if(coords.IsEmpty)
RestoreCursor();
else {
if(dragging)
line.AxisValue = coords.DateTimeArgument;
if(line.AxisValue is DateTime && coords.DateTimeArgument.Equals((DateTime)line.AxisValue))
SetCursor();
else
RestoreCursor();
}
}
void SetCursor() {
802
Examples
803
if(defCursor == null)
defCursor = Cursor.Current;
Cursor.Current = Cursors.VSplit;
}
void RestoreCursor() {
if(defCursor != null) {
Cursor.Current = defCursor;
defCursor = null;
}
}
Visual Basic
C opy C ode
Imports System
' ...
Private defCursor As Cursor
Private dragging As Boolean = False
Private chart As ChartControl
Private diagram As XYDiagram
Private line As ConstantLine
Me.chart = Me.chartControl1
Me.diagram = CType(Me.chart.Diagram, XYDiagram)
Me.line = Me.diagram.AxisX.ConstantLines.GetConstantLineByName("ConstantLine1")
End Sub
Private Sub chartControl1_MouseDown(ByVal sender As Object, ByVal e As MouseEventArgs) _
Handles chartControl1.MouseDown
If diagram Is Nothing Then
Return
End If
' Get the information about the clicked point.
Dim coords As DiagramCoordinates = diagram.PointToDiagram(e.Location)
' If the point is within the diagram and in the constant line ...
If (Not coords.IsEmpty) AndAlso TypeOf line.AxisValue Is DateTime _
AndAlso coords.DateTimeArgument.Equals(CDate(line.AxisValue)) Then
' Allow dragging, catch the mouse and change the cursor.
dragging = True
chart.Capture = True
SetCursor()
End If
End Sub
Private Sub chartControl1_MouseUp(ByVal sender As Object, ByVal e As MouseEventArgs) _
Handles chartControl1.MouseUp
dragging = False
chart.Capture = False
End Sub
Private Sub chartControl1_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs) _
Handles chartControl1.MouseMove
If diagram Is Nothing Then
Return
End If
If dragging AndAlso (e.Button And MouseButtons.Left) = 0 Then
dragging = False
chart.Capture = False
End If
Dim coords As DiagramCoordinates = diagram.PointToDiagram(e.Location)
If coords.IsEmpty Then
RestoreCursor()
Else
803
Examples
804
If dragging Then
line.AxisValue = coords.DateTimeArgument
End If
If TypeOf line.AxisValue Is DateTime _
AndAlso coords.DateTimeArgument.Equals(CDate(line.AxisValue)) Then
SetCursor()
Else
RestoreCursor()
End If
End If
End Sub
Private Sub SetCursor()
If defCursor Is Nothing Then
defCursor = Cursor.Current
End If
Cursor.Current = Cursors.VSplit
End Sub
Private Sub RestoreCursor()
If defCursor IsNot Nothing Then
Cursor.Current = defCursor
defCursor = Nothing
End If
End Sub
Show Me
See Also
Constant Lines
804
Examples
805
How to: Create a Drill-Down Chart

Charting > Examples > How to: Create a Drill-Down Chart
This tutorial demonstrates how to create a
chart, to display master-detail data in the same chart. Two
series are used to achieve this. By clicking a point of the first series, another series is show n, w hich represents
detailed data related to the selected point.
Note
The complete sample project is available in the DevExpress Code Central database at How to create a drill-down
chart (for WinForms) and How to implement a multi-dimensional DrillDown feature (for ASP.NET). There, you can
either run this example online or dow nload an auto-executable sample.
To create a drill-down chart, do the following.
Adjust the Chart
Handle Its MouseClick event
Get the Result
existing one.
3.Bind the chart to the "SalesPerson" view of the sample
file. For step-by-step guidance on
this, perform steps 1-7 of the following tutorial (How to: Bind Individual Chart Series to Data).
4.To create series, click the chart's smart tag, and choose Series... in its actions list. Then, the Series
Collection Editor will be invoked.
In this dialog, click Add..., to create the first series of the Pie view type.
Switch to the dialog's Properties tab, and for this series, set the Series.DataSource property to
salesPersonBindingSource, SeriesBase.ArgumentDataMember property to SalesPerson, and the
SeriesBase.SummaryFunction to SUM([Extended Price]).
5.Now , add the second series - of the Bar view type. You'll see the red notification informing you that this
view is incompatible with the first visible series in the collection. So, leave the SeriesBase.Visible
property of this series disabled - we'll replace both series later in code.
The same as for the first series, set its Series.DataSource property to salesPersonBindingSource,
SeriesBase.ArgumentDataMember property to CategoryName, and SeriesBase.SummaryFunction - to
805
Examples
806
SUM([Extended Price]).
In addition, via the SeriesBase.DataFilters property of the Bar series, specify a data filter, whose
DataFilter.ColumnName property is set to SalesPerson.
Adjust the Chart

6.To add chart titles, select the chart, and click the ellipsis button for its ChartControl.Titles property.
In the invoked Chart Title Collection Editor, click Add, to create a title. Set its Title.Text property to
"Back to the main view...", and the TitleBase.Visible property to false.
Add another chart title ( with the "Sales by Person" text), and leave it visible.
7.For the first (Pie) series, set its PointOptions.ValueNumericOptions property to Percent.
And in its SeriesBase.LegendPointOptions property, disable the PercentOptions.ValueAsPercent
property, and set the PointOptions.PointView property to Argument.
Handle Its MouseClick event
Now, it's only left to handle the chartControl1.MouseClick event. W rite the following code.
C#
C opy C ode
using System;
// ...
private void chartControl1_MouseClick(object sender, MouseEventArgs e) {
// Obtain the object being clicked.
ChartHitInfo hi = chartControl1.CalcHitInfo(e.X, e.Y);
// Check whether it was a series point, and if so // obtain its argument, and pass it to the detail series.
SeriesPoint point = hi.SeriesPoint;
string argument = point.Argument.ToString();
// Flip the series.
if (chartControl1.Series[0].Visible == true) {
chartControl1.Series[0].Visible = false;
chartControl1.Series[1].Name = argument;
chartControl1.Series[1].Visible = true;
// Since the new series determines another diagram's type,
// you should re-define the axes properties.
diagram.AxisX.Label.Angle = -25;
diagram.AxisY.NumericOptions.Format = NumericFormat.Currency;
diagram.AxisY.NumericOptions.Precision = 0;
chartControl1.Series[1].DataFilters[0].Value = argument;
chartControl1.Titles[0].Visible = true;
chartControl1.Titles[1].Text = "Personal Sales by Categories";
}
}
// Obtain the title under the test point.
ChartTitle link = hi.ChartTitle;
// Check whether the link was clicked, and if so // restore the main series.
if (link != null && link.Text.StartsWith("Back")) {
chartControl1.Series[0].Visible = true;
chartControl1.Series[1].Visible = false;
link.Visible = false;
chartControl1.Titles[1].Text = "Sales by Person";
}
}
806
Examples
Visual Basic
807
C opy C ode
Imports System
' ...
Private Sub chartControl1_MouseClick(ByVal sender As Object, _
ByVal e As MouseEventArgs) Handles chartControl1.MouseClick
' Obtain the object being clicked.
Dim hi As ChartHitInfo = chartControl1.CalcHitInfo(e.X, e.Y)
' Check whether it was a series point, and if so ' obtain its argument, and pass it to the detail series.
Dim point As SeriesPoint = hi.SeriesPoint
If point IsNot Nothing Then
Dim argument As String = point.Argument.ToString()
' Flip the series.
If chartControl1.Series(0).Visible = True Then
chartControl1.Series(0).Visible = False
chartControl1.Series(1).Name = argument
chartControl1.Series(1).Visible = True
' Since the new series determines another diagram's type,
' you should re-define axes properties.
diagram.AxisX.Label.Angle = -25
diagram.AxisY.NumericOptions.Format = NumericFormat.Currency
diagram.AxisY.NumericOptions.Precision = 0
chartControl1.Series(1).DataFilters(0).Value = argument
chartControl1.Titles(0).Visible = True
chartControl1.Titles(1).Text = "Personal Sales by Categories"
End If
End If
' Obtain the title under the test point.
Dim link As ChartTitle = hi.ChartTitle
' Check whether the link was clicked, and if so ' restore the main series.
If link IsNot Nothing AndAlso link.Text.StartsWith("Back") Then
chartControl1.Series(0).Visible = True
chartControl1.Series(1).Visible = False
link.Visible = False
chartControl1.Titles(1).Text = "Sales by Person"
End If
End Sub
Get the Result
807
Examples
808
See Also
808
Examples
809
How to: Make a Diagram Scrollable and Limit the Scrolling Range of Its
Axis
Charting > Examples > How to: Make a Diagram Scrollable and Limit the Scrolling Range of Its Axis
This tutorial demonstrates how the axis visible and scrolling ranges can be limited, so that a user can access only
a part of a chart's underlying data.
Show Me
To specify both the
and
range of an axis, do the following.
1.Create a new chart, or open an existing one. For this example, w e'll use a simple XY-chart shown in the
following image.
2.Select the X-axis of your chart's diagram, and in the Properties w indow, expand its AxisBase.Range
property.
Limit the visible range of the X-axis by its two outermost values, via the AxisRange.MinValue and
AxisRange.MaxValue properties. Note that w hen changing either of these properties, the AxisRange.
Auto property is automatically set to false.
Where the qualitative, or date-time axis scale type is used, it's more convenient to limit the axis range
using the internal float representation of axis values, via the AxisRange.MinValueInternal and
AxisRange.MaxValueInternal properties. The same applies when it's required to limit the visible range of
an axis not strictly by its values, but betw een them.
809
Examples
810
To define the space remaining after the axis' ultimate value, you can use the AxisRange.
SideMarginsEnabled property. Note that enabling this option restricts the precision of the AxisRange.
MinValueInternal and AxisRange.MaxValueInternal properties, since there is an uncertainty in the axis
span which is occupied by the side-margins.
3.Now , we can allow end users to scroll the diagram along the limited X-axis, to access the series points
that are out of view. To do this, enable the XYDiagram2D.EnableAxisXScrolling property. After this, if the
XYDiagramPaneBase.EnableAxisXScrolling property of the corresponding pane is also enabled (or, set to
the default value), a scroll bar appears along the X-axis.
4.Finally, you can also restrict the scrolling range, making the points out of this range completely
inaccessible by an end user.
To do this, select the X-axis, and in the Properties w indow, expand the AxisBase.Range property. In it,
also expand the AxisRange.ScrollingRange property. You will see a set of properties identical to the set
of the axis visible range options.
So, to limit the scrolling range, specify the ScrollingRange.MinValue and ScrollingRange.MaxValue (or,
ScrollingRange.MinValueInternal and ScrollingRange.MaxValueInternal) properties. Again, after you
define any of these properties, the ScrollingRange.Auto property is automatically disabled.
810
Examples
811
The implementation of the ScrollingRange.SideMarginsEnabled property is similar to its axis range

counterpart.
If required, you can specify how the diagram can be scrolled (using the keyboard, mouse, or scroll bars), via the
XYDiagram2D.ScrollingOptions property.
See Also
Axis Visible and Scrolling Ranges
811
Examples
812

Charting > Examples > How to: Individually Adjust Axes Scrolling (Runtime Sample)
This example demonstrates how you can individually adjust scrolling along the required axes. A chart w ith two
panes is used to demonstrate this feature.
C#
C opy C ode
// ...
// Define the visible range for the axes.
diagram.AxisY.Range.Auto = false;
diagram.AxisY.Range.SetInternalMinMaxValues(2, 6);
diagram.AxisX.Range.Auto = false;
diagram.AxisX.Range.SetInternalMinMaxValues(2, 4);
diagram.SecondaryAxesX[0].Range.Auto = false;
diagram.SecondaryAxesX[0].Range.SetInternalMinMaxValues(2, 4);
// Specify the axes scrolling at the diagram's level.
diagram.EnableAxisXScrolling = true;
diagram.EnableAxisYScrolling = false;
// Individually specify the axes scrolling for the panes.
diagram.DefaultPane.EnableAxisXScrolling = DefaultBoolean.Default;
diagram.Panes[0].EnableAxisXScrolling = DefaultBoolean.False;
// Adjust how the scrolling can be performed.
diagram.ScrollingOptions.UseKeyboard = false;
diagram.ScrollingOptions.UseMouse = false;
diagram.ScrollingOptions.UseScrollBars = true;
}
Visual Basic
C opy C ode
' ...
' Define the visible range for the axes.
diagram.AxisY.Range.Auto = False
diagram.AxisY.Range.SetInternalMinMaxValues(2, 6)
diagram.AxisX.Range.Auto = False
diagram.AxisX.Range.SetInternalMinMaxValues(2, 4)
diagram.SecondaryAxesX(0).Range.Auto = False
diagram.SecondaryAxesX(0).Range.SetInternalMinMaxValues(2, 4)
' Specify the axes scrolling at the diagram's level.
diagram.EnableAxisXScrolling = True
diagram.EnableAxisYScrolling = False
' Individually specify the axes scrolling for the panes.
diagram.DefaultPane.EnableAxisXScrolling = DefaultBoolean.Default
diagram.Panes(0).EnableAxisXScrolling = DefaultBoolean.False
' Adjust how the scrolling can be performed.
diagram.ScrollingOptions.UseKeyboard = False
diagram.ScrollingOptions.UseMouse = False
diagram.ScrollingOptions.UseScrollBars = True
End Sub
812
Examples
813
See Also
How to: Make a Diagram Scrollable and Limit the Scrolling Range of Its Axis
813
Examples
814

Charting > Examples > How to: Individually Adjust Axes Zooming (Runtime Sample)
This example demonstrates how you can individually adjust zooming for different panes along the required axes.
A chart with tw o panes is used to demonstrate this feature.
C#
C opy C ode
// ...
// Cast the chart's diagram to the XYDiagram type, to access its panes.
// Enable the X-axis zooming at the diagram's level.
diagram.EnableAxisXZooming = true;
// Individually enable zooming for panes.
diagram.DefaultPane.EnableAxisXZooming = DefaultBoolean.True;
diagram.Panes[0].EnableAxisXZooming = DefaultBoolean.False;
// Specify how zooming is performed.
diagram.ZoomingOptions.UseKeyboard = false;
diagram.ZoomingOptions.UseKeyboardWithMouse = true;
diagram.ZoomingOptions.UseMouseWheel = true;
}
Visual Basic
C opy C ode
' ...
' Cast the chart's diagram to the XYDiagram type, to access its panes.
' Enable the X-axis zooming at the diagram's level.
diagram.EnableAxisXZooming = True
' Individually enable zooming for panes.
diagram.DefaultPane.EnableAxisXZooming = DefaultBoolean.True
diagram.Panes(0).EnableAxisXZooming = DefaultBoolean.False
' Specify how zooming is performed.
diagram.ZoomingOptions.UseKeyboard = False
diagram.ZoomingOptions.UseKeyboardWithMouse = True
diagram.ZoomingOptions.UseMouseWheel = True
End Sub
See Also
814
Examples
815
How to: Invoke the Chart Wizard at Runtime

Charting > Examples > How to: Invoke the Chart W izard at Runtime
This example demonstrates how to show the Chart Wizard at runtime w ith a pre-filled data source. This may be
useful for those applications w hen a chart is mostly configured by an end-user.
To run the Chart W izard at runtime you should use the ChartW izard.ShowDialog method of a ChartWizard object.
The follow ing code demonstrates how to create a chart object, bind it to a data source, then let an end-user
adjust the chart's settings via the wizard, and show a form with a chart in it.
C#
C opy C ode
using DevExpress.XtraCharts.Wizard;
// ...
// Create a chart.
// Set its data source.
// You can set any other specific options for the chart here.
chart.DataSource = dataSet11;
// Create a ChartWizard for a new ChartControl
ChartWizard wiz = new ChartWizard(chart);
// Invoke the chart's wizard.
wiz.ShowDialog();
// Create a form, add the chart to it, and display the form.
Form form = new Form();
form.Show();
Visual Basic
C opy C ode
Imports DevExpress.XtraCharts.Wizard
' ...
' Create a chart
Dim chart As ChartControl = New ChartControl
' Set its data source.
' You can set any other specific options for the chart here.
chart.DataSource = dataSet11
' Create a ChartWizard for a new ChartControl
Dim wiz As ChartWizard = New ChartWizard(chart)
' Invoke the chart's wizard.
wiz.ShowDialog
' Create a form, add the chart to it, and display the form.
Dim form As Form = New Form
form.Show
See Also
Chart W izard
How to: Change the Page Order in a Wizard
How to: Add a New Page to a W izard
How to: Hide Certain Tabs on a Wizard's Page
815
Examples
816

Charting > Examples > How to: Change the Page Order in a W izard
The follow ing example demonstrates how to change the order of pages in the Chart W izard. It shifts the
Appearance page to the last position w ithin the Construction group, and may be practical for some users.
C#
C opy C ode
using System.Collections.Generic;
// ...
ChartWizard wizard = new ChartWizard(this.chartControl1);
// Create a typed list for a manipulation with Wizard pages.
List<WizardPage> pages = new List<WizardPage>(wizard.Groups[0].Pages);
// Remove the first page.
WizardPage appearancePage = pages[1];
pages.Remove(appearancePage);
// Append it to the list to become the last page.
pages.Add(appearancePage);
// Order the pages.
wizard.Groups[0].Pages = pages.ToArray();
wizard.ShowDialog();
Visual Basic
C opy C ode
Imports System.Collections.Generic
' ...
Dim wizard As ChartWizard = New ChartWizard(Me.chartControl1)
' Create a typed list for a manipulation with Wizard pages.
Dim pages As List = New List(wizard.Groups(0).Pages)
' Remove the first page.
Dim appearancePage As WizardPage = pages(1)
pages.Remove(appearancePage)
' Append it to the list to become the last page.
pages.Add(appearancePage)
' Order the pages.
wizard.Groups(0).Pages = pages.ToArray
wizard.ShowDialog
See Also
Chart W izard
How to: Invoke the Chart W izard at Runtime
816
Examples
817
How to: Add a New Page to a Wizard

Charting > Examples > How to: Add a New Page to a W izard
The follow ing example demonstrates how to add a new group with a new page to the Chart W izard at runtime.
First, create a control that becomes a page's content. Create a new control that inherits from the
W izardControlBase and drop the ChartControl onto it. This follows because the page is intended to customize the
chart. The page should contain a chart control to display the changes as the settings are modified.
Then, use the following code to create a group and a page. You can handle the WizardPage.InitializePage event
to get access to the contained chart control.
C#
C opy C ode
//...
private void ShowNewWizard() {
// Create a Wizard instance.
ChartWizard wiz = new ChartWizard(this.chartControl1);
// Create a new group.
WizardGroup MyWizardGroup = wiz.RegisterGroup("NewGroup");
// Create a new page with a "MyPage" name, "MyHeader" as a caption, "MyDesription"
// as a description, without image. It contains the UserControl1.
WizardPage MyWizardPage = MyWizardGroup.RegisterPage(typeof(UserControl1),
"MyPage", "MyHeader", "MyDesription", null);
// Subscribe to the InitializePage event.
MyWizardPage.InitializePage += new InitializePageEventHandler (MyWizardPage_InitializePage);
// Invoke the Wizard.
wiz.ShowDialog();
}
void MyWizardPage_InitializePage(object sender, InitializePageEventArgs e) {
e.Chart = ((UserControl1)e.Control).chartControl1;
}
Visual Basic
C opy C ode
' ...
Private Sub ShowNewWizard()
' Create a Wizard instance.
Dim wiz As New ChartWizard(Me.chartControl1)
' Create a new group.
Dim MyWizardGroup As WizardGroup = wiz.RegisterGroup("NewGroup")
' Create a new page with a "MyPage" name, "MyHeader" as a caption,
' "MyDesription" as a description, without image. It contains the UserControl1.
Dim MyWizardPage As WizardPage = MyWizardGroup.RegisterPage(GetType(UserControl1), _
"MyPage", "MyHeader", "MyDesription", Nothing)
' Subscribe to the InitializePage event.
AddHandler MyWizardPage.InitializePage, AddressOf MyWizardPage_InitializePage
' Invoke the Wizard.
wiz.ShowDialog()
End Sub
Private Sub MyWizardPage_InitializePage(ByVal sender As Object, ByVal e As InitializePageEventArgs)
e.Chart = DirectCast(e.Control, UserControl1).chartControl1
End Sub
See Also
Chart W izard
817
Examples
818

Charting > Examples > How to: Hide Certain Tabs on a Wizard's Page
The follow ing example demonstrates how to hide certain property tabs on a Chart Wizard's page at runtime. This
technique is useful to prevent the end-users from modifying particular chart settings.
C#
C opy C ode
// ...
// Create a new Wizard.
ChartWizard wizard = new ChartWizard(this.chartControl1);
// Obtain a Data page.
WizardDataPage page = wizard.DataPage;
// Hide the tabs related to a data source on the Data page.
page.HiddenPageTabs.Add(DataPageTab.AutoCreatedSeries);
page.HiddenPageTabs.Add(DataPageTab.SeriesBinding);
// Invoke the Wizard window.
wizard.ShowDialog();
}
Visual Basic
C opy C ode
Imports DevExpress.XtraCharts.Wizard;
' ...
' Create a new Wizard.
Dim wizard As New ChartWizard(Me.chartControl1)
' Obtain a Data page.
Dim page As WizardDataPage = wizard.DataPage
' Hide the tabs related to a data source on the Data page.
page.HiddenPageTabs.Add(DataPageTab.AutoCreatedSeries)
page.HiddenPageTabs.Add(DataPageTab.SeriesBinding)
' Invoke the Wizard window.
wizard.ShowDialog()
End Sub
Show Me
See Also
Chart W izard
818
Examples
819
How to: Format Values in a Crosshair Cursor via a Label's Patterns

Charting > Examples > How to: Format Values in a Crosshair Cursor via a Label's Patterns
Show Me
This example demonstrates how to change a text displayed in crosshair labels using crosshair format patterns.
To accomplish this, it is necessary to specify a string which will represent the pattern displayed within a crosshair
label using the CrosshairAxisLabelOptions.Pattern, SeriesBase.CrosshairLabelPattern, and CrosshairOptions.
GroupHeaderPattern properties.
In addition, standard and custom format specifiers are used together w ith the placeholders to format numeric and
date/time values (e.g., "{A:F0}"). To learn more, see the Format Specifiers topic.
To learn more on crosshair cursors, see the Crosshair Cursor topic.
C#
C opy C ode
(Form1.cs)
using System;
namespace FormatCrosshairLabels
{
public partial class Form1 : Form
{
public Form1()
{
this.Load += new System.EventHandler(this.Form1_Load);
}
private void Form1_Load(object sender, EventArgs e)
{
// Create a first line series and add points to it.
Series series1 = new Series("Europe", ViewType.Line);
series1.Points.Add(new SeriesPoint(1950, 546));
// Create a second line series and add points to it.
Series series2 = new Series("Americas", ViewType.Line);
// Hide the legend (if necessary).
//Show crosshair axis lines and crosshair axis labels to see format values of crosshair lab
chartControl1.CrosshairOptions.ShowArgumentLabels = true;
chartControl1.CrosshairOptions.ShowValueLabels = true;
819
Examples
820
chartControl1.CrosshairOptions.ShowValueLine = true;
chartControl1.CrosshairOptions.ShowArgumentLine = true;
// Specify the crosshair label pattern for both series.
series1.CrosshairLabelPattern = "{S} population: {V}";
series2.CrosshairLabelPattern = "{S} population: {V}";
// Specify the crosshair group header pattern.
chartControl1.CrosshairOptions.GroupHeaderPattern = "Year: {A}";
// Specify the crosshair axis labels pattern for X-axis.
diagram.AxisX.CrosshairAxisLabelOptions.Pattern = "Year: {A:F0}";
}
}
}
Visual Basic
C opy C ode
(Form1.vb)
Imports System
Namespace FormatCrosshairLabels
Inherits Form
Public Sub New()
AddHandler Load, AddressOf Form1_Load
End Sub
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
' Create a first line series and add points to it.
Dim series1 As New Series("Europe", ViewType.Line)
series1.Points.Add(New SeriesPoint(1950, 546))
' Create a second line series and add points to it.
Dim series2 As New Series("Americas", ViewType.Line)
' Hide the legend (if necessary).
'Show crosshair axis lines and axis labels to see format values of crosshair labers
chartControl1.CrosshairOptions.ShowArgumentLabels = True
chartControl1.CrosshairOptions.ShowValueLabels = True
chartControl1.CrosshairOptions.ShowValueLine = True
chartControl1.CrosshairOptions.ShowArgumentLine = True
820
Examples
821
' Specify the crosshair label pattern.

series1.CrosshairLabelPattern = "{S} population: {V}"
series2.CrosshairLabelPattern = "{S} population: {V}"
' Specify the crosshair group header pattern.
chartControl1.CrosshairOptions.GroupHeaderPattern = "Year: {A}"
' Specify the crosshair axis labels pattern for X-axis.
diagram.AxisX.CrosshairAxisLabelOptions.Pattern = "Year: {A:F0}"
End Sub
End Class
End Namespace
821
Examples
822
Producing Output
How to: Save and Restore a Layout
Charting > Examples > How to: Save and Restore a Layout
The follow ing example demonstrates how to save a chart to a memory stream, and then restore it.
C#
C opy C ode
using System.IO;
// ...
Stream stream = new MemoryStream();
// ...
// Save the chart.
stream.Seek(0, System.IO.SeekOrigin.Begin);
chartControl1.SaveToStream(stream);
// Load the chart.
stream.Seek(0, System.IO.SeekOrigin.Begin);
chartControl1.LoadFromStream(stream);
Visual Basic
C opy C ode
Imports System.IO
' ...
Dim stream As System.IO.Stream
stream = New System.IO.MemoryStream()
' ...
' Save the chart.
stream.Seek(0, System.IO.SeekOrigin.Begin)
ChartControl1.SaveToStream(stream)
' Load the chart.
stream.Seek(0, System.IO.SeekOrigin.Begin)
ChartControl1.LoadFromStream(stream)
822
Examples
823
How to: Print a Chart and Show Its Print Preview

Charting > Examples > How to: Print a Chart and Show Its Print Preview
The follow ing example demonstrates how to print a ChartControl, or show its Print Preview . To do this, you
should use either the ChartControl.Print or ChartControl.ShowPrintPreview methods.
Note
A chart can be printed and previewed only if the XtraPrinting Library is available. To verify that printing the chart is
possible, use the ChartControl.IsPrintingAvailable property.
W hen printing a chart, the current print settings w ill be used to represent a chart. Note that you can access and
change these settings via the ChartControl.OptionsPrint property. End-users manually select the printer settings
by clicking the Customize toolbar button (
Printable Component Editor.
) in a chart's preview, and setting the required options in the
C#
C opy C ode
// ...
private void ShowChartPreview(ChartControl chart) {
// Check whether the ChartControl can be previewed.
if (!chart.IsPrintingAvailable) {
MessageBox.Show("The 'DevExpress.XtraPrinting.v7.2.dll' is not found", "Error");
return;
}
// Open the Preview window.
chart.ShowPrintPreview();
}
private void PrintChart(ChartControl chart) {
// Check whether the ChartControl can be printed.
if (!chart.IsPrintingAvailable) {
MessageBox.Show("The 'DevExpress.XtraPrinting.v7.2.dll' is not found", "Error");
return;
}
// Print.
chart.Print();
}
Visual Basic
C opy C ode
' ...
Sub ShowChartPreview(ByVal chart As ChartControl)
' Check whether the ChartControl can be previewed.
If Not chart.IsPrintingAvailable Then
MessageBox.Show("The 'DevExpress.XtraPrinting.v7.2.dll' is not found", "Error")
Return
End If
' Opens the Preview window.
chart.ShowPrintPreview()
End Sub
Sub PrintChart(ByVal chart As ChartControl)
' Check whether the ChartControl can be printed.
If Not chart.IsPrintingAvailable Then
MessageBox.Show("The 'DevExpress.XtraPrinting.v7.2.dll' is not found", "Error")
Return
End If
' Print.
chart.Print()
End Sub
The image below show s the print preview of a ChartControl.
823
Examples
824
Note
If you want to be able to customize different printing options when printing a chart, you need to print it via the
PrintableComponentLink component. For more information on using this component, refer to the How to: Use the
PrintableComponentLink to Print DevExpress Controls tutorial.
824
Examples
825
How to: Export a Chart to PDF

Charting > Examples > How to: Export a Chart to PDF
The follow ing example demonstrates how to export the chart's data as a PDF document either to a file or to a
stream.
C#
C opy C ode
using System.IO;
// ...
if (chartControl1.IsPrintingAvailable){
// Exports to a PDF file.
chartControl1.ExportToPdf("Output.pdf");
// Exports to a stream as PDF.
FileStream pdfStream = new FileStream("Output.pdf", FileMode.Create);
chartControl1.ExportToPdf(pdfStream);
// ...
pdfStream.Close();
}
Visual Basic
C opy C ode
Imports System.IO
' ...
If ChartControl1.IsPrintingAvailable Then
' Exports to a PDF file.
ChartControl1.ExportToPdf("Output.pdf")
' Exports to a stream as PDF.
Dim pdfStream As New FileStream("Output.pdf", FileMode.Create)
ChartControl1.ExportToPdf(pdfStream)
' ...
pdfStream.Close()
End If
825
Examples
826
How to: Export a Chart to HTML and MHT

Charting > Examples > How to: Export a Chart to HTML and MHT
The follow ing example demonstrates how to export a chart to HTML and MHT files. You may use similar methods in
your applications to export a ChartControl as HTML of MHT.
C#
C opy C ode
using System.IO;
using DevExpress.XtraPrinting;
// ...
private void ExportChartToHTML(ChartControl chart) {
if (chart.IsPrintingAvailable) {
// Create an object containing HTML export options.
HtmlExportOptions htmlOptions = new HtmlExportOptions();
// Set HTML-specific export options.
htmlOptions.CharacterSet = "utf-8";
htmlOptions.RemoveSecondarySymbols = false;
htmlOptions.Title = "Unicode UTF-8 Example";
// Export a chart to an HTML file.
chart.ExportToHtml("OutputUnicode.html", htmlOptions);
// Export a chart to a stream as HTML.
FileStream htmlStream = new FileStream("OutputDefault.html", FileMode.Create);
chart.ExportToHtml(htmlStream, htmlOptions);
}
}
private void ExportChartToMHT(ChartControl chart) {
if (chart.IsPrintingAvailable) {
// Create an object containing MHT export options.
MhtExportOptions mhtOptions = new MhtExportOptions();
// Set MHT-specific export options.
mhtOptions.CharacterSet = "iso-8859-1";
mhtOptions.Title = "Unicode UTF-8 Example";
// Export a chart to an MHT file.
chart.ExportToMht("OutputUnicode.mht", mhtOptions);
// Export a chart to a stream as MHT.
FileStream mhtStream = new FileStream("OutputDefault.mht", FileMode.Create);
chart.ExportToMht(mhtStream, mhtOptions);
}
}
Visual Basic
C opy C ode
Imports System.IO
Imports DevExpress.XtraPrinting
' ...
Private Sub ExportChartToHTML(ByRef Chart As ChartControl)
If (Chart.IsPrintingAvailable) Then
' Create an object containing HTML export options.
Dim HtmlOptions As New HtmlExportOptions()
' Set HTML-specific export options.
HtmlOptions.CharacterSet = "utf-8"
HtmlOptions.RemoveSecondarySymbols = False
HtmlOptions.Title = "Unicode UTF-8 Example"
' Export a chart to an HTML file.
Chart.ExportToHtml("OutputUnicode.html", HtmlOptions)
' Export a chart to a stream as HTML.
Dim HtmlStream As New FileStream("OutputDefault.html", FileMode.Create)
Chart.ExportToHtml(HtmlStream, HtmlOptions)
End If
826
Examples
827
End Sub
Private Sub ExportChartToMHT(ByRef Chart As ChartControl)
If (Chart.IsPrintingAvailable) Then
' Create an object containing MHT export options.
Dim MhtOptions As New MhtExportOptions()
' Set MHT-specific export options.
MhtOptions.CharacterSet = "iso-8859-1"
MhtOptions.Title = "Unicode UTF-8 Example"
' Export a chart to an MHT file.
Chart.ExportToMht("OutputUnicode.mht", MhtOptions)
' Export a chart to a stream as MHT.
Dim MhtStream As New FileStream("OutputDefault.mht", FileMode.Create)
Chart.ExportToMht(MhtStream, MhtOptions)
End If
End Sub
827
Examples
828
How to: Export a Chart to XLS

Charting > Examples > How to: Export a Chart to XLS
The follow ing example demonstrates how to export a chart image inserted into XLS document to either a file or a
stream.
C#
C opy C ode
using System.IO;
// ...
if (chartControl1.IsPrintingAvailable){
// Exports to an XLS file.
chartControl1.ExportToXls("Output.xls");
// Exports to a stream as XLS.
FileStream xlsStream = new FileStream("Output.xls", FileMode.Create);
chartControl1.ExportToXls(xlsStream);
// ...
xlsStream.Close();
}
Visual Basic
C opy C ode
Imports System.IO
' ...
If chartControl1.IsPrintingAvailable Then
' Exports to an XLS file.
chartControl1.ExportToXls("Output.xls")
' Exports to a stream as XLS.
Dim xlsStream As FileStream = New FileStream("Output.xls", FileMode.Create)
chartControl1.ExportToXls(xlsStream)
' ...
xlsStream.Close
End If
828
Examples
829
How to: Export a Chart to Image

Charting > Examples > How to: Export a Chart to Image
The follow ing example demonstrates how to use the ExportToImage method to create an image from a chart
control. The first method returns the image in the specified format, while the second writes the chart's image in
the specified format to the specified path.
C#
C opy C ode
using System.IO;
using System.Drawing.Imaging;
// ...
private Image GetChartImage(ChartControl chart, ImageFormat format) {
// Create an image.
Image image = null;
// Create an image of the chart.
using(MemoryStream s = new MemoryStream()) {
chart.ExportToImage(s, Format);
image = Image.FromStream(s);
}
// Return the image.
return image;
}
private void SaveChartImageToFile(ChartControl chart, ImageFormat format, String fileName) {
// Create an image in the specified format from the chart
// and save it to the specified path.
chart.ExportToImage(fileName, format);
}
Visual Basic
C opy C ode
Imports System.IO
Imports System.Drawing.Imaging
' ...
Private Function GetChartImage(Chart As ChartControl, Format As ImageFormat) As Image
' Create an image.
Dim Image As Image = Nothing
' Create an image of the chart.
Dim s As New MemoryStream()
Try
Chart.ExportToImage(s, format)
Image = Image.FromStream(s)
Finally
s.Dispose()
End Try
' Return the image.
Return Image
End Function
Private Sub SaveChartImageToFile(Chart As ChartControl, Format As ImageFormat, FileName As String)
' Create an image in the specified format from the chart
' and save it to the specified path.
Chart.ExportToImage(FileName, Format)
End Sub
829

XtraCharts PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

XtraCharts PDF

Uploaded by

Copyright:

Available Formats

Examples

2013 DevExpress Inc.

Web Charting Specifics

Scrolling and Zooming

2013 DevExpress Inc.

2013 DevExpress Inc.

2013 DevExpress Inc.

How to: Add a Chart to a Web Application

2013 DevExpress Inc.

2013 DevExpress Inc.

2013 DevExpress Inc.

To proceed, click Next.

2013 DevExpress Inc.

2013 DevExpress Inc.

2013 DevExpress Inc.

- set the SeriesBase.ArgumentDataMember property to the ProductName data field;

2013 DevExpress Inc.

Populate with Data at Design and Runtime

private void Form1_Load(object sender, EventArgs e) {

Private Sub Form1_Load(ByVal sender As System.Object, _

Get the Result

2013 DevExpress Inc.

How to: Bind Individual Chart Series to Data (Runtime Sample)

2013 DevExpress Inc.

How to: Bind a Chart to Data Using Series Templates

2013 DevExpress Inc.

Click Next to proceed.

Leave the default setting and click Next.

2013 DevExpress Inc.

Select the "GSP" table and click Finish.

2013 DevExpress Inc.

... and the only value in the SeriesBase.ValueDataMembers collection to GSP.

2013 DevExpress Inc.

private void Form1_Load(object sender, EventArgs e) {

Private Sub Form1_Load(ByVal sender As System.Object, _

2013 DevExpress Inc.

2013 DevExpress Inc.

2013 DevExpress Inc.

2013 DevExpress Inc.

If march IsNot Nothing Then

2013 DevExpress Inc.

How to: Change Colors of Automatically Created Series

Sub chartControl1_BoundDataChanged(ByVal sender As Object, ByVal e As EventArgs) _

2013 DevExpress Inc.

2013 DevExpress Inc.

// Add the pane to the diagram's collection.

2013 DevExpress Inc.

How to: Bind a Chart to an MDB Database (Runtime Sample)

chart.SeriesTemplate.View = New StackedBarSeriesView()

2013 DevExpress Inc.

How to: Bind a Chart to an Array List

public class Record {

Public Class Record

private void Form1_Load(object sender, EventArgs e) {

Private Sub Form1_Load(ByVal sender As Object, _

2013 DevExpress Inc.

2013 DevExpress Inc.

How to: Bind a Chart to an XML Data Source

2013 DevExpress Inc.

2013 DevExpress Inc.

How to: Bind a Chart to an XPO Data Source

2013 DevExpress Inc.