Incorporated with EspressReport is a sophisticated and powerful charting engine that allows you to include many different types of visual data representation in reports. You can also deploy charts independently from reports, adding stand-alone graphs to Web pages and applications. Charts can be created using the embedded Chart Designer interface, or using the charting APIs. This guide covers both designing charts via the Chart Designer and the API, as well as deploying charts with reports, and independently.
This section covers some of the basics of charts including the different parts of a chart and the way in which tabular data either from the report or another data source is mapped to a chart.
The following diagram illustrates the various components that make up a chart. Also, this diagram references various terms that will be used throughout this guide.
Main Title: This is the main title for the chart.
Chart Canvas: This is the background on which the chart is drawn. The canvas serves as the size/boundary for the chart, and is generally the same size as any exported image. You can modify the canvas color, or place/add an image file as a background.
Legend: This is the chart legend. The legend shows your category or series names along with a color point. Secondary values, as well as added trend/control lines and control areas, can also be displayed in the legend.
Category (X) Axis: This is the X or category axis of the chart. Generally the category axis plots the distinct entries from the data set for which you want to plot values in the chart. (The values are generally plotted on the Y-axis.) Certain chart types such as bar and Gantt reverse this by drawing the categories on the Y-axis, and plotting the values on the X-axis. Other chart types like scatter and bubble plots, plot values on each axis to create a point in 2D or 3D space.
X-Axis Labels: These are the labels for the X-axis elements or categories.
X-Axis Title: This is the X-axis title.
X Ticker: These are the X-axis tickers. By default the tickers match each data point in the chart.
Value (Y) Axis: This is the Y or value axis of the chart. Generally the Y-axis plots the values for each of the categories. By default the scale of the Y axis is generated to provide a best fit for the data set, however, it can be manually adjusted. For combination charts, the second value axis is drawn at the right-hand side of the plot.
Y-Axis Labels: These are the labels for the Y-axis values.
Y-Axis Title: This is the Y-axis title.
Y-Axis Ticker: These are the Y-axis tickers.
Y Grid: These are grid lines drawn along each scale step in the Y-axis. Grid lines can also be drawn for the points on the X-axis (and Z-axis for 3D charts).
Plot Area: This is the area, bounded by the axes, where all the data points are plotted. You can fill the area with color, and/or draw a border around the area, along with other options. The plot area can be moved and re-sized on the chart canvas.
Control Line: This is one of the special types of lines that can be added to a chart. In this instance it's a control line that follows the highest value in a series. Control lines can also be drawn for averages, and multiples of standard deviation. Users can also add a variety of trend lines to charts.
Floating Line: A floating line is an arbitrary line added to a chart. In this case it's being used as a pointer with an arrow. Floating lines move in relative position with the chart plot. They can also be used to create filled shapes.
Annotation Text: This is a piece of arbitrary text added to a chart (not labels or titles). You can place text anywhere in the chart canvas. Like floating lines, annotation text moves in relative position to the chart plot.
Category Elements: This is the plot for a category element. Because this chart has a data series, there are three points plotted for each category.
Data Series Elements: These are the individual points that make up a category. A series allows groups of data to be plotted on a single chart. For more about categories and series, see section 2.2.
Data Top Labels: These are labels placed at each data point in the chart that display the exact value for each point.
Data mapping is the way that raw data is rendered in the chart. Although data can be drawn from many sources, a chart looks for the basic structure of the data to be in the form of a table. Hence, data passed in as arguments, from a report, or from XML files is converted to a table structure before mapping. A basic set of data might look something line this:
| Product | Sales |
| Chair | 362 |
| Table | 862 |
| Dresser | 1052 |
| Cabinet | 1211 |
To plot this data in a chart, you would want to plot the Sales value for each entry in the Product column. Hence, the products are your category, and the sales numbers are your values. In a chart, you would map the Product column to the X (category) axis, and the Sales column to the Y (value) axis. The resulting plot, in a column chart, would look like this:
Here, a column is drawn to show the value for each distinct element in the category column. In addition to just the basic category values, additional information can be displayed in the form of a data series. For example, say that there is an additional element to our data that shows sales data not only for product, but also over a sales region. Our adjusted table would look like this:
| Product | Region | Sales |
| Chair | East | 114 |
| Chair | Midwest | 131 |
| Chair | West | 117 |
| Table | East | 231 |
| Table | Midwest | 187 |
| Table | West | 444 |
| Dresser | East | 327 |
| Dresser | Midwest | 469 |
| Dresser | West | 256 |
| Cabinet | East | 422 |
| Cabinet | Midwest | 386 |
| Cabinet | West | 403 |
In order to show the value for each region per product, we could add the Region column to the data mapping as a data series. Doing this gives us the following chart:
Now each category has three data points, one for each region. For two-dimensional charts the series is always displayed in-line. In three-dimensional charts, the series is drawn on the Z-axis by default, although it can be drawn in-line as well. Below, is the same chart show in 3D.
In this chart, the data series is drawn along the Z-axis. Note that the order of the categories has been changed to provide a better view of the data. This is the basic concept behind data mapping. Most chart types use this mapping, or mapping options similar to this. Detailed data mapping instructions for each chart type are available in Chapter 4.
To create a chart, you can select 'Insert Chart' from the Insert menu, or select the Insert Chart icon on the toolbar. A small rectangle will follow your cursor around the design window. Position the cursor where you would like to add the chart and click. This will bring up a dialog prompting you to specify data source options for the chart.
The following options are available for obtaining a data source for your chart.
Chart Data Options
When you use report data, however, the chart cannot be deployed independently from the report, and certain charting features like time-based zooming, and histograms are not available.
When you use an independent data source the chart can later be deployed independently from the report. Also, all of the charting features are available. Note that some features like drill-down are only functional when the chart is deployed independently from the report.
3.1.1.) Chart Parameter Linking
If you use a parameterized query as the chart data source, by default it will run with default values when the chart is run in the report. You can, however, use the chart parameter linking feature for the chart to retrieve it's parameter values based on column values in the report. This feature works in the same manner as the sub-report linking feature described in section 11.4 of the Designer Guide. To link a parameterized chart to a column, first insert a parameterized chart into a report. Then select 'Chart Parameter Mapping' from the Data menu. This will bring up a dialog allowing you to map column fields from the report to query parameters in the chart.
Chart Parameter Mapping Dialog
The dialog contains a tab for each parameterized chart. Each parameter in the chart can be mapped to a different column field in the report.
Once you select to use report data, or pick a different data source from the Data Source Manager, the next screen will present the first twenty records from the data source (With the exception of data views, which will require you to select fields and set conditions first). From this screen you can see all of the records returned by the selected source, by checking the ‘Show All Records’ box.
Often if you're drawing data in spreadsheet (pivot table) format, or from a crosstab report, you may want to use the column headers from the data source either as the categories, or as a data series. For example, the following table is shown when a crosstab report is used as the data source.
Data Table Dialog
In order to be able to plot the regional column headers (East, Midwest, & West) in the chart, you will first need to transpose the data. To transpose the data, click the checkbox at the bottom of the data table window. A new window will open prompting you to select the columns that you would like to transpose.
Select Transpose Dialog
Check the columns that you would like to transpose, and click 'Ok'. You will return to the data table where you will see the results of the data transposition. Columns that you have selected are removed from the data table, and the transposed columns are placed at the end of the table as new columns.
*Note - Columns that you select must have the same data type.
Data After Transposition
If you have selected to use an independent data source for the chart, you can use multiple data sources to build a composite table as you can with report. The feature works in the same manner as in the report wizard. For more information, please see section 3.8 of the Designer Guide.