{"id":11176,"date":"2016-03-10T12:39:08","date_gmt":"2016-03-10T04:39:08","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=11176"},"modified":"2018-01-15T09:00:24","modified_gmt":"2018-01-15T01:00:24","slug":"charts-4-4-0","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/charts-4-4-0\/","title":{"rendered":"Charts (4.4.0)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.4.0 and later of P2 Explorer. For help on earlier versions of the chart, see <span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts-4-3-2\/\">Charts (4.3.2)<\/span>. For help on the latest version of the chart, see <a title=\"Chart\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">Charts<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"intro-text\">P2 Explorer charts work together with user controls to display source data interactively, using <a title=\"Variables\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">Variables<\/a>.<\/p>\n<div id=\"attachment_11190\" style=\"width: 641px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Chart-Overview-Pic.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11190\" class=\"wp-image-11190 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Chart-Overview-Pic.png\" alt=\"\" width=\"631\" height=\"367\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Chart-Overview-Pic.png 631w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Chart-Overview-Pic-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Chart-Overview-Pic-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Chart-Overview-Pic-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Chart-Overview-Pic-48x28.png 48w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/a><p id=\"caption-attachment-11190\" class=\"wp-caption-text\">This chart is driven by the user-selected entity (combo box) and product (option links).<\/p><\/div>\n<h2 class=\"page-subheading\">Prerequisite Reading<\/h2>\n<p class=\"intro-text\">You might find it helpful to read the following primer articles, before you configure a chart.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"120\"><a title=\"Explorer's Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/explorers-data\/\">Explorer's Data<\/a><\/td>\n<td width=\"500\">P2 Explorer uses P2 Server to deliver data from any number of data sources or calculations, on demand.<\/p>\n<p>Read about how P2 Explorer uses data, and how to use variables, default values and query parameters to make your displays more interactive.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><a title=\"Variables\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">Variables<\/a><\/td>\n<td>Explorer uses Variables to provide an interactive user interface.<\/p>\n<p>Find out how to link variables between the various components.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/td>\n<td>Default values set the context for a page or trend. A user should have access to relevant information, preferably without having to immediately change the default selections.<\/p>\n<p>Find out how to add defaults to a page in Studio.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 class=\"page-subheading\">Configuring a Chart<\/h2>\n<p class=\"intro-text\">The two aspects to configuring a chart are:<\/p>\n<p class=\"intro-text\">1. Selecting source data.<\/p>\n<p class=\"intro-text\">2. Configuring the chart's appearance.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Overview.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11182 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Overview.png\" alt=\"\" width=\"819\" height=\"623\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Overview.png 819w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Overview-768x584.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Overview-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Overview-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Overview-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Overview-48x37.png 48w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><\/a><\/p>\n<h2 class=\"page-subheading\">Selecting Source Data<\/h2>\n<p class=\"intro-text\">You can configure your chart to use data from any of the following data categories:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Data-Categories.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11248 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Data-Categories.png\" alt=\"\" width=\"335\" height=\"72\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Data-Categories.png 335w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Data-Categories-150x32.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Data-Categories-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Data-Categories-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Data-Categories-48x10.png 48w\" sizes=\"auto, (max-width: 335px) 100vw, 335px\" \/><\/a><\/p>\n<p class=\"intro-text\">The following types of data can be configured for a chart.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"500\"><strong>Dataset<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9576 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Dataset-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/><\/p>\n<p>Configure your chart to use dataset (relational) data.<\/p>\n<\/td>\n<td style=\"padding-left: 10px;\" width=\"500\"><strong>Attributes<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9574 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Attribute-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/><\/p>\n<p>Configure your chart to use time series data (attributes).<\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\"><strong>Ad-hoc Calculations<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9575 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Ad-Hoc-Calc-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/><\/p>\n<p>Configure your chart to use ad-hoc calculations, using time series data (tags, calculations and attributes).<\/p>\n<\/td>\n<td style=\"padding-left: 10px;\"><strong>Tags<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9573 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/tag-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/><\/p>\n<p>Configure your chart to use time series data (tags).<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 class=\"page-subheading\">Configuring the Chart's Appearance<\/h2>\n<div>\n<p class=\"intro-text\">Once you have data for the chart, you can start configuring the chart's appearance:<\/p>\n<\/div>\n<ul class=\"intro-text\">\n<li><a title=\"Series\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/charts\/#Series\">Series<\/a>: Explorer charts plot data as a series.<\/li>\n<li><a title=\"Axes\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/charts\/#Axes\">Axes<\/a>: The chart has an X Axis, as well as a Y Axis (left and\/or right).<\/li>\n<li><a title=\"Other\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/charts\/#Other\">Other<\/a>: This includes optional configurations for the chart's general appearance, such as orientation<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Axes-Other.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11667\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Axes-Other.png\" alt=\"\" width=\"300\" height=\"567\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Axes-Other.png 341w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Axes-Other-79x150.png 79w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Axes-Other-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Axes-Other-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Axes-Other-25x48.png 25w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<hr \/>\n<h3>Series<\/h3>\n<div>\n<p class=\"intro-text\">An Explorer chart is made of series. Select the series depending on how you want to display your data. You can also have a combination of series types in your chart.<\/p>\n<\/div>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"800\"><strong>Line Series:<\/strong><\/p>\n<p>The Line series plots your data in a single line. You can combine this with other lines series (as shown), or with different types of series, such as bar, for, etc.<\/p>\n<\/td>\n<td width=\"400\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4636 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/linechart150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/linechart150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/linechart150-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/linechart150-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/linechart150-48x48.png 48w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/td>\n<td width=\"800\"><strong>Bar Series:<\/strong><\/p>\n<p>The Bar series has rectangular bars (shown horizontally or vertically), where the length of each bar is proportional to its value.<\/p>\n<\/td>\n<td width=\"400\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4639 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/barcharthoriz150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/barcharthoriz150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/barcharthoriz150-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/barcharthoriz150-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/barcharthoriz150-48x48.png 48w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\"><strong>Stacked Bar Series:<\/strong><\/p>\n<p>The Stacked Bar series has one or more series containing bar charts which stack vertically to form single bars. This is useful when you want to show parts of a whole.<\/p>\n<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4637 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/barchart150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/barchart150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/barchart150-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/barchart150-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/barchart150-48x48.png 48w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/td>\n<td><strong>Area Series:<\/strong><\/p>\n<p>The Area series is a line series with the area below the line filled in with a colour. If using more than one area series, it can be helpful to adjust the opacity (as shown in this example).<\/p>\n<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4640 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/areachart150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/areachart150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/areachart150-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/areachart150-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/areachart150-48x48.png 48w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\"><strong>Dot Series:<\/strong><\/p>\n<p>The dot series displays each point as a dot, and is typically used to highlight statistical distributions.<\/p>\n<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4641 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/dotchart150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/dotchart150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/dotchart150-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/dotchart150-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/dotchart150-48x48.png 48w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/td>\n<td><strong>Combined Series:<\/strong><\/p>\n<p>Charts that combine different series are useful for showing related information in different ways.<\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/combined-series-2.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11315 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/combined-series-2.png\" alt=\"\" width=\"149\" height=\"150\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/combined-series-2.png 149w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/combined-series-2-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/combined-series-2-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/combined-series-2-48x48.png 48w\" sizes=\"auto, (max-width: 149px) 100vw, 149px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div>\n<p class=\"intro-text\">Your chart needs at least one series.<\/p>\n<\/div>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td width=\"300\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Overvoew.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11398 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Overvoew.png\" alt=\"\" width=\"339\" height=\"192\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Overvoew.png 339w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Overvoew-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Overvoew-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Overvoew-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Series-Overvoew-48x27.png 48w\" sizes=\"auto, (max-width: 339px) 100vw, 339px\" \/><\/a><\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td width=\"300\"><strong>1. <\/strong>To <em>add<\/em> a series, click <strong>Add<\/strong>, then edit the series properties.<\/td>\n<\/tr>\n<tr>\n<td><strong>2. <\/strong>To <em>remove<\/em> a series, click <strong>Remove<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong>3. <\/strong>To <em>edit<\/em> a series, click the series to open it, then edit the series properties.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div>\n<p class=\"intro-text\">The various chart series use a set of common properties, as well as a few extra properties specific to the different series types.<\/p>\n<\/div>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"650\">\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"650\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11661\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Number-1.png\" alt=\"\" width=\"25\" height=\"25\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Number-1.png 39w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Number-1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Number-1-36x36.png 36w\" sizes=\"auto, (max-width: 25px) 100vw, 25px\" \/><strong> Part 1: Properties Common to all Types of Series <\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong><em>Type:<\/em><\/strong><\/p>\n<p>Each series can be plotted to best suit your data. The default is <em>Line Series<\/em>.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Y Column:<\/em><\/strong><\/p>\n<p>This is a mandatory selection, and is one of the columns from the chart's data (using a fixed or variable column name). The <strong>Y Column<\/strong> values get plotted against the <strong>Y Axis<\/strong>.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Show Column Name:<\/em><\/strong><\/p>\n<p>Select this check box if you want the column name (as selected in <strong>Y Column<\/strong>) to show in the legend. This is overriden by <strong>Name<\/strong>, if that has a value.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Name:<\/em><\/strong><\/p>\n<p>The <strong>Y Column's<\/strong> name. This appears in the legend, and should describe what is being represented. For example, the name <em>COSTS<\/em> can be applied to a series where the <strong>Y Column<\/strong> is the value <em>TOTAL_AMT<\/em>, if this value represents costs. Any value assigned to <strong>Name<\/strong> overrides <strong>Show Column Name<\/strong>.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Name Column:<\/em><\/strong><\/p>\n<p><em>Name Column<\/em> is an alternative to <em>Name<\/em>. This uses one of the columns from the chart's data (using a fixed or variable column name). Each value in the data's named column is used as a separate name. An example would be a name column of 'Costs', where each separate cost in the data is plotted as a separate series. <em>Name Column<\/em> overrides the <strong>Name<\/strong>, effectively splitting a series into separate, smaller sub-series. For example, a line series that uses a column value as its name will show a separate line for each different name in the data.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Y Axis:<\/em><\/strong><\/p>\n<p>Choose left or right for the <strong>Y Axis<\/strong>. If you have more than one series, with a very different range of values, then you might choose to have a <strong>Left Y Axis<\/strong> for one series, and a <strong>Right Y Axis<\/strong> for others, so that values line up better on a single chart.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Filter Column and Filter Value:<\/em><\/strong><\/p>\n<p>Use <strong>Filter Column<\/strong> and <strong>Filter Value<\/strong> together, instead of the <strong>Name Column<\/strong>, if the <strong>Y Column<\/strong> values come from a field that stores values apart from the ones you want for this series. With <strong>Filter Column<\/strong> and <strong>Filter Value <\/strong>you will also need to specify a <strong>Name<\/strong>. <a title=\"Filter Column and Filter Value\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/filter-column-and-filter-value\/\">(More)<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"600\">\n<table>\n<tbody>\n<tr>\n<td width=\"650\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Replacement-screenshot.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13991 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Replacement-screenshot.png\" alt=\"\" width=\"362\" height=\"684\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Replacement-screenshot.png 362w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Replacement-screenshot-79x150.png 79w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Replacement-screenshot-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Replacement-screenshot-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Replacement-screenshot-25x48.png 25w\" sizes=\"auto, (max-width: 362px) 100vw, 362px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><strong><em>Colour:<\/em><\/strong><\/p>\n<p>Specify the colour of the series in hexadecimal, for example <em>#913D88<\/em> or RGB format, for example <em>RGB(145,61,136)<\/em>. You can also just type in the name of a colour, for example <em>RED, BLUE, MAGENTA, YELLOW<\/em> etc.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Colour Matcher:<\/em><\/strong><\/p>\n<p>You can type in a reserved word to get the correct matching colour. For example, <em>OIL<\/em> gives you the correct values for the specific oil green. Note that <strong>Colour<\/strong> overrides <strong>Colour Matcher<\/strong>, so keep it empty if you want to use <strong>Colour Matcher<\/strong>. Colour matcher values you can use are <em>OIL, GAS, NGL<\/em> and <em>WATER<\/em>. This is particularly useful if you\u2019re driving the colour from a value in the source data, and want it to be meaningful for the value that it\u2019s representing.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"1200\">\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"1200\"><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11660\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Number-2.png\" alt=\"\" width=\"25\" height=\"24\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Number-2.png 40w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Number-2-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Number-2-36x36.png 36w\" sizes=\"auto, (max-width: 25px) 100vw, 25px\" \/> Part 2: Properties Specific to the Selected Types of Series <\/strong><\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #cccccc;\">\n<td>The different series types have specific properties listed after the general properties, as shown in section 2 of the screenshot above.<\/td>\n<\/tr>\n<tr>\n<td><strong>Line Series<\/strong><\/p>\n<p>The Line series plots your data in a single line.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Line-Series.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11439 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Line-Series.png\" alt=\"\" width=\"354\" height=\"97\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Line-Series.png 354w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Line-Series-150x41.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Line-Series-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Line-Series-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Line-Series-48x13.png 48w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><strong><em>Interpolation:<\/em><\/strong><\/p>\n<p>Your choice here determines how the points on the chart are connected. The default value is <em>Monotone<\/em>. Other choices include <em>Step<\/em> and <em>Linear<\/em>. The full list is in the drop-down.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #cccccc;\">\n<td><strong><em>Thickness:<\/em><\/strong><\/p>\n<p>Determines the line thickness.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><strong>Bar Series<\/strong><\/p>\n<p>The Bar series has rectangular bars (shown horizontally or vertically), where the length of each bar is proportional to its value.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Bar-Series.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19068 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Bar-Series.png\" width=\"340\" height=\"103\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Bar-Series.png 340w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Bar-Series-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Bar-Series-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Bar-Series-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Bar-Series-48x15.png 48w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><strong><em>Bar Size:<\/em><\/strong><\/p>\n<p>If you want to specify a bar size, type a number here, for example 10, 20, 40 or 80. This determines the width of the bar, in pixels. Note that all the bar series on this chart will have the same width, and you only need to set this for one of the bar series. The bar size may be limited by Explorer, depending on bar padding and the available width for the chart. You can also use the word \"Fill\" to fill the bars completely.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #cccccc;\">\n<td><strong><em>Bar Padding:<\/em><\/strong><\/p>\n<p>This is the padding (in pixels) between the different bars for an x-value. Note that bar size and bar padding values will be overridden by Explorer, if there is not enough room on the chart.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><strong>Stacked Bar Series<\/strong><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Stacked-Bar-Series.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19070 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Stacked-Bar-Series.png\" width=\"341\" height=\"150\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Stacked-Bar-Series.png 341w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Stacked-Bar-Series-150x66.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Stacked-Bar-Series-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Stacked-Bar-Series-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Stacked-Bar-Series-48x21.png 48w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #cccccc;\">\n<td>The stacked bar is a series of one or more bar series.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><strong>Area Series<\/strong><\/p>\n<p>The Area series is a line series with the area below the line filled in with a colour.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Area-Series.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19067 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Area-Series.png\" width=\"336\" height=\"101\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Area-Series.png 336w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Area-Series-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Area-Series-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Area-Series-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Area-Series-48x14.png 48w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><strong><em>Opacity:<\/em><\/strong><\/p>\n<p>Determines how transparent or opaque the area is. Values range from 0 to 1 (although 0 is invisible). Adjusting the opacity is useful when you add more than one area series, with the areas in the background showing through. In such a case, make each successive area chart less opaque than the previous one. For example, the first one is Opacity 1, then next is 0.75, the next is 0.5 and so on.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #cccccc;\">\n<td><strong><em>Interpolation:<\/em><\/strong><\/p>\n<p>This is for the line demarcating the area series. Your choice here determines how the points on the chart are connected. The default value is <em>Monotone<\/em>. Other choices include <em>Step<\/em> and <em>Linear<\/em>. The full list is in the drop-down.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><strong>Dot Series<\/strong><\/p>\n<p>The dot series displays each point as a dot.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Dot-Series.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19069 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Dot-Series.png\" width=\"340\" height=\"60\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Dot-Series.png 340w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Dot-Series-150x26.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Dot-Series-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Dot-Series-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Dot-Series-48x8.png 48w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><strong><em>Radius:<\/em><\/strong><\/p>\n<p>The radius of each point. This can be a decimal value. The radius is useful if you want to emphasize one dot series (large radius) over another (smaller radius).<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples of Series Configuration<\/p>\n<p class=\"left-bar\"><a title=\"Axes\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/charts\/#Axes\">Skip to end of examples<\/a>.<\/p>\n<div>\n<p class=\"intro-text\">Here are some of the effects you can achieve by change the series properties; note that some properties are specific to the series type.<\/p>\n<\/div>\n<table>\n<tbody>\n<tr>\n<td width=\"400\"><div id=\"attachment_11368\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Opacity.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11368\" class=\"wp-image-11368\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Opacity.png\" alt=\"\" width=\"250\" height=\"250\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Opacity.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Opacity-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Opacity-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Opacity-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Opacity-48x48.png 48w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><p id=\"caption-attachment-11368\" class=\"wp-caption-text\">Changing the Opacity on two Area series<\/p><\/div><\/td>\n<td width=\"400\"><div id=\"attachment_11369\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-2.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11369\" class=\"wp-image-11369 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-2.png\" alt=\"\" width=\"250\" height=\"250\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-2.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-2-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-2-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-2-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-2-48x48.png 48w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><p id=\"caption-attachment-11369\" class=\"wp-caption-text\">A narrower Bar Size (25) on a Bar series<\/p><\/div><\/td>\n<td width=\"400\"><div id=\"attachment_11386\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-1.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11386\" class=\"wp-image-11386 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-1.png\" alt=\"\" width=\"250\" height=\"250\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-1.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-1-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Size-and-Padding-1-48x48.png 48w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><p id=\"caption-attachment-11386\" class=\"wp-caption-text\">Filled-in Bar Size (Fill) on a Bar series<\/p><\/div><\/td>\n<\/tr>\n<tr>\n<td><div id=\"attachment_11385\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Large-Dots-and-Small-Dots-2.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11385\" class=\"wp-image-11385 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Large-Dots-and-Small-Dots-2.png\" alt=\"\" width=\"250\" height=\"250\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Large-Dots-and-Small-Dots-2.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Large-Dots-and-Small-Dots-2-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Large-Dots-and-Small-Dots-2-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Large-Dots-and-Small-Dots-2-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Large-Dots-and-Small-Dots-2-48x48.png 48w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><p id=\"caption-attachment-11385\" class=\"wp-caption-text\">Two Dot series; each has its own Colour and its own Radius (for the dot size).<\/p><\/div><\/td>\n<td><div id=\"attachment_11384\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Split-Lines-2.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11384\" class=\"wp-image-11384 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Split-Lines-2.png\" alt=\"\" width=\"250\" height=\"250\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Split-Lines-2.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Split-Lines-2-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Split-Lines-2-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Split-Lines-2-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Split-Lines-2-48x48.png 48w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><p id=\"caption-attachment-11384\" class=\"wp-caption-text\">This is a single Line series. The lines are split using the Name Column.<\/p><\/div><\/td>\n<td><div id=\"attachment_11387\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Filtered-Line-Series-a.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11387\" class=\"wp-image-11387 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Filtered-Line-Series-a.png\" alt=\"\" width=\"250\" height=\"250\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Filtered-Line-Series-a.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Filtered-Line-Series-a-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Filtered-Line-Series-a-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Filtered-Line-Series-a-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Filtered-Line-Series-a-48x48.png 48w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><p id=\"caption-attachment-11387\" class=\"wp-caption-text\">This single Line series displays just one of the entities. Data is filtered using the Filter Column and Filter Value.<\/p><\/div><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr>\n<td width=\"1200\">The chart in the screenshots below has four Line series, with TOTAL using the right Y Axis, and GAS, OIL and NGL on the Left Y Axis.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr>\n<td width=\"400\"><div id=\"attachment_11382\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-1a.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11382\" class=\"wp-image-11382\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-1a.png\" alt=\"\" width=\"250\" height=\"190\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-1a.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-1a-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-1a-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-1a-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-1a-48x36.png 48w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><p id=\"caption-attachment-11382\" class=\"wp-caption-text\">A) All lines appear on the chart.<\/p><\/div><\/td>\n<td width=\"400\"><div id=\"attachment_11381\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-2a.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11381\" class=\"wp-image-11381\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-2a.png\" alt=\"\" width=\"250\" height=\"205\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-2a.png 305w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-2a-150x123.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-2a-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-2a-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-2a-48x39.png 48w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><p id=\"caption-attachment-11381\" class=\"wp-caption-text\">B) When the user clicks on the Left Y axis, only the left-axis lines are displayed.<\/p><\/div><\/td>\n<td width=\"400\"><div id=\"attachment_11380\" style=\"width: 259px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-3a.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-11380\" class=\"wp-image-11380\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-3a.png\" alt=\"\" width=\"249\" height=\"231\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-3a.png 270w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-3a-150x139.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-3a-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-3a-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-and-Right-Axes-3a-48x44.png 48w\" sizes=\"auto, (max-width: 249px) 100vw, 249px\" \/><\/a><p id=\"caption-attachment-11380\" class=\"wp-caption-text\">C) When the user clicks on the Right Y axis, only the right-axis line is displayed.<\/p><\/div><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">There are many options for configuring your series; try these out once you have set up a chart.<\/p>\n<hr \/>\n<h3>Axes<\/h3>\n<div>\n<p class=\"intro-text\">The chart has an X Axis, as well as a Y Axis (left and\/or right).<\/p>\n<\/div>\n<table>\n<tbody>\n<tr>\n<td width=\"1000\"><strong><em>X Axis:<\/em><\/strong><\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>The <strong>X Axis<\/strong> is the principle axis, horizontal by default, containing the values against which other values are then measured. For example, <em>AREAS<\/em> (<strong>X Axis<\/strong>) with allocated <em>BUDGETS<\/em> <strong>(Y Axis)<\/strong>.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>\n<table>\n<tbody>\n<tr>\n<td>\n<table>\n<tbody>\n<tr>\n<td width=\"175\"><strong>Column:<\/strong><\/td>\n<td width=\"550\">Choose a column (fixed or variable) from your source data, for example <em>AREA<\/em>. The column values for the result rows are then plotted along the <strong>X Axis<\/strong>, for example <em>Area 1, Area 2, Area 3<\/em>, etc.<\/td>\n<\/tr>\n<tr>\n<td><strong>Data Type:<\/strong><\/td>\n<td>This defaults to <em>String<\/em>, and should be compatible with the <strong>Column<\/strong>. If <strong>Column<\/strong> can be represented as a number, then you can select <em>Number<\/em> from the drop-down (the third option is <em>Time<\/em>). If this is still not compatible with some of the series, then you will get a warning message.<\/td>\n<\/tr>\n<tr>\n<td><strong>Visible:<\/strong><\/td>\n<td>If this is not selected (select the check box or use a variable to control this), the <strong>X Axis<\/strong> values do not appear along the <strong>X Axis<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Values:<\/strong><\/td>\n<td>Add one or more values to the existing values on the <strong>X Axis<\/strong> that are returned from the source data (add a list, or use a list variable). Values are added as strings.<\/td>\n<\/tr>\n<tr>\n<td><strong>Label:<\/strong><\/td>\n<td>This can be blank, or add a label (type this in, or set a variable) to be displayed below the <strong>X Axis<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Selected:<\/strong><\/td>\n<td>Select a variable here if you want to use the selected X Value as a variable in a text label or other control, or as a variable parameter to other dataset queries. At run-time, click a value on the X Axis to select it. (See <a title=\"Tutorial 4\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/charts\/#Tutorial_4_Setting_a_Variable_through_a_Selected_X_Axis\">Tutorial 4<\/a>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/X-Axis.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11330\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/X-Axis.png\" alt=\"\" width=\"300\" height=\"240\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/X-Axis.png 336w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/X-Axis-150x120.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/X-Axis-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/X-Axis-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/X-Axis-48x38.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Left Y Axis and Right Y Axis:<\/em><\/strong><\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>The <strong>Left Y Axis<\/strong>, vertical by default, is used for plotting values of the <strong>X Axis<\/strong>. Note that this axis is only used if <em>Left<\/em> is selected as the <strong>Y Axis<\/strong> in one or more series (it is, by default). The <strong>Left Y Axis<\/strong> comes preconfigured.<\/p>\n<p>The <strong>Right Y Axis<\/strong> is the same as the Left Y Axis, and can be used instead of or together with the Left Y Axis (selected in the Series).<\/p>\n<p>It is useful to have these two separate axes if there are series with very different expected values; this way, all series can be better scaled to show up well in the chart. Another use of having both Y Axes would be to show different types of measures. For example, show dollars along the Left Y Axis, and counts along the right Y Axis.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>\n<table>\n<tbody>\n<tr>\n<td>\n<table>\n<tbody>\n<tr>\n<td width=\"175\"><strong>Min and Max:<\/strong><\/td>\n<td width=\"550\">The max value cannot be exceeded, so only set <strong>Max <\/strong>if you know what the max should be, or if you are only interested in showing up to a maximum value. The same applies to <strong>Min<\/strong>. Min\/Max can be left out (no limit set), or assigned a fixed or variable numerical value (the limit). For example, you might use source data that returns the max value of the <strong>Y Field<\/strong>; use this as a variable <em>Max<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Visible:<\/strong><\/td>\n<td>If this is not selected (select the check box or use a variable to control this), the <strong>X Axis<\/strong>values do not appear along the <strong>X Axis<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Label:<\/strong><\/td>\n<td>This can be blank, or add a label (fixed or variable) to be displayed alongside the <strong>Y Axis<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Enable Gridlines:<\/strong><\/td>\n<td>Enable or disable gridlines.<\/td>\n<\/tr>\n<tr>\n<td><strong>Ticks:<\/strong><\/td>\n<td>Defines the number of Y Axis intervals<\/td>\n<\/tr>\n<tr>\n<td><strong>Tick Format:<\/strong><\/td>\n<td>Format the <strong>Y Field<\/strong>, which is displayed along the <strong>Y Axis<\/strong>. For example, if your <strong>Y Field<\/strong> is a dollar value, you can type in the dollar <strong>$<\/strong> symbol. Your labels would then look like $ 50.00, $ 25.00 and so on. Other formatting to use are the signs (+\/-), the comma (for a thousands separator)<strong>,<\/strong> and precision symbols. You can use these together, for example \u201c$ ,\u201d displays the currency symbol and has a thousands separator.<\/td>\n<\/tr>\n<tr>\n<td><strong>Scale Type:<\/strong><\/td>\n<td>The default option is <em>Linear<\/em> (showing the actual values). Logarithmic scale (<em>Log<\/em>) displays a logarithmic calculation, which is useful when you have a wide range of values to display. <strong>Tip<\/strong>: You can set the this as a variable in a Combo Box, so that the user can toggle between the log and linear scale.<\/td>\n<\/tr>\n<tr>\n<td><strong>Log Gridlines:<\/strong><\/td>\n<td>Note: This only applies to the <em>Log<\/em> <strong>Scale Type<\/strong>. Options are: <em>Major Only<\/em>, and <em>Major and Minor<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-Y-Axis.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11329\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-Y-Axis.png\" alt=\"\" width=\"300\" height=\"358\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-Y-Axis.png 320w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-Y-Axis-126x150.png 126w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-Y-Axis-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-Y-Axis-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Left-Y-Axis-40x48.png 40w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>Other<\/h3>\n<div>\n<p class=\"intro-text\">This includes optional configurations for the chart's general appearance, such as orientation.<\/p>\n<\/div>\n<table>\n<tbody>\n<tr>\n<td>\n<table>\n<tbody>\n<tr>\n<td width=\"125\"><strong><em>Orientation:<\/em><\/strong><\/td>\n<td>Charts default to vertical. If you change this to horizontal, then your Y Axis is plotted along the horizontal, and your primary values (<strong>X Axis<\/strong>) move to the vertical. Horizontal is useful if you are expecting a lot of X Values, as the legends stack neatly underneath each other (horizontally).<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Legend:<\/em><\/strong><\/td>\n<td>The legend displays the values of the <strong>X Axis Field<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Legend Position:<\/em><\/strong><\/td>\n<td>This option only appears if you select the <strong>Legend<\/strong>. Right by default. This can be <em>Left<\/em>, <em>Right<\/em>, <em>Top<\/em>, or choose <em>Top-inside<\/em> if you have limited space.<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Tooltip:<\/em><\/strong><\/td>\n<td>Tooltips show the Y value when you hover your mouse over that area of the chart (e.g. over a bar).<\/td>\n<\/tr>\n<tr>\n<td><strong><em>Style:<\/em><\/strong><\/td>\n<td>The style to apply to the chart component to change its appearance. If you are a Style Administrator, you can add a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/styles\/#Chart\">Chart style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Config-Other.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11353\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Config-Other.png\" alt=\"\" width=\"300\" height=\"219\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Config-Other.png 326w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Config-Other-150x110.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Config-Other-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Config-Other-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Config-Other-48x35.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div>\n<p class=\"intro-text\">The example screenshots below illustrate how orientation, layout and tooltips affect a chart's appearance:<\/p>\n<\/div>\n<table>\n<tbody>\n<tr>\n<td>This chart has vertical orientation, a legend on the right, and tooltips.<\/td>\n<td>Here the same chart has horizontal orientation, a legend on the top, and no tooltips.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Other-Config-1.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11359\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Other-Config-1.png\" alt=\"\" width=\"450\" height=\"271\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Other-Config-1.png 642w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Other-Config-1-150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Other-Config-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Other-Config-1-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Other-Config-1-48x29.png 48w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Other-Config-2a.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11362\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Other-Config-2a-400x238.png\" alt=\"\" width=\"451\" height=\"268\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2>Tutorial 1<\/h2>\n<p class=\"intro-text\">You can put a chart together in a matter of minutes, as most of the chart options are preconfigured.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Chart-Final.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11710 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Chart-Final.png\" alt=\"\" width=\"549\" height=\"453\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Chart-Final.png 549w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Chart-Final-150x124.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Chart-Final-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Chart-Final-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Bar-Chart-Final-48x40.png 48w\" sizes=\"auto, (max-width: 549px) 100vw, 549px\" \/><\/a><\/p>\n<p class=\"intro-text\">Follow the step-by-step instructions for adding this chart.<\/p>\n<hr \/>\n<h3 class=\"page-subheading\">Step by Step: Adding a Bar Chart<\/h3>\n<p class=\"intro-text\">We're going to add a very simple chart onto a page, using the minimum configuration required.<\/p>\n<p class=\"left-bar\"><strong>Note: <\/strong>Before you start the tutorial, <a title=\"Preparing an Explorer page for Tutorials\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/preparing-an-explorer-studio-page-for-a-tutorial\/\">prepare a page in Studio.<\/a><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9318\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page.png\" alt=\"\" width=\"700\" height=\"458\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page.png 1054w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page-768x503.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Explorer-Page-48x31.png 48w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 1. Add a Chart to the Page.<\/strong><\/p>\n<p class=\"intro-text\">Drag and drop a Chart component onto a grid cell.\u00a0The Chart\u00a0is in the Chart\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/chartsicon_sm.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1837\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/chartsicon_sm.png\" alt=\"chartsicon_sm\" width=\"22\" height=\"17\" \/><\/a>\u00a0group.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Add-a-chart.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11490\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Add-a-chart.png\" alt=\"\" width=\"900\" height=\"495\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Add-a-chart.png 1676w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Add-a-chart-768x422.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Add-a-chart-150x82.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Add-a-chart-1280x703.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Add-a-chart-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Add-a-chart-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Add-a-chart-48x26.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p class=\"intro-text\">Now configure the chart as follows:<\/p>\n<p class=\"intro-text\"><strong>Step 2. Select Data for your Chart.<\/strong><\/p>\n<p class=\"intro-text\">In this example we will use relational data (selecting the <em>Dataset<\/em> category). For more data options (for example, using tags or attributes), see the section: <a title=\"Options for Configuring a Chart's Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/charts\/#Options_for_Configuring_a_Charts_Data\">Options for Configuring a Chart's Data<\/a>.<\/p>\n<p class=\"intro-text\">We're going to choose a dataset that returns OIL, GAS and NGL data for the selected month (Feb). In the query, product figures are summed and grouped into years (rpt_year).<\/p>\n<p class=\"intro-text\">The chart will have a bar series showing annual OIL amounts for February, along an X Axis of reporting years (rpt_year).<\/p>\n<p class=\"intro-text\"><strong>Comprehensive<\/strong>: Follow the instructions in <a title=\"Using Dataset Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\">Using Dataset Data<\/a>, substituting with the following, if you have access to the training data (otherwise substitute to suit your own dataset and parameters):<\/p>\n<ul class=\"intro-text\">\n<li><strong>Dataset Query<\/strong>: AccountingProdAmtsDisplayMth<\/li>\n<li><strong>Dataset Parameters<\/strong>:\n<ul class=\"intro-text\">\n<li><strong>displayMth<\/strong>: Feb<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Summarized<\/strong>: Here are the summarized instructions:<\/p>\n<table class=\"table-toc\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td width=\"450\">\n<table>\n<tbody>\n<tr>\n<td width=\"2\">\u00a0<\/td>\n<td width=\"450\">1. Click the <strong>Data<\/strong> drop-down, then click the Dataset <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9576 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Dataset-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/> button on the <strong>Categories<\/strong> tab.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>2. In the <strong>Dataset Query<\/strong> edit box, select the dataset query.<\/p>\n<p>Search or browse for <em>AccountingProdAmtsDisplayMth<\/em><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>3. Define the Dataset Parameters.<\/p>\n<p>In the <strong>displayMth<\/strong> edit box, type <em>Feb<\/em>.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>4. Click the <strong>Data<\/strong> drop-down list to close it.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"400\">\n<table>\n<tbody>\n<tr>\n<td width=\"400\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-the-chart-data.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11694 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-the-chart-data.png\" alt=\"\" width=\"395\" height=\"462\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-the-chart-data.png 395w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-the-chart-data-128x150.png 128w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-the-chart-data-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-the-chart-data-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-the-chart-data-41x48.png 41w\" sizes=\"auto, (max-width: 395px) 100vw, 395px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 3.<\/strong> Configure the Chart's Appearance.<\/p>\n<p class=\"intro-text\"><strong>Step 3 a)<\/strong> Add a Bar Series.<\/p>\n<p class=\"intro-text\">In this step we will add a bar series showing OIL.<\/p>\n<table class=\"table-toc\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td width=\"405\">\n<table>\n<tbody>\n<tr>\n<td width=\"2\">\u00a0<\/td>\n<td width=\"450\">Click the Chart component to open its property editor.<\/td>\n<\/tr>\n<tr>\n<td width=\"2\">\u00a0<\/td>\n<td width=\"450\">1. For <strong>Type<\/strong>, select <em>Bar Series<\/em> from the drop-down list.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>2. For the <strong>Y Column<\/strong>, keep <em>Data Column<\/em> in the first drop-down list, and select <em>OIL<\/em> from the second drop-down, which lists the names of all columns from the dataset query's data.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>3. Select <strong>Show Column Name<\/strong>.<\/p>\n<p>The column name (OIL) will show in the legend.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>4. In the <strong>Colour Matcher<\/strong> edit box, type <em>OIL<\/em>.<\/p>\n<p>This is optional; chart series are assigned a colour if nothing is specified in <strong>Colour<\/strong> or <strong>Colour Matcher<\/strong>.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"400\">\n<table>\n<tbody>\n<tr>\n<td width=\"400\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/bar-series-showing-oil.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14008 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/bar-series-showing-oil.png\" alt=\"\" width=\"334\" height=\"732\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/bar-series-showing-oil.png 334w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/bar-series-showing-oil-68x150.png 68w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/bar-series-showing-oil-11x24.png 11w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/bar-series-showing-oil-16x36.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/bar-series-showing-oil-22x48.png 22w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 3 b) <\/strong>Configure the Axes.<\/p>\n<p class=\"intro-text\">In this step we will configure the X Axis to use the <em>rpt_year<\/em> column from the dataset query results. The Y Axes do not need configuring.<\/p>\n<table class=\"table-toc\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td width=\"405\">\n<table>\n<tbody>\n<tr>\n<td width=\"2\">\u00a0<\/td>\n<td width=\"450\">1. Click <strong>X Axis<\/strong> to expand the <em>X Axis<\/em> section.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>2. For <strong>Column<\/strong>, keep <em>Data Column<\/em> in the first drop-down list, and select <em>rpt_year<\/em> from the second drop-down list.<\/p>\n<p>The second drop-down list contains the names of all columns from the dataset query's data.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"400\">\n<table>\n<tbody>\n<tr>\n<td width=\"400\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-X-Axis-2.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11717 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-X-Axis-2.png\" alt=\"\" width=\"350\" height=\"418\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-X-Axis-2.png 350w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-X-Axis-2-126x150.png 126w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-X-Axis-2-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-X-Axis-2-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-X-Axis-2-40x48.png 40w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 3 c) <\/strong>Add a Legend and Tooltip.<\/p>\n<p class=\"intro-text\">In this step we will add a tooltip, as well as a legend for the bar series' name: OIL.<\/p>\n<table class=\"table-toc\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td width=\"405\">\n<table>\n<tbody>\n<tr>\n<td width=\"2\">\u00a0<\/td>\n<td width=\"450\">1. Select the <strong>Legend<\/strong> checkbox.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td width=\"450\">2. Select the <strong>Tooltip<\/strong> checkbox.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"400\">\n<table>\n<tbody>\n<tr>\n<td width=\"400\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tooltip-and-Legend.png\" rel=\"lightbox-33\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11719 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tooltip-and-Legend.png\" alt=\"\" width=\"328\" height=\"240\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tooltip-and-Legend.png 328w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tooltip-and-Legend-150x110.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tooltip-and-Legend-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tooltip-and-Legend-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tooltip-and-Legend-48x35.png 48w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Well done! You've added a chart with a bar series.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Bar-Chart-Final-annotated-2.png\" rel=\"lightbox-34\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14017 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Bar-Chart-Final-annotated-2.png\" alt=\"\" width=\"640\" height=\"453\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Bar-Chart-Final-annotated-2.png 640w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Bar-Chart-Final-annotated-2-150x106.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Bar-Chart-Final-annotated-2-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Bar-Chart-Final-annotated-2-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Bar-Chart-Final-annotated-2-48x34.png 48w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p class=\"intro-text\">The following advanced tutorials show how you can manipulate the chart's data and the chart's appearance using variables from other controls, as well as a tutorial for using the chart as a control for a variable.<\/p>\n<h2 class=\"page-subheading\">Advanced Tutorials<\/h2>\n<p class=\"intro-text\">These tutorials demonstrate how to get your chart to interact with other controls on an Explorer page.<\/p>\n<p class=\"intro-text\">We will be using the basic chart created in <a title=\"Tutorial 1\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/charts\/#Tutorial_1\"> Tutorial 1<\/a>.<\/p>\n<h3>Tutorial 2: Dataset Query Parameters using Variables<\/h3>\n<p class=\"intro-text\">In this tutorial, we will add a Combo Box component to control the <em>displayMth<\/em> parameter for the chart's dataset query, <em>AccountingProdAmtsDisplayMth<\/em>.<\/p>\n<p class=\"left-bar\"><strong>Note: <\/strong>Before you start the tutorial, open the Studio page containing your chart from Tutorial 1, as you will be updating this.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add and Configure a Combo Box with a Default Value.<\/strong><\/p>\n<p class=\"intro-text\">In this step we'll add and configure a Combo Box, and provide a default value.<\/p>\n<p class=\"left-bar\">Related: See how to add and configure a <a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a> and <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\">Default Values<\/a>.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td width=\"1000\">\n<table>\n<tbody>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"500\">1. Drag and drop a <em>Combo Box<\/em> onto a grid cell.<\/td>\n<td style=\"padding-left: 10px;\" width=\"500\">2. Add a list of <em>Values<\/em> to the Combo Box's <em>Option Values<\/em>: Jan, Feb, Mar and Apr.<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/1.-Add-a-combo-Box-a.png\" rel=\"lightbox-35\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11772 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/1.-Add-a-combo-Box-a-392x300.png\" alt=\"\" width=\"392\" height=\"300\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/2-Configure-the-combo.png\" rel=\"lightbox-36\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11771 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/2-Configure-the-combo-338x300.png\" alt=\"\" width=\"338\" height=\"300\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"500\">3. In the <strong>Selected Option<\/strong> drop-down list, type <em>selectedMonth<\/em>.<\/td>\n<td style=\"padding-left: 10px;\">4. Add a default value: <em>selectedMonth<\/em> and give it a value: <em>Jan<\/em>.<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-Combo-Box.png\" rel=\"lightbox-37\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-11740 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-Combo-Box.png\" alt=\"\" width=\"354\" height=\"272\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-Combo-Box.png 354w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-Combo-Box-150x115.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-Combo-Box-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-Combo-Box-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Configure-Combo-Box-48x37.png 48w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Step-4-Add-Default-Value-1-1.png\" rel=\"lightbox-38\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11741 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Step-4-Add-Default-Value-1-1-320x600.png\" alt=\"\" width=\"320\" height=\"600\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 2. Update Chart to use the Selected Option.<\/strong><\/p>\n<p class=\"intro-text\">In this step, we'll update the chart's dataset query to use the new variable parameter: the Combo Box's <em>selectedOption<\/em>, <strong>selectedMonth<\/strong>.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td width=\"2\">\u00a0<\/td>\n<td width=\"450\">Click the Chart component to open its property editor.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>1. Click the <strong>Data<\/strong> drop-down list to configure the data.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>2. Click the <em>Variable<\/em> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7913 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Use-Variable-a.png\" alt=\"\" width=\"18\" height=\"24\" \/> button.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>3. In the <em>displayMth<\/em> drop-down list, select <strong>selectedMonth<\/strong>.<\/p>\n<p>This is the variable controlled by the Combo Box, and with a Default Value of <em>Jan<\/em>.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"800\">\n<table>\n<tbody>\n<tr>\n<td width=\"800\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Reconfigure-the-Chart-a.png\" rel=\"lightbox-39\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11777 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Reconfigure-the-Chart-a.png\" alt=\"\" width=\"539\" height=\"432\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Reconfigure-the-Chart-a.png 539w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Reconfigure-the-Chart-a-150x120.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Reconfigure-the-Chart-a-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Reconfigure-the-Chart-a-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Reconfigure-the-Chart-a-48x38.png 48w\" sizes=\"auto, (max-width: 539px) 100vw, 539px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Watch the video below to see the Combo Box selections change the Chart's data, in preview mode. Note how the value (shown in the tooltip) changes, each time a different month is selected in from the combo box. The changing <em>displayMth<\/em> parameter causes the dataset query to re-run, returning a different set of results.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_371893128\" class=\"video-js vjs-default-skin\" width=\"898\" height=\"404\" controls preload=\"none\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/ControlChartParameters2.mp4\" type='video\/mp4' \/>\r\n\t\t\r\n\t\t\r\n\t<\/video>\r\n\t<!-- End Video.js -->\r\n\n<h3>Tutorial 3: Series Configuration using Variables<\/h3>\n<p class=\"intro-text\">In this tutorial, we will add another Combo Box component to control the <em>Bar Series'<\/em> <strong>Y Column<\/strong> and <strong>Name<\/strong> properties.<\/p>\n<p class=\"intro-text\">The result is that a user can control what gets displayed in the chart, by selecting an option from a Combo Box.<\/p>\n<p class=\"left-bar\"><strong>Note: <\/strong>Before you start the tutorial, open the Studio page containing your chart from Tutorial 1, as you will be updating this.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add and Configure a Combo Box with a Default Value.<\/strong><\/p>\n<p class=\"intro-text\">In this step we'll add and configure a Combo Box, and provide a default value.<\/p>\n<p class=\"left-bar\">Related: See how to add and configure a <a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a> and <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\">Default Values<\/a>.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td width=\"1000\">\n<table>\n<tbody>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"500\">1. Drag and drop a <em>Combo Box<\/em> onto a grid cell.<\/td>\n<td style=\"padding-left: 10px;\" width=\"500\">2. Add a list of <em>Values<\/em> to the Combo Box's <em>Option Values<\/em>: OIl, GAS, NGL.<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-1.-Add-Combo-Box.png\" rel=\"lightbox-40\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11786 size-medium alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-1.-Add-Combo-Box-394x300.png\" alt=\"\" width=\"394\" height=\"300\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-2.-Configure-Combo-Box.png\" rel=\"lightbox-41\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11785 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-2.-Configure-Combo-Box.png\" alt=\"\" width=\"353\" height=\"286\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-2.-Configure-Combo-Box.png 353w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-2.-Configure-Combo-Box-150x122.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-2.-Configure-Combo-Box-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-2.-Configure-Combo-Box-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-2.-Configure-Combo-Box-48x39.png 48w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"500\">3. In the <strong>Selected Option<\/strong> drop-down list, type <em>selectedProduct<\/em>.<\/td>\n<td style=\"padding-left: 10px;\">4. Add a default value: <em>selectedProduct<\/em> and give it a value: <em>OIL<\/em>.<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-3.-Selected-Option.png\" rel=\"lightbox-42\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-11784 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-3.-Selected-Option.png\" alt=\"\" width=\"354\" height=\"294\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-3.-Selected-Option.png 354w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-3.-Selected-Option-150x125.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-3.-Selected-Option-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-3.-Selected-Option-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-3.-Selected-Option-48x40.png 48w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-4-Add-Default.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11783\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-4-Add-Default.png\" alt=\"\" width=\"300\" height=\"602\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-4-Add-Default.png 354w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-4-Add-Default-75x150.png 75w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-4-Add-Default-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-4-Add-Default-18x36.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-3-4-Add-Default-24x48.png 24w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 2. Update Chart to use the Selected Option.<\/strong><\/p>\n<p class=\"intro-text\">In this step, we'll update the chart's bar series to use a variable parameter for <strong>Y Column<\/strong> and <strong>Name<\/strong>: the Combo Box's <em>selectedOption<\/em>, <strong>selectedProduct<\/strong>.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td width=\"2\">\u00a0<\/td>\n<td width=\"450\">Click the Chart component to open its property editor.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>1. Click <strong>Bar Series<\/strong> to configure the bar series details.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>2. For <strong>Y Column<\/strong>, select <em>Variable<\/em> from the first drop-down list, then type <em>selectedProduct<\/em> in the edit box.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>3. De-select <strong>Show Column Name<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>4. For <strong>Name<\/strong>, select <em>Variable<\/em> from the first drop-down list, and <em>selectedProduct<\/em> from the second drop-down list.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>5. For <strong>Colour Matcher<\/strong>, select <em>Variable<\/em> from the first drop-down list, and <em>selectedProduct<\/em> from the second drop-down list.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"800\">\n<table>\n<tbody>\n<tr>\n<td width=\"800\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/update-chart-selected-Product.png\" rel=\"lightbox-44\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14019 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/update-chart-selected-Product.png\" alt=\"\" width=\"342\" height=\"735\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/update-chart-selected-Product.png 342w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/update-chart-selected-Product-70x150.png 70w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/update-chart-selected-Product-11x24.png 11w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/update-chart-selected-Product-17x36.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/update-chart-selected-Product-22x48.png 22w\" sizes=\"auto, (max-width: 342px) 100vw, 342px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Watch the video below to see the Combo Box selections change the Chart's data, in preview mode. Note how the chart colour and values, as well as the legend, change as different products are selected from the combo box.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_1271084592\" class=\"video-js vjs-default-skin\" width=\"920\" height=\"346\" controls preload=\"none\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/ControlChartSeries.mp4\" type='video\/mp4' \/>\r\n\t\t\r\n\t\t\r\n\t<\/video>\r\n\t<!-- End Video.js -->\r\n\n<h3>Tutorial 4: Setting a Variable through a Selected X Axis<\/h3>\n<p class=\"intro-text\">In this tutorial, we will add a variable to the X Axis' <em>Selected<\/em> property, and display this in a Text Label.<\/p>\n<p class=\"left-bar\"><strong>Note: <\/strong>Before you start the tutorial, open the Studio page containing your chart from Tutorial 1, as you will be updating this.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add and Configure a Combo Box with a Default Value.<\/strong><\/p>\n<p class=\"intro-text\">In this step we'll add and configure a Text Label, and provide a Default Value.<\/p>\n<p class=\"left-bar\">Related: See how to add and configure a <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> and <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\">Default Values<\/a>.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td width=\"1000\">\n<table>\n<tbody>\n<tr>\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"500\">1. Drag and drop a <em>Text Label<\/em> onto a grid cell.<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.1.png\" rel=\"lightbox-45\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11799 size-medium alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.1-381x300.png\" alt=\"\" width=\"381\" height=\"300\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"500\">3. Configure the Text Label's <strong>Content<\/strong>: Type \"Selected Year is:\" then add the variable <em>selectedRptYear<\/em>.<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.3.png\" rel=\"lightbox-46\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11797 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.3.png\" alt=\"\" width=\"350\" height=\"335\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.3.png 350w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.3-150x144.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.3-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.3-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.3-48x46.png 48w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"500\">2. Add a Default Value: <em>selectedRptYear<\/em> and give it a value: <em>2015<\/em>.<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.2.png\" rel=\"lightbox-47\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11798 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.2.png\" alt=\"\" width=\"344\" height=\"759\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.2.png 344w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.2-68x150.png 68w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.2-11x24.png 11w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.2-16x36.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-1.2-22x48.png 22w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 2. Update Chart to use the Selected Option.<\/strong><\/p>\n<p class=\"intro-text\">In this step, we'll update the chart's <strong>Selected<\/strong> X Axis to set the variable parameter: <em>selectedRptYear<\/em>.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td width=\"2\">\u00a0<\/td>\n<td width=\"500\">Click the Chart component to open its property editor.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>1. Click <strong>X Axis<\/strong> to configure the X Axis details.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>2. For <strong>Selected<\/strong>, select <em>selectedRptYear<\/em> from the drop-down list.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td width=\"500\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-2.png\" rel=\"lightbox-48\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11796 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-2.png\" alt=\"\" width=\"348\" height=\"645\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-2.png 348w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-2-81x150.png 81w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-2-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-2-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-step-2-26x48.png 26w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Watch the video below to see the how, in preview mode, Text Label contents are updated each time a Chart's bar is clicked.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_1315972253\" class=\"video-js vjs-default-skin\" width=\"900\" height=\"341\" controls preload=\"none\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/ChartControlsTextLabel.mp4\" type='video\/mp4' \/>\r\n\t\t\r\n\t\t\r\n\t<\/video>\r\n\t<!-- End Video.js -->\r\n\n<h2 class=\"page-subheading\">Options for Configuring a Chart's Data<\/h2>\n<p class=\"intro-text\">There are four separate data categories that you can choose from, when configuring your chart's data.<\/p>\n<p class=\"intro-text\">Here is the full reference of data categories you can choose from (including the dataset category already covered in Tutorial 1).<\/p>\n<p class=\"left-bar\"><strong>Important Note: <\/strong>You can tab through the different data categories, to configure them. The one that is selected when you save the page remains the configured option. Any other configurations will be lost.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"750\"><strong>Select a Data Category<\/strong><\/td>\n<td width=\"500\">\u00a0<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\"><strong>Dataset<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9576 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Dataset-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/><\/p>\n<p>Configure your chart to use dataset (relational) data.<\/p>\n<p><strong>See how: <\/strong><a title=\"Using Dataset Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\">Using Dataset Data<\/a><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Dataset.png\" rel=\"lightbox-49\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11240 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Dataset.png\" alt=\"\" width=\"347\" height=\"214\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Dataset.png 347w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Dataset-150x93.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Dataset-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Dataset-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Dataset-48x30.png 48w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\"><strong>Attributes<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9574 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Attribute-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/><\/p>\n<p>Configure your chart to use time series data (attributes).<\/p>\n<p><strong>See how: <\/strong><a title=\"Using Attribute Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Attribute_Data\">Using Attribute Data<\/a><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Attributes.png\" rel=\"lightbox-50\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11238 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Attributes.png\" alt=\"\" width=\"347\" height=\"208\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Attributes.png 347w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Attributes-150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Attributes-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Attributes-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Attributes-48x29.png 48w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc;\">\n<td style=\"padding-left: 10px;\"><strong>Ad-hoc Calculations<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9575 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Ad-Hoc-Calc-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/><\/p>\n<p>Configure your chart to use ad-hoc calculations, using time series data (tags, calculations and attributes).<\/p>\n<p><strong>See how: <\/strong><a title=\"Using Ad hoc Calculation Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Ad_hoc_Calculation_Data\">Using Ad hoc Calculation Data<\/a><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Calcs.png\" rel=\"lightbox-51\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11242 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Calcs.png\" alt=\"\" width=\"348\" height=\"213\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Calcs.png 348w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Calcs-150x92.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Calcs-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Calcs-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Calcs-48x29.png 48w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\"><strong>Tags<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9573 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/tag-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/><\/p>\n<p>Configure your chart to use time series data (tags).<\/p>\n<p><strong>See how: <\/strong><a title=\"Using Tag Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Tag_Data\">Using Tag Data<\/a><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Tags.png\" rel=\"lightbox-52\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-11241 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Tags.png\" alt=\"\" width=\"344\" height=\"208\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Tags.png 344w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Tags-150x91.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Tags-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Tags-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Charts-Using-Tags-48x29.png 48w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>P2 Explorer charts work together with user controls to display source data interactively.<br \/>\nLearn about the different types of chart series, how to configure charts to use different types of data, and how to use variables for controlling charts in run-time.<br \/>\nThis article refers to versions 4.4.0.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/charts-4-4-0\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":8471,"parent":19050,"menu_order":54,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[15],"class_list":["post-11176","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-charts-2","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/11176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=11176"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/11176\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/19050"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/8471"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=11176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=11176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=11176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}