The Visual Designer lets you select a chart layout and chart type, configure series, set properties for axes, set properties for a chart’s title and legend or configure a Navigator pane. To use the RadHtmlChart Visual Designer, open Visual Studio 2012, add a ScriptManager, and then put a RadHtmlChart on the page. Then choose the Design tab and click Smart Tag to open the RadHtmlChart Tasks window. Click the Open Configuration Wizard link (Figure 1) to open a dialog box (Figure 2), that provides a Visual Designer.
The tabs and their functionality of the RadHtmlChart Configuration Wizard are explained below.
The Type tab of the Configuration Wizard allows you to select the chart layout and the corresponding chart type you will create.You need to select the layout and the type of the chart first because not all chart series can be combined in the same chart. Selecting the proper type will prevent you from adding a series that will not be supported by the chart layout and the corresponding chart type you will be creating. For example, a PieSeries can be the only series in a chart with Default or Sparkline layout; a Scatter chart cannot host a Line chart because of the different x-axis type, etc.
The Series tab is where you modify the series collection. In Figure 3, a Bar chart has been selected in the Type tab, so only the BarSeries and LineSeries can be added. Also, onlythe properties that are applicable for the series' type are displayed.
As Figure 4 shows, you can set the desired column from the data source using the DataField textbox.
If you want to build a simple or static chart, you can choose to not set a data source and simply add items to the series in the Series Item collection editor below. Once again, the Configuration Wizard only shows properties that are relevant to the type of chart you selected.
The Configuration Wizard doesn't override already defined series. That being said, in order to switch to a different chart type, you must initially remove the inconsistent series and then add the new one. This is done to prevent data loss. Having a Configuration Wizard does not mean that everything will be set (or modified) by it, because this would make it very restrictive and unusable.
You can configure the x-axis of the chart on the next tab - XAxis (Figure 5).The Configuration Wizard exposes the most common properties of the axis (even though setting them is not necessary in most cases - the chart will adjust itself to the data). The right side of the XAxis tab features an Axis Items collection editor that lets you add static x-axis items.
The YAxis tab of the Configuration Wizard (Figure 6) exposes the Y-Axis configuration.On the left is a set of common properties for the main y-axis. On the right, you'll see an AdditionalYAxes collection editor that lets a developer add additional Y-axes and set their basic settings.
The Legend, Title tab (Figure 7) allows you to set the global properties of the chart related to the legend and the title. The available positions and alignments are provided in dropdowns and the color fill uses a color picker for fine-tuning without using additional color converters. The Text property is, of course, a textbox into which you can enter a custom string.
If you want to take advantage of the Data Navigation functionality, you can create and customize a Navigator pane from the Navigator tab (Figure 8).
This functionality is available only for a Stock layout.
On the left is a set of properties for modifying the hint, x-axis appearance and the date ranges of the selector use calenders for easing the input of DateTime values. On the right, you'll see the availableSeries collection editor that lets a developer add an appropriate series and adjust their corresponding settings.