Welcome to the Getting Started with DevExpress ASP.NET Chart.
The DevExpress ASP.NET Chart Control offers a comprehensive collection of 2D and 3D charts
to meet the data visualization needs of your end-users.
In this video, I’ll show you how to ...  Create a bar chart control
 Bind the chart series to data  Customize the chart using the designer
 And add a navigation bar to print and export the chart
First I’ll cover a few of the chart’s visual elements.
A chart's most fundamental element is the data point.
A group of data points represents a single series.
Points reside in the Series.Points collection, and no
series is displayed until it has at least one data point specified.
Each data point must have one argument and at least one value that corresponds to it.
In general, the pairing of an argument and its value is represented
on a diagram's axes as their X and Y coordinates, respectively, as illustrated in the following
image.
The ASP.NET Chart Control supports numerous series view types, which represent and organize
data in different ways, the visual representation
of a data point differs from one view to another.
OK, with that – let’s get started.
I’ll create a new ASP.NET Project.
I’ll select the DevExpress template gallery from the Visual Studio project templates list.
Let’s name the project and click Create.
In the gallery, select ASP.NET, then Responsive Web Application.
Let’s click 'Run Wizard'.
The DevExpress ASP.NET Project Wizard helps you to customize project settings for themes,
localization, and more.
Once I click 'Create Project', the wizard will generate a ready-made web application
with DevExpress ASP.NET controls.
Now, let me show you how to add the DevExpress ASP.NET Chart control to a new page.
Right-click on the project from the Solution Explorer.
Select Add, then select 'Webform with Master Page'.
Set the name to 'Chart' and the master page file to 'Root.master'.
The page has several empty content sections including Head, LeftPanel, RightPanel, and
the MainPage.
I’ll add a new Chart control to the MainPageContent area.
You can add controls from the design or source view.
I’ll stay in the source view.
Later in the video, I’ll show you can customize the chart using HTML
and JavaScript from the source view.
Now, find the DevExpress Chart Control in the toolbox ... and double-click to add the
WebChartControl onto the form.
Next, I’ll add a DataSource using SQL Server and the Northwind database.
Click the chart's Smart Tag to invoke its Tasks list.
Then, open the drop-down list for the 'Choose Data
Source' item and click 'New data source'.
This will invoke the Data Source Configuration Wizard.
Choose SQL Database and click OK.
On the next page, click ‘New Connection’ and enter the database details.
I'll connect to my local 'SQL Express' instance and choose the 'Northwind'
database.
Then click Next to save the connection.
From the list of tables, choose 'Products'.
Click OK … Next … 'Test the query' … and click Finish.
The DataSource object is now assigned to the chart.
Next, choose which data fields to use to provide data for the chart's series.
To do this, click the chart’s Smart Tag again and select ‘Run Designer’.
This brings up the ‘Chart Designer’ which allows you to create and customize a Web chart.
The Chart Designer is organized into three main areas:
 Chart Elements Tree  Chart Control Appearance
 and Customization Tabs The Data Tab shows the available fields from
