Generate ColumnLineChart using the chart wizard

Currently, three methods can be used to create ColumnLineChart: using the chart wizard, using the designer, and writing code. This article describes how to use the chart wizard to generate ColumnLineChart. mastering this method can quickly familiarize you with the UltraChar control of Infragistics. Here, I have to say that UltraChart is very powerful. The trouble is that it does not have a Chinese document. The content of this article includes many of my own understandings of control attributes. If anything is wrong, still hope to correct!

Step 1: Open the chart wizard

There are two ways to open the chart wizard: When we drag the chart control (UltraChart) to the form, the chart wizard will automatically open; during the design phase, right-click the chart control, select "Chart Wizard" from the shortcut menu ". No matter which method you use, the results will be effective.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Figure 1 select the wizard type

Two main options are available: Quick configuration of simple type charts and configuration of composite charts. Simple charts are common Pie charts, Column charts, and Line charts, my understanding is that the generation of graphs has low requirements on data and is easy to meet. Relatively speaking, the generation of those graphs has complicated and diverse requirements on data, but they are not easy to meet, composite Chart ). Literally, a chart is composed of simple charts.

The four buttons at the bottom of Figure 1 are side-by-side Cancle (cancel Operation), Back (return to the upper level), Next (jump to the Next level), and Finish (complete configuration ), to help us complete the configuration. All the steps provided by the chart wizard are set by default. Skip one step without several steps, so you do not have to perform any step-by-step operations. But our introduction is still on a step-by-step basis!

As ColumnLineChart is generated, it is a simple type chart. Here, the "select" command on the image above figure 1 or Figure 1 will jump to the next screen for setting, see figure 2.

Step 2: select the chart type you want to operate

Figure 2 select chart type

Step 2: select the chart type to be generated. Click the chart type in the drop-down list, and the result of generating the legend is displayed on the right. The function is provided to test your skill in English. Click the ColumnLineChart legend here. For more information, see Figure 2.

The ColumnLineChart Gallery has the advantages of a column chart and a line chart: First, it has the intuitive effect of a column chart displaying data, and second, it has a line chart displaying the trend of data changes.

Let's look at this long string of buttons, such as Chart Type, Data Lables, Axes, Color Model, Legends, Chart Title, and Chart Data, as mentioned above, the steps provided by the chart wizard can be non-linear. Click the buttons here to go directly to different steps.

Click "Next" and jump to the Next screen for setting. See figure 3.

Step 3: Set whether to display the corresponding data value on the graph

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Figure 3 whether the corresponding data value is displayed on the graph

This step is used to set whether to display the corresponding data values on the graph. This function is only available for two-dimensional Column (Bar chart), Bar (Bar chart), Area (Area chart) line (Line chart), Pie (Pie chart), Bubble (Bubble chart), and Scatter (hash chart). ColumnLineChart is not in this column and cannot display the corresponding data values on the chart.

Click "Next" to go to the Next screen for setting. See figure 4.

Step 4: Set the axis of the chart

Figure 4 set the axis of a chart

As mentioned earlier, the chart wizard sets default values for each step of the wizard Based on the chart type you selected. These values fully meet the data requirements of the selected chart type. 4. The four axes HorizontalX-Axis, VerticalY-Axis, Secondary HorizontalX-Axis, and Secondary VerticalY-Aix are set by default.

HorizontalX-Axis and Secondary HorizontalX-Axis are set to <ITEM_LABEL>, VerticalY-Axis and Secondary VerticalY-Aix are set to <DATA_VALUE: 00. ##> of course, the above settings can be modified, but it is strongly recommended that you do not do that, just keep it as it is, because such default settings comply with ColumnLineChart

The data requirements may not be met after the change!

Generally, the settings of HorizontalX-Axis and VerticalY-Axis meet the ColumnChart data requirements of ColumnLineChart (ColumnLineChart can be regarded as a combination of ColumnChart and LineChart ), the Secondary HorizontalX-Axis and Secondary VerticalY-Aix settings meet the LineChart data requirements of ColumnLineChart.

In Figure 4, switch to the "Axis Extend and Margins" column. For more information, see Figure 5. You can adjust the percentage of charts in the entire drawing area and the distance between the charts and edges. This operation is very fun, the right-side graph changes in the adjustment process, which is intuitive.

 

Figure 5 adjust the positional relationship between the chart and the drawing Area

In Figure 4, another function is to switch between each axis and set whether the axis is visible and whether the grid line is visible. See Figure 4 in the lower left corner, click or cancel the select box before visible, and click the select box before minorgridlines to get the corresponding effect.

Click "Next" to go to the next screen for setting. See figure 6.

Step 5: Set the chart display color

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Figure 6 set the chart color

If the data we want to display can be effectively distinguished by colors, one color for the same group and another color for different groups, the chart we get will be very intuitive, we can effectively differentiate the color. This step will guide us in doing this.

As a matter of fact, the system has defined some color styles for us. As long as we make a selection and specify them, and then set the method used for the selected color styles, we can get a very beautiful color scheme. These color styles include: linearrange, linerrandom, and purerandom. The two color styles linearrange and linerrandom are essentially gradient effects. The system allows us to set the starting and ending colors of the gradient effect.

In addition, the system also provides some style settings, such as customliner and customrandom, which require us to write code in the background to specify the chart display color.

Click "Next" to go to the next screen and set the settings. See figure 7.

Step 6: Set the Legend of the chart

Figure 7 set the legend of the image

The legends of a chart is a color indicator, which tells us which color the system uses to represent which type of data. It makes us clear.

In Figure 7, let's set whether to display legends and the orientation (single choice) of the chart, including left, right, top, and buttom.

Click "Next" to go to the next screen for setting. See figure 8.

Step 7: Set the chart title

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Figure 8 set the chart title

The chart title is used to describe this chart. You can set the chart's position (multiple options can be selected), including left, right, top, and buttom, displays the title content and the title format (bold, italic, underline, left alignment, center alignment, right alignment, and font setting ).

Click "Next" to go to the next screen for setting. See figure 9.

Step 8: set key attributes of chart data

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Figure 9 set important attributes of a chart

This section contains three important attributes: ZeroAlignData, SwapRowsAndColumns, and RowsLabelsColumn.

The ZeroAlignData attribute is used in the case that the provided data range does not include 0, for example, the data range is 10 ~ 200 if the ZeroAlignData attribute is set to True, the chart axis is drawn from 0. Otherwise, the chart is drawn from 10.

As the SwapRowsAndColumns attribute literally implies, It advertises the chart to switch the positions of column fields and row fields so that the data table can be transposed. This way, the processed data can have no effect.

The RowsLabelsColumn attribute is used in the case that the data source you provide contains multiple columns for an axis meets the data requirements of this axis, which column will you choose as the label of this axis?

Summarize and view results

In order to make the final display effect meaningful and beautiful, I added the following code in Page_load () on the page and adjusted the display direction of labels on the axis, for more information, see Figure 10. The final result is shown in Figure 11. Figure 12 shows the result after setting the SwapRowsAndColumns attribute.

Figure 10 Code loading using Page_Load

Figure 11 chart generation

Figure 12 effect of setting the SwapRowsAndColumns attribute