---
title: "Getting Started with Report Charts"
---

# Getting Started with Report Charts

> Report charts have a ton of functions and features that it's hard to know where to begin. You'll be amazed how simple a standard chart is to create. To start with, there are several chart types to select from, but the chart type you choose depends on the type of data you have and how that data might best be graphically displayed. Next, charts are driven by specific data keys in a data source. This page provides a quick start to getting you well on your way to creating report charts that are easy to configure and look stunning in your reports. Let's get started!

## Creating a Report Chart
One of the most common charts used for historical trending is a [Timeseries Chart](appendix/components/reporting-components/report-design-components/report-component-timeseries-chart/report-component-timeseries-chart.md). The Timeseries Chart plots values against a timestamp X axis.

Adding a chart to a report involves a couple of steps. In order, they are:

1. The chart needs data, so we must create a data source.
2. Once a data source exists, we can create the chart and assign the data source.
3. Apply any additional chart configuration, such as adding an additional axis.

Now, let's create a Timeseries Chart using Tag History data.

:::info Before you start this example...
Ignition comes with one internal Tag Provider so you can get started right away, but first you need to connect to a device. The [Simulator device driver](opc-ua-and-device-connections/opc-ua-and-device-connections.md#connecting-to-a-device) is a great starting point if your Gateway is not currently connected to a PLC. This example assumes you are using the Generic Simulator device tags, but any tags could be used instead. This example assumes that the simulator device connection was named '**gensim**', and [**Sine** tags were created](tags/browsing-and-creating-OPC-tags.md).

You also need a [database connection](database-connections/connecting-to-databases/connecting-to-databases.md) that the historian can use to store Historical Tag data. This example assumes [Tag History has been enabled](historian/configuring-tag-historian/set-up-tags-to-log.md) on the **Sine** tags.
:::

### Creating a Data Source
1. In the **Data** tab, under Parameters and Data Sources, click the plus ![](plus-icon.png) button to add a data source. Select **Tag Historian Query**.  

![](datasource.png)

2. Under the **Available Historical Tags** column, open the folder structure until you locate your Tags. As mentioned above, we are using the device connection named '**gensim**', so we will select the 'gensim' folder in this example. Here you'll find a bunch of Tags you can use immediately. Expand the **Sine** folder.
3. Select a few of the Tags (i.,e. sine0, sine1, sine2, sine3) and drag them to the **Selected Historical Tags** column under **Tag Path**. Take a look at the properties down at the bottom. Set the **Data Range** property to **Historical**, and the **Aggregation Mode** to **Time-weighted Average**.

![](data-tag-history-query.png)

### Adding a Chart
1. Now switch over to the **Design** panel. Drag a **Timeseries chart** from the Report Design Palette into the report and expand it.  
2. From the **Key Browser**, expand the **Datasources** folder, and drag your datasource (i.e., tag_history) down to the **Data Key** under the **Chart Options tab** of the Property Inspector.
3. Select **Test1** and **Test2** pens and delete them by selecting each pen individually, and then clicking the Trash Can icon ![](trash-can-icon.png).
4. Once the Data Key is correct, you can assign pens to your chart. Drag in your Keys (i.e., sine0, sine1, sine3, sine4) to the Pens property table. You'll immediately notice your chart is populated with fake data, this is just a preview and does not represent the data returned by your data source.

![](image2017-9-6_11-40-0.png)

5. You can modify a selected pen by clicking the Edit ![](edit-icon.png) button or double clicking the pen to open the **Edit Pen** tab. Here you can change the name of the pen, change the pen style, color, and more. Let's change the color of the pens to make them really stand out.
    * Lets start with the sine0 pen.
        * Set the **Color** to be red.
        * To return to the Chart Options tab, click the double arrow ![](backwards-arrow-icon.png) button.
    * Repeat the above steps for the remaining three pens, making sine1 green, sine2 dark blue, and sine3 purple.

    ![](image2017-9-6_12-12-45.png)

6. Go to the **Preview** tab to view the Timeseries Chart in the report. 

    ![](image2017-9-6_12-13-39.png)

### Adding an Axis
Unfortunately, it is a little difficult to see the small changes in our sine1 pen because its range is much smaller than the other pens. Let's fix this by adding a new axis.

1. Go back to the Design tab and select the chart. Click the Plus ![](plus-icon.png) button next to the Axes table to add a new axis, then click the Edit ![](edit-icon.png) button below it to edit our new Axis.
    * Give it a name of **Sine 1 axis**
    * Give it a Label of **Value for Sine1**
    * Change the position to right so that it shows up on the right side of the chart.
    * We can leave Auto Range turned on, so that it will automatically pick the appropriate min and max for the sine1 pen.
    * Return to the Chart Options tab by clicking the double arrow ![](backwards-arrow-icon.png) button.

    ![](image2017-9-6_13-56-50.png)

2. We now need to tell our sine1 pen to use that new axis. Select the sine1 pen from the pens list and click the Edit ![](edit-icon.png) button. Change the Axis of the pen to be the pen we just created.
3. Navigate to the Preview tab to view our finished chart.

    ![](image2017-9-6_14-0-49.png)