our DataSource.
Now, I’ll add a new Series to the chart and bind it to the data fields.
In the chart elements tree, expand the Series Collection element.
Now select a Series View.
There are many types to choose from including Bar, Gantt,
Polar, and more.
Select Bar.
Now, from the Data tab, drag-and-drop the fields to specify our series data members.
Select the ‘ProductName’ data field for Argument
which will be used for the X-Axis.
Then select the ‘UnitPrice’ for Value which will be used for the Y-axis.
Most charts use two axes: the axis of arguments (X-axis) and the axis of values (Y-axis).
Next, I’ll filter the displayed data points in the series.
To do this, switch to the Properties tab and click
the ellipsis on the FilterCriteria property.
Using the Filter UI Editor, create a new condition and set the
CategoryID equal to four.
This filter will display only the items belonging to the 'Dairy Products'
category.
Now, I’ll go the Options tab and enable the Labels Visibility property.
Let me change the bars on this view so each bar is colored individually.
Switch to the Properties tab, expand the View property, and enable the ColorEach
property.
Click OK to close the Designer.
I’ll run this in the browser.
The default size of the chart is too small to
display our data points and view.
So I’ll go back to Visual Studio and increase the size of the chart.
I just used our Chart Designer to show you how easy it is to setup some properties.
However, you can also setup the Chart in source view or using
the Visual Studio properties pane.
I’ll use this to set the size.
The Height will be 675 pixels … and the Width will be 1200 pixels.
Now, I’ll run this in the browser again.
As you can see, a stunning data bound chart can be created with
ease.
Your end-users can use the hot tracking feature to view chart details.
However, the end-user can’t navigate to this Chart page since there is no option in
the top menu.
This can be easily addressed in the DevExpress
project template.
Go to the solution view and in the AppData folder, open the ApplicationMenuDataSource
file.
Add a new siteMapNode item.
Set the URL to 'Chart.aspx' and the Title to 'Chart'.
End-users can now navigate to the Chart page … and other pages of the web app.
Now, let me show you how to customize the legend element of our
bar chart.
From the Smart Tag, open the Designer again.
To customize the Legend for the Series, click the Properties tab and then click the ellipsis
on the LegendTextPattern property.
From the Pattern Editor, select 'Argument' and click OK.
This will allow the legend to display the ProductNames.
Since each bar has a different color, I’ll remove
the labels on the X-Axis by clicking the ‘Primary X-Axis’ from the Element Tree and unselect
the ‘Visibility’ checkbox.
I’ll also add a Title to the Y-Axis to help the users.
Click ‘Primary Y-Axis’ and from the Options Tab, check the Title ‘Visibility’
checkbox.
Set the Text to ‘Unit Price (Dollars)’.
I’ll also set the Series Label.
From the ‘Options’ Tab, click the ellipsis for the ‘Text Pattern’.
From the Format dropdown, I see there are many choices available on how to change the
display format for this text.
I’ll select Value and after the ‘V’, I’ll add ‘c’ for currency.
The text will display with a dollar sign and two decimal values.
Now, I’ll improve the legend positioning on the chart by moving it to the bottom of
the chart to allow more room to display the bars horizontally.
To do this, select the Default legend from the Elements tree.
In the Properties tab, set the AlignmentHorizontal property to 'Center'.
Then set the AlignmentVertical property to 'BottomOutside'
and the Direction property to 'LeftToRight'.
The Chart Designer shows us the preview without running the app.
Finally, I’ll add a title to the chart ... and set its Text property to 'Product Prices Comparison'.
Let’s run this in the browser.
Now our chart has a title and an improved legend.
Now, let me show you how to add Printing and Exporting functionality.
Above the GridView is a toolbar with buttons to interact with the GridView.
There is a similar toolbar area on the chart page.
I’ll a button there to print the chart.
In the PageToolBar area, I’ll add a simple HTML Button and set its height to 50px.
As you can see, the button can function, but it doesn’t have
the same theme and styles of the existing UI.
Instead, I’ll use the left area and another DevExpress control for
a better overall user interface.
As you can see, there is a content section labeled LeftPanelContent and I’ll add a
DevExpress ASP.NET Navigation Bar control there.
Find the ASPxNavBar in the toolbox and drag and drop it in the LeftPanelContent section.
Open the Designer from the Smart Tag.
I’ll create a new Group and set the Text to ‘Output’.
I’ll set the ItemImagePosition to Top so the NavBar displays
a separator between each item.
And I’ll expand the ItemStyle and set the HorizontalAlign property
to ‘Center’.
Next, I’ll add a new child item.
Set the Text property to ‘Print’ and the Name to ‘nbPrint’.
I’ll select the Group and add another child Item.
Set the Text property to ‘Export’ and the Name to ‘nbExport’.
Now, let me show you how to easily set an image icon without adding images to the project.
Click and select the ‘Print’ item.
The DevExpress ASP.NET subscription includes an icon collection.
The easiest way to assign an icon is to use the design-time Icon Picker dialog.
Expand the Image property.
Click the IconID property’s ellipsis button to display the Icon Picker, which allows you
to access images from the gallery and assign them to specific
control elements.
The Item Picker includes search and filtering features to locate images.
In search field, enter ‘Print’ and from the search results, I’ll select the
printer icon with a green checkmark.
I’ll also select the larger 32 by 32 image size.
Once an icon is selected, a string identifier is assigned to the IconID property.
Now, I’ll also select an image for the export NavBar item.
In the search field, enter ‘export’.
I intend to export using the PDF format with this NavBar
item, so I’ll choose the icon with the ‘PDF’ label.
Click the Client-Side Events link.
You can use the client-side ItemClick event to invoke printing and exporting.
You can configure the JavaScript client-side code through this designer;
however, I’ll use the Source view to show a different
way to setup the code.
I’ll add a short comment as a placeholder and click OK.
By adding the comment, the Designer has generated the ClientSideEvents HTML section with the
outline for the ItemClick event.
I’ll set the Width to 100% and run this in the browser.
Now, the end-users have an improved UI with the
NavBar.
This plain Button is now unnecessary.
So I’ll remove it from the ToolBar area.
Now I’ll show you how to write the JavaScript code and print the chart.
As I mentioned earlier, you can invoke both the print and export functions of the chart
from the clientside.
To enable client-side functionality of DevExpress ASP.NET WebForms controls, use the
ClientInstanceName property.
This property specifies a unique client-side identifier for a DevExpress
ASP.NET control and enables the client-side API.
For the chart, set the ClientInstanceName to ‘chart’.
For the NavBar, set the ClientInstanceName to
‘navbar’.
Now, in the ItemClick event, I’ll verify which NavBar item was clicked by checking
the e.item.name property.
Then, call the chart’s clientside Print method.
Now, in the browser, click the Print button and the browser’s print dialog is displayed.
However, the chart is too large for this layout.
Let me show you the methods to fix this issue.
I’ll create a variable called ‘options’ to retrieve the chart’s GetPrintOptions.
Then I’ll set the options.SetLandscape property to true.
And I’ll call the options.SetSizeMode method and pass in the
‘Stretch’ argument parameter.
Using this argument, a chart is stretched or shrunk to fit the page on
which it is printed.
In the browser, click Print again.
Voilà - the page has a landscape layout and the chart has been
stretched to fit the page.
Next, let me show you how to export the chart.
The code to export is nearly the same as printing, so I’ll
copy and paste the code.
Then, change the second IF statement to check if the ‘nbExport’ button was
clicked.
Then call the chart’s SaveToWindow method.
I’ll pass in the ‘pdf’ parameter.
The chart can export to several other formats as well.
For my short tutorial, I’ll leave the JavaScript code on the same page,
however, I recommend you place your JavaScript code into a separate file.
In fact, this project template uses this best practice.
For example, in the Content folder, the GridView.js file handles all the clientside
functionality for the GridView page.
The GridView page references the external JS file and can call the
functions within it.
Let’s run this in the browser.
Now, when I click ‘Export’ and the chart is displayed as a PDF.
With the chart stretched to fit the page and the landscape layout, it looks great.
And that’s it for this video.
I hope you’ve enjoyed this tutorial on the DevExpress ASP.NET Chart control.
If you liked this video, please give us a thumbs up.
If you have questions, please comment below.
And please remember to Subscribe to this channel
for more great DevExpress training videos.