aspnetmvc-114653-components-charting-getting-started-lesson-3-create-a-chart-using-a-series-template.md
This lesson goes over the steps needed to build a chart bound to data in Visual Studio using a series template.
In this step, do the following preparatory work.
To learn how to do this, refer to Lesson 1.
Now the blank project is ready for further customization.
In this step, a data model used to provide data to the View will be added to the project.
In the Solution Explorer , right-click the Models folder. In the invoked menu, click Add | New Item….
In the invoked Add New Item dialog, select the Class group and then select the Class item. Set the Class name to Gdp and click Add.
Then, create a new GdpProvider class as was done in the previous steps and add the following code to it.
Find the GDPofG7.xml file shipped with the DevExpress DemoCenter and copy it to the App_Data directory within the project directory.
Add the following code to the ChartController class definition.
Now, the Model preparation is finished and data can be provided to a Chart.
In this step, a Chart is added to the View and the series bound to the Model is added to the Chart.
Create a new ChartControlExtension. Bind the View.Model property to it and specify the series data member using the ChartControlExtension.Bind method (series data member values will be used to identify series). Finally, obtain the resulting HTML code using the ExtensionBase.GetHtml method. The following code snippet demonstrates how to do this.
Specify the SeriesBase.ArgumentDataMember and SeriesBase.ValueDataMembers properties of a series template to bind automatically generated series arguments and values to the Model properties. To obtain the series template, use the XtraChartsCollectionExtensions.Template method. Then, to specify the properties, use the SeriesBase.SetDataMembers method.
The chart is created. If you run the application now, it will look as follows.
Required data is provided to the Chart. In the next step, let’s customize the chart appearance.
In this step, the appearance of chart and series is improved and the chart title and axis titles are added.
To change the default palette, specify the ChartControlSettings.PaletteName property value. Also, to adjust the chart size, change its ChartControlSettings.Width and ChartControlSettings.Height properties.
To customize the view of all automatically generated series, use the XtraChartsSeriesBaseExtensions.Views method. Change the series view to line using the SeriesViewActionMethodContainer.LineSeriesView method of an object returned by Views(). For example, show markers by setting the LineSeriesView.MarkerVisibility property value of the view to DefaultBoolean.True.
To add a chart title, use the XtraChartsCollectionExtensions.Add method, which will allow you to configure an added ChartTitle object. Specify the title’s Title.Text property as shown below.
To specify an axis title, call the ChartControlSettings.XYDiagram method allowing you to configure the chart’s diagram as a diagram of the XYDiagram type. Then, using the XYDiagram.AxisY property, get access to the Y-axis settings and assign the Millions of USD string value to the Title.Text property of Axis.Title. Finally, set TitleBase.Visible to DefaultBoolean.True to show the Y-axis title.
To configure for which numeric values axis labels should be displayed, obtain the NumericScaleOptions object using the AxisBase.NumericScaleOptions property and modify it. For example, to show labels for each integer value, set the NumericScaleOptions.MeasureUnit property value to Ones and ScaleGridOptionsBase.GridOffset to 1.
To change the default legend options, use the XtraChartsCollectionExtensions.Default method. In this lesson, this method is used to locate the legend at the top-left corner of the chart (using the LegendBase.AlignmentHorizontal and LegendBase.AlignmentVertical properties) and align legend items from left to right (using the LegendBase.Direction property).