{"id":26769,"date":"2017-05-05T10:30:34","date_gmt":"2017-05-05T02:30:34","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=26769"},"modified":"2019-08-27T10:55:53","modified_gmt":"2019-08-27T02:55:53","slug":"charts-4-4-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/charts-4-4-2\/","title":{"rendered":"Charts (4.4.2)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.4.2-4.4.5 of P2 Explorer. For help on the latest version, see <a 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=\"overview\">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<p class=\"left-bar-p2blue\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/charts\/\">Using the Chart<\/a>\u00a0in display mode, Adding a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/styles\/#Chart\">Chart style<\/a>.<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Background 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 style=\"width: 300px;\">\u00a0<\/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<hr \/>\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\/08\/Configuring-a-chart.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19056 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Configuring-a-chart.png\" width=\"768\" height=\"767\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Configuring-a-chart.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Configuring-a-chart-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Configuring-a-chart-252x252.png 252w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Configuring-a-chart-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Configuring-a-chart-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Configuring-a-chart-48x48.png 48w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><\/p>\n<hr \/>\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\/08\/Chart-Data-Types.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19057 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Data-Types.png\" width=\"340\" height=\"169\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Data-Types.png 340w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Data-Types-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Data-Types-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Data-Types-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Data-Types-48x24.png 48w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/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;\">\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-18892 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Attribute-Icon.png\" width=\"20\" height=\"19\" \/><\/p>\n<p>Configure your chart to use time series data (attributes).<\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px 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<hr \/>\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=\"#Series\">Series<\/a>: Explorer charts plot data as a series.<\/li>\n<li><a title=\"Axes\" href=\"#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=\"#Other\">Other<\/a>: This includes optional configurations for the chart's general appearance, such as orientation, style and position.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-appearance.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19059 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-appearance.png\" width=\"349\" height=\"781\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-appearance.png 349w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-appearance-67x150.png 67w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-appearance-11x24.png 11w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-appearance-16x36.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-appearance-21x48.png 21w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/a><\/p>\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. If you need to change the order of a series, use the up\/down arrow keys next to a series. The different series are layered on the chart according to list order, with top of the list in the background, or for a series of bars, left to right in order of the list. So, for example, it's a good idea to keep a line series at the bottom of the list (in the foreground) if there is a bar series as well (keep this in the background).<\/p>\n<\/div>\n<table>\n<tbody>\n<tr style=\"border: 1px 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, dot, 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;\">\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;\">\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;\">\n<td width=\"300\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Series.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19061 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Series.png\" width=\"365\" height=\"185\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Series.png 365w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Series-150x76.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Series-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Series-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Chart-Series-48x24.png 48w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/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>swap series order<\/em>, click the up\/down arrow next to a series.<\/td>\n<\/tr>\n<tr>\n<td><strong>3. <\/strong>To <em>remove<\/em> a series, click <strong>Remove<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong>4. <\/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 style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 10px; width: 50%;\">\n<table>\n<tbody>\n<tr>\n<td style=\"padding-left: 10px; width: 50%;\"><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\/08\/Series-details.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19063 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Series-details.png\" width=\"370\" height=\"661\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Series-details.png 370w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Series-details-84x150.png 84w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Series-details-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Series-details-20x36.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Series-details-27x48.png 27w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/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;\">\n<td style=\"padding-left: 10px;\" width=\"1200\">\n<table>\n<tbody>\n<tr>\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=\"#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\">\n<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>\n<\/td>\n<td width=\"400\">\n<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>\n<\/td>\n<td width=\"400\">\n<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>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<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>\n<\/td>\n<td>\n<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>\n<\/td>\n<td>\n<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>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">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.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"400\">\n<div id=\"attachment_19081\" style=\"width: 290px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-All.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-19081\" class=\"wp-image-19081\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-All.png\" width=\"280\" height=\"161\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-All.png 463w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-All-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-All-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-All-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-All-48x28.png 48w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/a><p id=\"caption-attachment-19081\" class=\"wp-caption-text\">A) All lines appear on the chart.<\/p><\/div>\n<\/td>\n<td width=\"400\">\n<div id=\"attachment_19082\" style=\"width: 290px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Left-Axis.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-19082\" class=\"wp-image-19082\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Left-Axis.png\" width=\"280\" height=\"163\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Left-Axis.png 461w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Left-Axis-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Left-Axis-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Left-Axis-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Left-Axis-48x28.png 48w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/a><p id=\"caption-attachment-19082\" class=\"wp-caption-text\">B) When the user clicks or hovers on the Right Y axis, only the left-axis and the line series using this axis are displayed.<\/p><\/div>\n<\/td>\n<td width=\"400\">\n<div id=\"attachment_19083\" style=\"width: 290px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Right-Y-Axis.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-19083\" class=\"wp-image-19083\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Right-Y-Axis.png\" width=\"280\" height=\"179\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Right-Y-Axis.png 420w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Right-Y-Axis-150x96.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Right-Y-Axis-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Right-Y-Axis-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Show-Right-Y-Axis-48x31.png 48w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/a><p id=\"caption-attachment-19083\" class=\"wp-caption-text\">C) When the user clicks or hovers on the Right Y axis, only the right axis and the line series using this axis are displayed.<\/p><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">The chart in the screenshots below demonstrate how the order of the different series affects the chart appearance.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"400\">\n<div id=\"attachment_19074\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Line-Series-in-Background.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-19074\" class=\"wp-image-19074\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Line-Series-in-Background.png\" width=\"250\" height=\"177\" \/><\/a><p id=\"caption-attachment-19074\" class=\"wp-caption-text\">The line series appears behind the bar series, because it is listed first in the component editor.<\/p><\/div>\n<\/td>\n<td width=\"400\">\n<div id=\"attachment_19075\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Line-Series-in-Foreground.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-19075\" class=\"wp-image-19075\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Line-Series-in-Foreground.png\" width=\"250\" height=\"178\" \/><\/a><p id=\"caption-attachment-19075\" class=\"wp-caption-text\">The bar series appears behind the line series, because it is listed first in the component editor.<\/p><\/div>\n<\/td>\n<td width=\"400\">\n<div id=\"attachment_19078\" style=\"width: 260px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Larger-then-Smaller.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-19078\" class=\"wp-image-19078\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Larger-then-Smaller.png\" width=\"250\" height=\"178\" \/><\/a><p id=\"caption-attachment-19078\" class=\"wp-caption-text\">The 'Budget' bar series appears before the 'Spent' bar series, because it is listed first in the component editor.<\/p><\/div>\n<\/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<p class=\"intro-text\">\u00a0<\/p>\n<h3>Axes<\/h3>\n<p class=\"intro-text\">The chart has an X Axis, as well as a Y Axis (left and\/or right).<\/p>\n<h4>X Axis<\/h4>\n<p class=\"intro-text\">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>.<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<table>\n<tbody>\n<tr>\n<td>\n<table>\n<tbody>\n<tr>\n<td width=\"170\"><strong>Column:<\/strong><\/td>\n<td width=\"570\">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>Enable Gridlines:<\/strong><\/td>\n<td>Enable or disable vertical gridlines.<\/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 - Part 3\" href=\"#Part_3_Bar_Chart_Selection_used_by_a_Data_Label\">Tutorial - Part 3<\/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\/08\/X-Axis.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19086 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/X-Axis.png\" width=\"341\" height=\"353\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/X-Axis.png 341w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/X-Axis-145x150.png 145w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/X-Axis-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/X-Axis-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/X-Axis-46x48.png 46w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/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>\n<h4>Left Y Axis and Right Y Axis<\/h4>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>\n<p class=\"intro-text\">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 class=\"intro-text\">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 class=\"intro-text\">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 horizontal gridlines. Note that if you have this enabled on either the left or the right Y axis (and that axis is used by one or more series), the gridlines are visible.<\/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-25\"><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<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-26\"><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-27\"><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-28\"><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 class=\"page-subheading\">Tutorial<\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article Building an Explorer Page.<\/p>\n<p class=\"intro-text\">This is a 3-part tutorial. In Part 1, we'll add and configure a chart. In Part 2, we'll add a Combo Box to control one of the chart's dataset parameters. In Part 3 we'll use the chart's <em>Selected<\/em> property to update a variable used by a Data Label.<\/p>\n<p class=\"left-bar\">Refer to the <strong>Charts Tutorial <\/strong>page in the <em>Tutorials<\/em> workspace, if you have access to this.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Tutorial-Preview-1.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20994 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Tutorial-Preview-1.png\" width=\"1372\" height=\"843\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Tutorial-Preview-1.png 1372w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Tutorial-Preview-1-768x472.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Tutorial-Preview-1-150x92.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Tutorial-Preview-1-1280x786.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Tutorial-Preview-1-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Tutorial-Preview-1-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Tutorial-Preview-1-48x29.png 48w\" sizes=\"auto, (max-width: 1372px) 100vw, 1372px\" \/><\/a><\/p>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the <em>SampleData <\/em>table and queries that can be optionally made available during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n<h3>Part 1: Bar Chart<\/h3>\n<p class=\"intro-text\">In this part, we're going to drop a chart onto a page, then configure it show a Bar Series showing dataset data (oil). Then we'll add another Bar Series (to show gas), and give the chart a legend and a label.<\/p>\n<p class=\"intro-text\">There are six steps:<\/p>\n<ul class=\"intro-text\">\n<li>Step 1. Prepare the new tutorial page in Grid Layout, and configure the layout.<\/li>\n<li>Step 2. Add a chart and configure its data.<\/li>\n<li>Step 3. Configure a bar series, showing oil production.<\/li>\n<li>Step 4. Give the chart an X Axis.<\/li>\n<li>Step 5. Add another bar series, showing gas production.<\/li>\n<li>Step 6. Give the chart a legend and labels.<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-in-preview.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21002 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-in-preview.png\" width=\"649\" height=\"366\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-in-preview.png 649w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-in-preview-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-in-preview-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-in-preview-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-in-preview-48x27.png 48w\" sizes=\"auto, (max-width: 649px) 100vw, 649px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Step 1. Prepare the Tutorial Page<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21000 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/grid-layout-component.png\" width=\"88\" height=\"85\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/grid-layout-component.png 88w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/grid-layout-component-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/grid-layout-component-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/grid-layout-component-48x46.png 48w\" sizes=\"auto, (max-width: 88px) 100vw, 88px\" \/><\/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 Grid Layout page in Studio<\/a>. Save it to your workspace (<em>My Workspace<\/em>), giving it a suitable name, such as <strong>Charts Tutorial<\/strong>.<\/p>\n<p class=\"intro-text\">1. Configure the grid layout to have one column and two rows. Allocate a <strong>Column Spacing<\/strong> and <strong>Row Spacing<\/strong> of <strong>30<\/strong>, each. Resize the first row to <strong>20*<\/strong> and the second to <strong>80*<\/strong>.<\/p>\n<p class=\"intro-text\">2. Drop a second <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a> onto the top row of the base grid layout. Give this grid layout one column and two rows.<\/p>\n<p class=\"intro-text\">This is how the page should look at this stage:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Layout.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20980\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Layout.png\" width=\"600\" height=\"369\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Layout.png 1363w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Layout-768x473.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Layout-150x92.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Layout-1280x788.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Layout-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Layout-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Layout-48x30.png 48w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Step 2. Add a chart and configure its data.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21013 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/charts-button.png\" width=\"93\" height=\"88\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/charts-button.png 93w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/charts-button-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/charts-button-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/charts-button-48x45.png 48w\" sizes=\"auto, (max-width: 93px) 100vw, 93px\" \/><\/p>\n<p class=\"intro-text\">1. Drag and drop a Chart component onto the second row of the base grid layout, as shown. The Chart is in the Chart <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/chartsicon_sm.png\" rel=\"lightbox-32\"><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> group.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-chart-2.png\" rel=\"lightbox-33\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21017 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-chart-2.png\" width=\"485\" height=\"311\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-chart-2.png 485w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-chart-2-150x96.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-chart-2-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-chart-2-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-chart-2-48x31.png 48w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Click the Chart component to configure it.<\/p>\n<p class=\"intro-text\">3. Add a dataset query to the Chart's data, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\">Data Selector for Dataset Queries<\/a>.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Dataset Query: <\/strong>Select the <strong>ProductionDataByLevel<\/strong> dataset query from the <em>Oil and Gas Data<\/em> datasource.<\/li>\n<li><strong>Dataset Parameters:<\/strong>\n<ul class=\"intro-text\">\n<li><strong>endDate: <\/strong>Select <em>endTime<\/em> from the parameter drop-down list (variables). This uses the Page Default variable for <em>endTime<\/em>.<\/li>\n<li><strong>level: <\/strong>Type <em>Region<\/em> in the text box (text constant).<\/li>\n<li><strong>startDate: <\/strong>Select <em>startTime<\/em> from the <em>startDate<\/em> parameter drop-down list (variables). This uses the Page Default variable for <em>startTime<\/em>.<\/li>\n<\/ul>\n<\/li>\n<li>Click <strong>Preview <\/strong>to view the data that will be used for the chart.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Data-1.png\" rel=\"lightbox-34\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21021 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Data-1.png\" width=\"337\" height=\"418\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Data-1.png 337w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Data-1-121x150.png 121w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Data-1-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Data-1-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Charts-Data-1-39x48.png 39w\" sizes=\"auto, (max-width: 337px) 100vw, 337px\" \/><\/a><\/p>\n<p><span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Dataset-preview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21102 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Dataset-preview.png\" width=\"707\" height=\"255\" \/><\/span><\/p>\n<p class=\"no-toc-heading\">Step 3. Configure a bar series to show oil production<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/part-1-step-3.png\" rel=\"lightbox-35\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21007 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/part-1-step-3.png\" width=\"653\" height=\"365\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/part-1-step-3.png 653w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/part-1-step-3-150x84.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/part-1-step-3-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/part-1-step-3-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/part-1-step-3-48x27.png 48w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><\/a><\/p>\n<p class=\"intro-text\">1. Click the Lines Series (in the <em>Series Section<\/em>) to configure a bar series (in the screenshot below, this already shows <em>Bar Series<\/em>).<\/p>\n<p class=\"intro-text\">2. In the <strong>Type<\/strong> drop-down list, select <em>Bar Series<\/em>.<\/p>\n<p class=\"intro-text\">3. For the <strong>Y Column<\/strong>, select <em>DataColumn<\/em> from the first drop-down list, and <em>OilActualSum<\/em> from the second.<\/p>\n<p class=\"intro-text\">4. In the <strong>Colour Matcher<\/strong> text box, type <em>OIL<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Bar-Series.png\" rel=\"lightbox-36\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21029\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Bar-Series.png\" width=\"300\" height=\"603\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Bar-Series.png 350w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Bar-Series-75x150.png 75w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Bar-Series-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Bar-Series-18x36.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Bar-Series-24x48.png 24w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Step 4. Give the chart an X Axis<\/p>\n<p class=\"intro-text\">1. Click <strong>X Axis<\/strong> to open the X Axis configuration.<\/p>\n<p class=\"intro-text\">2. For the <strong>Column<\/strong>, select <em>DataColumn<\/em> from the first drop-down list, and <em>Asset<\/em> from the second.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-for-Chart.png\" rel=\"lightbox-37\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21119 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-for-Chart.png\" width=\"336\" height=\"346\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-for-Chart.png 336w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-for-Chart-146x150.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-for-Chart-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-for-Chart-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-for-Chart-48x48.png 48w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Step 5. Add another bar series, showing gas production<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-4.png\" rel=\"lightbox-38\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21008 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-4.png\" width=\"640\" height=\"361\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-4.png 640w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-4-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-4-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-4-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-4-48x27.png 48w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p class=\"intro-text\">1. Click <strong>Add<\/strong> (in the <em>Series Section<\/em>) to add a new series.<\/p>\n<p class=\"intro-text\">2. In the <strong>Type<\/strong> drop-down list, select <em>Bar Series<\/em>.<\/p>\n<p class=\"intro-text\">3. For the <strong>Y Column<\/strong>, select <em>DataColumn<\/em> from the first drop-down list, and <em>GasActualSum<\/em> from the second.<\/p>\n<p class=\"intro-text\">4. In the <strong>Colour Matcher<\/strong> text box, type <em>GAS<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Second-Bar-Series.png\" rel=\"lightbox-39\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21035\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Second-Bar-Series.png\" width=\"300\" height=\"625\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Second-Bar-Series.png 358w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Second-Bar-Series-72x150.png 72w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Second-Bar-Series-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Second-Bar-Series-17x36.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Second-Bar-Series-23x48.png 23w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Step 6. Give the chart a Legend, Labels, and Tooltips<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-5.png\" rel=\"lightbox-40\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21009 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-5.png\" width=\"638\" height=\"357\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-5.png 638w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-5-150x84.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-5-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-5-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Part-1-step-5-48x27.png 48w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/a><\/p>\n<p class=\"intro-text\">1. <strong><em>To add a Legend to your chart:<\/em><\/strong><\/p>\n<p class=\"intro-text\">a. Click the first Bar Series, to open the <em>OilActualSum<\/em> bar series, and type <em>OIL<\/em> in the <strong>Name<\/strong> text box.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Oil-Legend-1.png\" rel=\"lightbox-41\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21048 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Oil-Legend-1.png\" width=\"349\" height=\"361\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Oil-Legend-1.png 349w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Oil-Legend-1-145x150.png 145w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Oil-Legend-1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Oil-Legend-1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Oil-Legend-1-46x48.png 46w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/a><\/p>\n<p class=\"intro-text\">b. Click the second Bar Series, to open the <em>GasActualSum<\/em> bar series, and type <em>GAS<\/em> in the <strong>Name<\/strong> text box.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Gas-Legend-1.png\" rel=\"lightbox-42\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21047 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Gas-Legend-1.png\" width=\"331\" height=\"274\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Gas-Legend-1.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Gas-Legend-1-150x124.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Gas-Legend-1-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Gas-Legend-1-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Gas-Legend-1-48x40.png 48w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/p>\n<p class=\"intro-text\">c. Select the <strong>Legend<\/strong> checkbox in the <em>Other<\/em> section.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-Legends-1.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21049 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-Legends-1.png\" width=\"335\" height=\"242\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-Legends-1.png 335w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-Legends-1-150x108.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-Legends-1-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-Legends-1-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-Legends-1-48x35.png 48w\" sizes=\"auto, (max-width: 335px) 100vw, 335px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. <strong><em>To add Labels to your chart:<\/em><\/strong><\/p>\n<p class=\"intro-text\">a. Click <strong>X Axis<\/strong> to open the X Axis configuration, then type <em>Assets<\/em> in the <strong>Label<\/strong> text box.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-Label.png\" rel=\"lightbox-44\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21045 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-Label.png\" width=\"346\" height=\"343\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-Label.png 346w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-Label-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-Label-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-Label-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/X-Axis-Label-48x48.png 48w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/a><\/p>\n<p class=\"intro-text\">b. Click <strong>Left Y Axis<\/strong> to open the X Axis configuration, then type <em>Production<\/em> in the <strong>Label<\/strong> text box.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Left-Y-Axis-Label.png\" rel=\"lightbox-45\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21041 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Left-Y-Axis-Label.png\" width=\"336\" height=\"424\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Left-Y-Axis-Label.png 336w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Left-Y-Axis-Label-119x150.png 119w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Left-Y-Axis-Label-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Left-Y-Axis-Label-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Left-Y-Axis-Label-38x48.png 38w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. <strong><em>To add Tooltips to your chart:<\/em><\/strong> Select the <strong>Tooltip<\/strong> checkbox in the <em>Other<\/em> section.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-tooltip.png\" rel=\"lightbox-46\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21050 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-tooltip.png\" width=\"334\" height=\"235\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-tooltip.png 334w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-tooltip-150x106.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-tooltip-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-tooltip-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Other-tooltip-48x34.png 48w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Try out the Chart<\/p>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-47\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li class=\"intro-text\">Hover over the chart to see the tooltips.<\/li>\n<li class=\"intro-text\">Note the label alongside the Y Axis, and the one below the X Axis.<\/li>\n<li class=\"intro-text\">Note the legend for the two series, <em>Oil<\/em> and <em>GAS<\/em>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-preview.png\" rel=\"lightbox-48\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21055 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-preview.png\" width=\"645\" height=\"477\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-preview.png 645w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-preview-150x111.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-preview-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-preview-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-preview-48x35.png 48w\" sizes=\"auto, (max-width: 645px) 100vw, 645px\" \/><\/a><\/p>\n<h3>Part 2: Bar Chart Driven by Combo Box<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21060 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Combo-Box.png\" width=\"92\" height=\"93\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Combo-Box.png 92w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Combo-Box-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Combo-Box-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Combo-Box-48x48.png 48w\" sizes=\"auto, (max-width: 92px) 100vw, 92px\" \/><\/p>\n<p class=\"intro-text\">This part of the tutorial demonstrates how we can change the chart's data by using a variable for one of the dataset parameters.<\/p>\n<p class=\"intro-text\">We're going to use a Combo Box component to control the <em>level<\/em> parameter for the chart's dataset query.<\/p>\n<p class=\"left-bar\">Related: <a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a>, <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a>.<\/p>\n<p class=\"intro-text\">1. Drag and drop a Combo Box component onto the top grid cell of the page, as shown. The Combo Box is in the Control <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1840 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/controls_sm.png\" alt=\"Controls\" width=\"18\" height=\"16\" \/> group.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-combo-box-1.png\" rel=\"lightbox-49\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21065 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-combo-box-1.png\" width=\"472\" height=\"319\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-combo-box-1.png 472w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-combo-box-1-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-combo-box-1-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-combo-box-1-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-combo-box-1-48x32.png 48w\" sizes=\"auto, (max-width: 472px) 100vw, 472px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Click the Combo Box to configure it.<\/p>\n<p class=\"intro-text\">3. Add three values for the <strong>Option Values<\/strong>: <em>Region, Location<\/em> and <em>Area<\/em>. These are all valid values for the <em>level<\/em> parameter in the chart's dataset query, <em>ProductionDataByLevel<\/em>.<\/p>\n<p class=\"intro-text\">4. Type <em>selectedLevel<\/em> in the <strong>Selected Option<\/strong> drop-down list.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Combo-Box.png\" rel=\"lightbox-50\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21063 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Combo-Box.png\" width=\"380\" height=\"256\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Combo-Box.png 380w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Combo-Box-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Combo-Box-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Combo-Box-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Combo-Box-48x32.png 48w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/a><\/p>\n<p class=\"intro-text\">5. Add a Default Value of <em>Region<\/em> for <em>selectedLevel<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-a-default.png\" rel=\"lightbox-51\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21068 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-a-default.png\" width=\"349\" height=\"655\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-a-default.png 349w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-a-default-80x150.png 80w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-a-default-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-a-default-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Add-a-default-26x48.png 26w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/a><\/p>\n<p class=\"intro-text\">6. Now update the chart to use <em>selectedLevel<\/em> as its <em>level<\/em> dataset parameter variable.<\/p>\n<p class=\"intro-text\">a. Click the <strong>Data<\/strong> drop-down list to open it.<\/p>\n<p class=\"intro-text\">b. For the <em>level<\/em> dataset parameter, click the variable <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11126 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/variable-button-1.png\" alt=\"\" width=\"35\" height=\"29\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/variable-button-1.png 35w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/variable-button-1-24x20.png 24w\" sizes=\"auto, (max-width: 35px) 100vw, 35px\" \/> icon, and then select <em>selectedLevel<\/em> from the drop-down list.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-dataset-parameter-1.png\" rel=\"lightbox-52\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21108 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-dataset-parameter-1.png\" width=\"322\" height=\"420\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-dataset-parameter-1.png 322w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-dataset-parameter-1-115x150.png 115w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-dataset-parameter-1-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-dataset-parameter-1-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Chart-dataset-parameter-1-37x48.png 37w\" sizes=\"auto, (max-width: 322px) 100vw, 322px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Try out the Chart with Combo Box<\/p>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-47\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li class=\"intro-text\">Select <em>Location<\/em> from the combo box, and see how locations are displayed along the X Axis.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Preview-2.png\" rel=\"lightbox-54\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21071\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Preview-2.png\" width=\"900\" height=\"556\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Preview-2.png 1367w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Preview-2-768x475.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Preview-2-150x93.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Preview-2-1280x791.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Preview-2-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Preview-2-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Preview-2-48x30.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<h3>Part 3: Bar Chart Selection used by a Data Label<\/h3>\n<p class=\"left-bar\">Related: <a title=\"Data Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a><\/p>\n<p class=\"intro-text\">This part of the tutorial demonstrates how we can select a bar in the chart, and use it to change a variable. We'll use this variable in a Data Label.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21073 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Data-Label-Icon.png\" width=\"88\" height=\"89\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Data-Label-Icon.png 88w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Data-Label-Icon-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Data-Label-Icon-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Data-Label-Icon-48x48.png 48w\" sizes=\"auto, (max-width: 88px) 100vw, 88px\" \/><\/p>\n<p class=\"intro-text\">1. Drag and drop a Data Label component onto the grid cell just above the chart, as shown. The Data Label is in the Display <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1844 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/> group.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-data-label.png\" rel=\"lightbox-55\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21074 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-data-label.png\" width=\"591\" height=\"381\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-data-label.png 591w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-data-label-150x97.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-data-label-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-data-label-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-data-label-48x31.png 48w\" sizes=\"auto, (max-width: 591px) 100vw, 591px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Click on the Data Label to configure it.<\/p>\n<p class=\"intro-text\">3. For the <strong>Value<\/strong> property, assign <a title=\"Using Value Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Value_Data\"><em>value<\/em><\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9572 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Value-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/> data, choosing the <em>variable<\/em> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11126 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/variable-button-1.png\" alt=\"\" width=\"35\" height=\"29\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/variable-button-1.png 35w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/variable-button-1-24x20.png 24w\" sizes=\"auto, (max-width: 35px) 100vw, 35px\" \/> option. Name the new variable <em>selectedAsset<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-dataset-1.png\" rel=\"lightbox-56\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21086 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-dataset-1.png\" width=\"359\" height=\"211\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-dataset-1.png 359w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-dataset-1-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-dataset-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-dataset-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-dataset-1-48x28.png 48w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/a><\/p>\n<p class=\"intro-text\">4. Click on the chart to configure it.<\/p>\n<p class=\"intro-text\">5. Click <strong>X Axis<\/strong> to open the X Axis configuration, then select <em>selectedAsset<\/em> from the <strong>Selected<\/strong> drop-down list.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-X-Axis.png\" rel=\"lightbox-57\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-21089 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-X-Axis.png\" width=\"356\" height=\"446\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-X-Axis.png 356w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-X-Axis-120x150.png 120w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-X-Axis-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-X-Axis-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-X-Axis-38x48.png 38w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Try out the Chart with Data Label<\/p>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-47\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li class=\"intro-text\">Select <em>Location<\/em> from the Combo Box.<\/li>\n<li class=\"intro-text\">Click on a <em>Location<\/em> on the chart, for example <em>Junction Hill<\/em> and see how this appears in the Data Label.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Location-2.png\" rel=\"lightbox-59\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21096\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Location-2.png\" width=\"900\" height=\"555\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Location-2.png 1359w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Location-2-768x474.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Location-2-150x92.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Location-2-1280x789.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Location-2-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Location-2-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Location-2-48x30.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<hr \/>\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-60\"><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-18892 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Attribute-Icon.png\" width=\"20\" height=\"19\" \/><\/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\/08\/Attribute-Chart-Data.png\" rel=\"lightbox-61\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19148 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Attribute-Chart-Data.png\" width=\"347\" height=\"179\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Attribute-Chart-Data.png 347w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Attribute-Chart-Data-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Attribute-Chart-Data-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Attribute-Chart-Data-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Attribute-Chart-Data-48x25.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-62\"><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-63\"><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<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"intro-text\"><span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts-4-4-0\/\">Charts 4.4.0<\/span><\/li>\n<li class=\"intro-text\"><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><\/li>\n<\/ul>\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. This article refers to version 4.4.2.<\/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-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":8471,"parent":19050,"menu_order":52,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[15],"class_list":["post-26769","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-charts-2","Version-4-5-0","Version-4-5-1","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/26769","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=26769"}],"version-history":[{"count":1,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/26769\/revisions"}],"predecessor-version":[{"id":44479,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/26769\/revisions\/44479"}],"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=26769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=26769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=26769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}