{"id":19050,"date":"2018-10-18T10:22:33","date_gmt":"2018-10-18T02:22:33","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=19050"},"modified":"2024-10-09T12:54:34","modified_gmt":"2024-10-09T04:54:34","slug":"charts","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/","title":{"rendered":"Charts"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.6.2 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">IFS OI Explorer charts work together with user controls to display source data interactively. There are several types of charts available, including area chart, line chart, scatter chart, bar chart, and stacked bar chart.<\/p>\n<p class=\"intro-text\">You can also mix different chart types together in one chart, such as a line chart and bar chart, by configuring a chart with different <em>series.<\/em><\/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\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/\">All About Charts<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/charts\/viewing-charts\/\">Viewing Charts<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-charts\/\">Styling Charts<\/a><\/p>\n<p class=\"left-bar\">Background Reading: <a title=\"Explorer's Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/explorers-data\/\">Explorer's Data<\/a>, <a title=\"Variables\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">Variables<\/a>, <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Quick Start<\/h2>\n<p class=\"intro-text\">You can quickly configure a chart in just 3 easy steps: first choose the data, then configure the series and the X Axis.<\/p>\n<h3>Step 1. Chart Data<\/h3>\n<p class=\"intro-text\">Your chart must display some data, so this is your first step. Click the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a> to add data.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-data.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34847\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-data.png\" alt=\"\" width=\"316\" height=\"407\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-data.png 316w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-data-116x150.png 116w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-data-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-data-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-data-37x48.png 37w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/a><\/p>\n<p class=\"left-bar\">Read more: <a href=\"#Selecting_Source_Data\">Selecting Source Data<\/a><\/p>\n<p class=\"note\">Tip: Click the Preview button to make sure you are getting data. If no data appears, the chart will be blank.<\/p>\n<h3>Step 2. Series - Y Column<\/h3>\n<p class=\"intro-text\">The type of series will often be pre-configured depending on what you have added from the Component Toolbox. The important thing when configuring the series is to choose the values that you want to display on the <strong>Y Axis<\/strong> - this is called the Y Column and comes from the set of data you chose in the previous step.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-454-qs-series1.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-34974 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-454-qs-series1-e1519606327334.png\" alt=\"\" width=\"322\" height=\"188\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-454-qs-series1-e1519606327334.png 322w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-454-qs-series1-e1519606327334-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-454-qs-series1-e1519606327334-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-454-qs-series1-e1519606327334-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-454-qs-series1-e1519606327334-48x28.png 48w\" sizes=\"auto, (max-width: 322px) 100vw, 322px\" \/><\/a><\/p>\n<p class=\"left-bar\">Read more: <a href=\"#Common_Series_Properties\">Common Series Properties<\/a><\/p>\n<p class=\"note\">Tip: If you want to use different data in this series here, select the Use Series Data check box.<\/p>\n<h3>Step 3. X Axis<\/h3>\n<p class=\"intro-text\">The last step is to choose the values to plot along the X Axis - this comes from the set of data you chose in the first step.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-axis-x.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34850\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-axis-x.png\" alt=\"\" width=\"317\" height=\"140\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-axis-x.png 317w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-axis-x-150x66.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-axis-x-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-axis-x-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/chart-axis-x-48x21.png 48w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/a><\/p>\n<p class=\"left-bar\">Read more: <a href=\"#X_Axis\">X Axis<\/a><\/p>\n<h3>Step 4. More<\/h3>\n<p class=\"intro-text\">After you've done this initial quick configuration, you may want to configure more options to make your chart even more useful.<\/p>\n<p class=\"note\">Read the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-resources\/faq-configuring-charts\/\">Charts FAQ<\/a> for how to add a <strong>legend<\/strong>, <strong>label<\/strong>, and other tips.<\/p>\n<ul>\n<li class=\"intro-text\">Continue reading for more information on <a href=\"#Selecting_Source_Data\">selecting source data<\/a>, and configuring <a href=\"#Series\">series<\/a>, <a href=\"#Axes\">axes<\/a>, and <a href=\"#Other\">other<\/a> options.<\/li>\n<li class=\"intro-text\">Skip to the <strong><a href=\"#Tutorial_1_Simple_Chart\">tutorials<\/a> <\/strong>for detailed instructions on building various types of charts, including <a href=\"#Tutorial_2_Linked_Charts\">linked charts<\/a> and <a href=\"#Tutorial_3_Split_Series\">split series<\/a> charts.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Selecting Source Data<\/h2>\n<p class=\"intro-text\">Use the Data Selector to configure your chart to use data from a dataset, attribute, tags, or ad hoc calculation:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-data.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26866\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-data.png\" alt=\"\" width=\"327\" height=\"150\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-data.png 327w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-data-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-data-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-data-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-data-48x22.png 48w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/a><\/p>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a><\/p>\n<p class=\"intro-text\">The drop-down column fields for series and the axes are populated based on the columns that are returned with the chart data. If there is no data, then the drop-downs are unable to display the columns.<\/p>\n<p class=\"intro-text\">To check that the chart is returning data, open the data selector for Chart Data and click the <strong>preview<\/strong> button. These are the columns that should appear in the drop-down list. If no data is being shown in the preview table, then check your parameters are correct.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-dropdowns.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34665\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-dropdowns.png\" alt=\"\" width=\"965\" height=\"465\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-dropdowns.png 965w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-dropdowns-768x370.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-dropdowns-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-dropdowns-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-dropdowns-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-dropdowns-48x23.png 48w\" sizes=\"auto, (max-width: 965px) 100vw, 965px\" \/><\/a><\/p>\n<p class=\"note\"><strong>Note<\/strong>: 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<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Configuring Chart Appearance<\/h2>\n<p class=\"intro-text\">Once you have data for the chart, you can start configuring the chart's appearance:<\/p>\n<ul class=\"intro-text\">\n<li><strong><a title=\"Series\" href=\"#Series\">Series<\/a><\/strong>: The subset of data plotted in the chart. Some properties are specific to the type of series.<\/li>\n<li><strong><a title=\"Axes\" href=\"#Axes\">Axes<\/a><\/strong>: Configuration properties for the X Axis and Y Axis (left and\/or right).<\/li>\n<li><strong><a title=\"Other\" href=\"#Other\">Other<\/a><\/strong>: Additional options for the chart's general appearance, such as orientation. Some options are specific to the type of series.<\/li>\n<li><strong>Style<\/strong> and<strong> Position <\/strong>are common to all components. Choose a predefined style from the drop-down list, or specify the precise position of the chart.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-appearance.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37232\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-appearance.png\" alt=\"\" width=\"491\" height=\"836\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-appearance.png 491w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-appearance-88x150.png 88w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-appearance-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-appearance-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-appearance-28x48.png 28w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/a><\/p>\n<h3>Series<\/h3>\n<p class=\"intro-text\">The Chart is available in the component toolbox as several components preconfigured with the series they represent: Area Chart, Bar Chart, Line Chart, Scatter Chart, and Stacked Bar Chart. You can choose any one of these charts and add and remove series as needed.<\/p>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/chart-series\/\">Chart Series<\/a><\/p>\n<h4>Adding a Series<\/h4>\n<p class=\"intro-text\">Your chart needs at least one series. You can add or remove series from a chart, edit the series properties, and reorder the way they appear in the editor.<\/p>\n<p class=\"note\">Tip: If you have a chart with both a line series and a bar series, it's a good idea to keep the line series at the bottom of the list (in the foreground) and the bar series at the top (in the background).<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<ul class=\"intro-text\">\n<li>To add a series, click <strong>Add<\/strong>, and then expand the series properties to configure them.<\/li>\n<\/ul>\n<p><em><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-add-series.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34647\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-add-series.png\" alt=\"\" width=\"335\" height=\"236\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-add-series.png 335w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-add-series-150x106.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-add-series-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-add-series-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-add-series-48x34.png 48w\" sizes=\"auto, (max-width: 335px) 100vw, 335px\" \/><\/a><\/em><\/p>\n<\/td>\n<td>\n<ul class=\"intro-text\">\n<li>To <strong>edit<\/strong> a series, click the series to expand it, then edit the series properties:<\/li>\n<\/ul>\n<p><em><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-edit-series.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34650\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-edit-series.png\" alt=\"\" width=\"319\" height=\"146\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-edit-series.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-edit-series-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-edit-series-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-edit-series-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-edit-series-48x22.png 48w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/em><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<ul class=\"intro-text\">\n<li>To change the <strong>order<\/strong> of two or more series, click the up\/down arrow next to a series:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-reorder-series.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34648\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-reorder-series.png\" alt=\"\" width=\"319\" height=\"146\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-reorder-series.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-reorder-series-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-reorder-series-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-reorder-series-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-reorder-series-48x22.png 48w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<\/td>\n<td>\n<ul class=\"intro-text\">\n<li>To remove a series, click <strong>Remove<\/strong>:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-remove-series.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34649\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-remove-series.png\" alt=\"\" width=\"319\" height=\"146\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-remove-series.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-remove-series-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-remove-series-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-remove-series-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-remove-series-48x22.png 48w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Common Series Properties<\/h4>\n<div>\n<p class=\"intro-text\">The various chart series use a set of common properties, plus additional properties specific to the series type.<\/p>\n<\/div>\n<table>\n<tbody>\n<tr>\n<td>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 125px; padding-left: 5px;\"><strong>Type<\/strong><\/td>\n<td>Each series can be plotted to best suit your data. The default is <em>Line Series<\/em>.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Use Series Data<\/strong><\/td>\n<td>Selecting this allows you to use different data for this series, that is separate from the chart data. Two additional properties become available:<br \/>\n<em><strong>Series Data<\/strong><\/em>: Open the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a> to choose a different set of data. Click the Preview button to view the available columns.<br \/>\n<em><strong>X Column<\/strong><\/em>: Choose one of the columns from the Series Data, to plot its values along the X Axis.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-series-data.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34657\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-series-data.png\" alt=\"\" width=\"308\" height=\"108\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-series-data.png 308w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-series-data-150x53.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-series-data-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-series-data-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/chart-series-data-48x17.png 48w\" sizes=\"auto, (max-width: 308px) 100vw, 308px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Y Column<\/strong><\/td>\n<td>This is a mandatory selection, and is one of the columns from the chart's data (using a fixed or variable column name). The Y Column values are plotted along the Y Axis.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Label Option<\/strong><\/td>\n<td>This is used to identify the series in the legend and hairline. From the drop-down list, choose where the label is to come from:<br \/>\n<em><strong>Y Column<\/strong><\/em>: Displays the name you have selected from the Y Column drop-down list. Do not use this for <a href=\"#Tutorial_3_Split_Series\">split series<\/a>.<br \/>\n<em><strong>Name<\/strong><\/em>: Show a name that is different to the series name from the Y Column.<br \/>\n<em><strong>Both<\/strong><\/em>: Add a custom prefix to the Y Column name. Use the <em>Name<\/em> property to define the prefix.<br \/>\n<em>Read more<\/em>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-resources\/faq-configuring-charts\/#How_do_I_add_a_legend\">How do I add a legend?<\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Name<\/strong><\/td>\n<td>A custom name that identifies the series in the legend and hairline.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Name Column<\/strong><\/td>\n<td>This is used to split a series into separate, smaller sub-series, according to the specified column. For example, a line series that uses a column value (such as Entity) as its name will show a separate line for each different name in the data. This affects both the legend and hairline.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Y Axis<\/strong><\/td>\n<td>Choose Left or Right for the <em>Y Axis<\/em>. 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.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Filter Column and Filter Value<\/strong><\/td>\n<td>Use <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/filter-column-and-filter-value\/\"><strong>Filter Column<\/strong> and <strong>Filter Value<\/strong><\/a> together to filter down the data displayed for a series. This is useful if the <em>Y Column<\/em> values come from a field that stores values apart from the ones you want for this series. With Filter Column and Filter Value you will also need to specify a <em>Name<\/em>.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Colour<\/strong><\/td>\n<td>Specify the colour of the series, using the colour picker.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37234\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-series-props.png\" alt=\"\" width=\"412\" height=\"528\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-series-props.png 412w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-series-props-117x150.png 117w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-series-props-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-series-props-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-series-props-37x48.png 37w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Specific Series Properties<\/h4>\n<p class=\"intro-text\">The different series types have specific properties listed after the general properties.<\/p>\n<h5>Line Series<\/h5>\n<p class=\"intro-text\">The Line series plots your data in a single line. The specific options are:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Interpolation<\/strong><\/td>\n<td>Determines how the curves are drawn between points in the line series. The options are:<br \/>\n<em><strong>Linear<\/strong><\/em>: Connects the data points using a straight line. This is the default.<br \/>\n<em><strong>Curve<\/strong><\/em>: Connects the data points using a cubic Cardinal spline with a tension of 0, and control point duplication on the ends.<br \/>\n<em><strong>Step Before<\/strong><\/em>: Connects the data points using alternating horizontal and vertical lines. The y-value changes <em>before<\/em> the x-value.<br \/>\n<em><strong>Step After<\/strong><\/em>: Connects the data points using alternating horizontal and vertical lines. The y-value changes <em>after<\/em> the x-value.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Thickness<\/strong><\/td>\n<td>Determines the line thickness.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h5>Bar Series<\/h5>\n<p class=\"intro-text\">The Bar series has rectangular bars (shown horizontally or vertically), where the length of each bar is proportional to its value. The specific options are:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 125px;\"><strong>Bar Size<\/strong><\/td>\n<td>A number that specifies the width of the bars, in pixels. E.g. 10, 20, 40 or 80. The default bar size is 80px. 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 the available width for the chart.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h5>Area Series<\/h5>\n<p class=\"intro-text\">The Area series is a line series with the area below the line filled in with a colour. The specific options are:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Interpolation<\/strong><\/td>\n<td>Determines how the curves are drawn between points in the line series. The options are:<br \/>\n<em><strong>Linear<\/strong><\/em>: Connects the data points using a straight line. This is the default.<br \/>\n<em><strong>Curve<\/strong><\/em>: Connects the data points using a cubic Cardinal spline with a tension of 0, and control point duplication on the ends.<br \/>\n<em><strong>Step Before<\/strong><\/em>: Connects the data points using alternating horizontal and vertical lines. The y-value changes <em>before<\/em> the x-value.<br \/>\n<em><strong>Step After<\/strong><\/em>: Connects the data points using alternating horizontal and vertical lines. The y-value changes <em>after<\/em> the x-value.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h5>Dot Series<\/h5>\n<p class=\"intro-text\">The dot series displays each point as a dot. The specific options are:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 125px;\"><strong>Highlight Colour<\/strong><\/td>\n<td>The colour that you want to use when highlighting data points. <strong>Tip<\/strong>: Use the <em>opacity<\/em> setting if you want the highlight to appear as a \u201chalo\u201d around the data point.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Highlight Column<\/strong><\/td>\n<td>The column that is used when determining whether to highlight a data point in the chart. This is typically a timestamp, or other date\/time column. Highlighting can be used to draw attention to data points within a specified time range. For example, you can highlight the more recent data points based on a time variable on the page (e.g. if you\u2019re showing 1 week of data, you could have a selectionStart variable set to 1 day ago).<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Highlight Start<\/strong><\/td>\n<td>The variable that indicates the start of the highlighted range. By default, this is <em>selectionStart<\/em>. We recommend not changing this default. If you do, you will also need to change this in other components that also use this variable.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Highlight End<\/strong><\/td>\n<td>The variable that indicates the end of the highlighted range. By default, this is <em>selectionEnd<\/em>. We recommend not changing this default. If you do, you will also need to change this in other components that also use this variable.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Last Point Colour<\/strong><\/td>\n<td>The last point in the highlighted selection is represented as a coloured diamond. Specify the colour for the diamond, using the colour picker.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Radius<\/strong><\/td>\n<td>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). The default is 2.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\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 principal 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>. The settings for the X axis may change depending on if the chart is <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/discrete-versus-continuous-charts\/\">discrete or continuous<\/a>.<\/p>\n<h5 class=\"intro-text\">Common Settings<\/h5>\n<table>\n<tbody>\n<tr>\n<td>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 100px;\"><strong>Column<\/strong><\/td>\n<td>The column (fixed or variable) from the source data that contains the values to display along the X axis. The drop-down is populated based on the columns that are returned with the chart data. If there is no data, then the drop-down is unable to display the columns. To check that the chart is returning data, open the data selector for Chart Data and click the preview button. These are the columns that should appear in the drop-down list. If no data is being shown in the preview table, then check your parameters are correct.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Data Type<\/strong><\/td>\n<td>The data type of the X Axis determines if the chart is <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/discrete-versus-continuous-charts\/\">discrete or continuous<\/a>, and therefore the level of interactivity available to the user. The data type should be compatible with the <em>Column<\/em>. If <em>Column <\/em>can be represented as a number, you can select <em>Number<\/em> or <em>Time<\/em> from the drop-down. If this is still not compatible with some of the series, you will get a warning message. The default is <em>Time. <\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Visibility<\/strong><\/td>\n<td>Show or hide values or gridlines along the x axis. The options are:<br \/>\n<em><strong>Both<\/strong><\/em>: Display both values and gridlines along the x axis.<br \/>\n<em><strong>Ticks<\/strong><\/em>: Display the values along the x axis but do not display the gridlines.<br \/>\n<em><strong>Gridlines<\/strong><\/em>: Display gridlines along the x axis (i.e. vertical lines) but do not display the values.<br \/>\n<em><strong>None<\/strong><\/em>: Do not display values or gridlines along the x axis.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Label<\/strong><\/td>\n<td>The label for the X axis. This can be a simple text label or it can be driven by a variable.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Selected<\/strong><\/td>\n<td>Select a variable here if you want to use the selected value on the X Axis as a variable in a text label or other control, or as a variable parameter to other dataset queries. In display mode, users can click a value on the X Axis to select it. (See <a title=\"Tutorial - Part 3\" href=\"#Part_4_Bar_Chart_Selection\">Tutorial 1 - Part 4<\/a>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-string.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37235\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-string.png\" alt=\"\" width=\"329\" height=\"286\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-string.png 329w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-string-150x130.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-string-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-string-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-string-48x42.png 48w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5 class=\"intro-text\">Discrete Charts<\/h5>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 100px;\"><strong>Values<\/strong><\/td>\n<td>Add one or more values to the existing values on the X Axis 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 style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Link Action<\/strong><\/td>\n<td>The Link Action section appears when the X Axis has a data type of <em>string<\/em> (discrete charts). This allows you to assign links on the X axis values, to allow users to open related information. For examples and further information, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Link Action, Variables, and Variable Mapping<\/a> and <a href=\"#Part_2_X_Axis_Links_on_Bar_Chart\">Tutorial 1 - Part 2<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5 class=\"intro-text\">Continuous Charts<\/h5>\n<table>\n<tbody>\n<tr>\n<td>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 100px;\"><strong>Min<\/strong><\/td>\n<td>The minimum value to be displayed along the x axis. The value cannot go below the minimum, so only set this if you know what the minimum value should be, or if you are only interested in showing points above a minimum value. Min can be left out (no limit set), or assigned a fixed or variable numerical value (the limit). E.g. You might use source data that returns the minimum value of the X field, which you can use as a variable for <em>Min<\/em>.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Max<\/strong><\/td>\n<td>The maximum value to be displayed along the x axis. The max value cannot be exceeded, so only set this if you know what the maximum value should be, or if you are only interested in showing points up to a maximum value. Max can be left out (no limit set), or assigned a fixed or variable numerical value (the limit). E.g. You might use source data that returns the maximum value of the X field, which you can use as a variable for <em>Max<\/em>.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Ticks<\/strong><\/td>\n<td>The number of intervals to show along the x axis. The chart will determine the best number of ticks that is closest to the given value.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-time.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37236\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-time.png\" alt=\"\" width=\"310\" height=\"295\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-time.png 310w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-time-150x143.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-time-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-time-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-x-time-48x46.png 48w\" sizes=\"auto, (max-width: 310px) 100vw, 310px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Left Y Axis and Right Y Axis<\/h4>\n<p class=\"intro-text\">The <strong>Y Axis<\/strong> is used for plotting values of the X Axis. You can specify one or more Y Axes, and they can be configured to the left or right of the chart (this is specified in the Series). By default, the <strong>Left Y Axis<\/strong> is used. The <strong>Right Y Axis<\/strong> is the same as the Left Y Axis, and can be used instead of (or together with, if using more than 1 series) the Left Y Axis.<\/p>\n<p class=\"intro-text\">It is useful to have these two separate axes if there are multiple 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. E.g. Show dollars along the Left Y Axis, and counts along the right Y Axis.<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"175\"><strong>Min<\/strong><\/td>\n<td width=\"550\">The minimum value to be displayed along the Y Axis. The value cannot go below the minimum, so only set <span style=\"color: #000000;\">this <\/span>if you know what the minimum value should be, or if you are only interested in showing points above a minimum value. Min can be left out (no limit set), or assigned a fixed or variable numerical value (the limit). E.g. You might use source data that returns the minimum value of the Y field, which you can use as a variable for <em>Min<\/em>.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Max<\/strong><\/td>\n<td>The maximum value to be displayed along the Y Axis. The max value cannot be exceeded, so only set this if you know what the maximum value should be, or if you are only interested in showing points up to a maximum value. Max can be left out (no limit set), or assigned a fixed or variable numerical value (the limit). E.g. You might use source data that returns the maximum value of the Y field, which you can use as a variable for <em>Max<\/em>.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Visibility<\/strong><\/td>\n<td>Show or hide values or gridlines along the y axis. The options are:<br \/>\n<em><strong>Both<\/strong><\/em>: Display both values and gridlines along the y axis.<br \/>\n<em><strong>Ticks<\/strong><\/em>: Display the values along the y axis but do not display the gridlines.<br \/>\n<em><strong>Gridlines<\/strong><\/em>: Display gridlines along the y axis (i.e. horizontal lines) but do not display the values.<br \/>\n<em><strong>None<\/strong><\/em>: Do not display values or gridlines along the y axis.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Label<\/strong><\/td>\n<td>The label for the Y Axis. This can be a simple text label or it can be driven by a variable.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Tick Format<\/strong><\/td>\n<td>The format of the values displayed along the Y Axis. The options are:<br \/>\n<em><strong>None<\/strong><\/em>: Display the whole value, using commas as thousand separators (e.g. 1,234,567).<br \/>\n<em><strong>Short<\/strong><\/em>: Trim long values to 3 significant figures (e.g. 123M).<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Scale Type<\/strong><\/td>\n<td>The type of scale to use for the chart. The options are:<br \/>\n<strong><em>Linear<\/em><\/strong>: Shows the actual values. <br \/>\n<em><strong>Log<\/strong><\/em>: Display values on a logarithmic scale. This is useful when you have a wide range of values to display.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Log Gridlines<\/strong><\/td>\n<td>\n<p>For charts with a <strong>log scale<\/strong>, you have the option of showing only the major grid lines (below left), or both the major and minor grid lines (below right). Note: This only applies to the <em>Log<\/em> <strong>Scale Type<\/strong>. Options: <em>Major<\/em>, <em>Major and Minor<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-gridlines.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26918\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-gridlines.png\" alt=\"\" width=\"420\" height=\"102\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-gridlines.png 420w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-gridlines-150x36.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-gridlines-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-gridlines-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-gridlines-48x12.png 48w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-y.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37238\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-y.png\" alt=\"\" width=\"315\" height=\"342\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-y.png 315w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-y-138x150.png 138w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-y-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-y-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-y-44x48.png 44w\" sizes=\"auto, (max-width: 315px) 100vw, 315px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Other<\/h3>\n<p class=\"intro-text\">This includes optional configurations for the chart's general appearance, such as orientation. Some options depend on whether the chart is discrete (X Axis data type of <em>String<\/em>) or continuous (data type of <em>Time<\/em> or <em>Number<\/em>).<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p><em><strong>Discrete options:<\/strong><\/em><\/p>\n<p><em><strong><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-discrete.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37240\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-discrete.png\" alt=\"\" width=\"311\" height=\"135\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-discrete.png 311w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-discrete-150x65.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-discrete-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-discrete-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-discrete-48x21.png 48w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/a><\/strong><\/em><\/p>\n<\/td>\n<td>\n<p><em><strong>Continuous options:<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-continuous.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37241\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-continuous.png\" alt=\"\" width=\"311\" height=\"207\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-continuous.png 311w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-continuous-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-continuous-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-continuous-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-other-continuous-48x32.png 48w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"125\"><strong>Orientation<\/strong><\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-horizontal.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-26887 alignright\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-horizontal.png\" alt=\"\" width=\"269\" height=\"96\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-horizontal.png 269w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-horizontal-150x54.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-horizontal-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-horizontal-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-horizontal-48x17.png 48w\" sizes=\"auto, (max-width: 269px) 100vw, 269px\" \/><\/a>Charts default to vertical. If you change this to horizontal, then your Y Axis is plotted along the horizontal, and your primary values (<em>X Axis<\/em>) move to the vertical. <br \/>\nHorizontal is useful if you are expecting a lot of X values, as the legends stack neatly underneath each other (horizontally). Available on all series.<\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Legend<\/strong><\/td>\n<td>\n<p>The legend identifies the series displayed on the chart. Available on all series. The drop-down list allows you to select the location of the legend relative to the chart. The legend is not displayed by default. Options are (from left to right in image below): <em>Left<\/em>, <em>Right<\/em>, <em>Bottom<\/em>, <em>Top<\/em>, <em>Bottom<\/em>, <em>Inner<\/em><em>. <\/em>Choose <em>Inner<\/em> if you have limited space. The legend sits inside the component's bounding box, so may affect the size of the chart.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-legend.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37242\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-legend.png\" alt=\"\" width=\"1018\" height=\"124\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-legend.png 1018w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-legend-768x94.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-legend-150x18.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-legend-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-legend-36x4.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-legend-48x6.png 48w\" sizes=\"auto, (max-width: 1018px) 100vw, 1018px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Tooltip<\/strong><\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image052.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-36666 alignright\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image052.png\" alt=\"\" width=\"164\" height=\"135\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image052.png 252w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image052-150x124.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image052-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image052-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image052-48x40.png 48w\" sizes=\"auto, (max-width: 164px) 100vw, 164px\" \/><\/a>Show the Y value of the data point when you hover over a bar on the chart. Only available for <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/discrete-versus-continuous-charts\/\">discrete<\/a> charts (x axis data type is <strong><em>String<\/em><\/strong>).<\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Range Selector<\/strong><\/td>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-26886 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-range.png\" alt=\"\" width=\"147\" height=\"79\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-range.png 147w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-range-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-range-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-range-48x26.png 48w\" sizes=\"auto, (max-width: 147px) 100vw, 147px\" \/>Range selectors allow the user to highlight a particular section of a chart by dragging on it, and can be used to allow the user to select a time range (can also be used to select a number range). Range selectors are useful when linking charts (see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/#Part_1_Linked_Range_Selector\">Tutorial 2 - Part 1<\/a>). Only available for <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/all-about-charts\/discrete-versus-continuous-charts\/\">continuous<\/a> charts (X Axis data type is <strong><em>Time <\/em><\/strong>or <strong><em>Number<\/em><\/strong>).<\/p>\n<p>To enable the range selector, choose how the linked chart is to be updated, from the drop-down list. The linked chart is updated either as the user is actively dragging on the range selector chart (<em>Update On Drag<\/em>), or after the user has finished dragging and has released the mouse button (<em>Update On Mouseup<\/em>). When the range selector is enabled, the <em>Range Start<\/em> and <em>Range End<\/em> variables also become available.<\/p>\n<p><strong>Range Start<\/strong>: The variable that determines the start of the selected range. By default, this variable is <em> selectionStart.<br \/>\n<\/em><strong>Range End<\/strong>: The variable that determines the end of the selected range. By default, this variable is <em>selectionEnd.<\/em><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Hairline Mode<\/strong><\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image013.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-36633 alignright\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image013.png\" alt=\"\" width=\"204\" height=\"146\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image013.png 287w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image013-150x107.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image013-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image013-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image013-48x34.png 48w\" sizes=\"auto, (max-width: 204px) 100vw, 204px\" \/><\/a>A hairline shows the value of a data point at the x axis position that a user clicks. The hairline mode determines how many hairlines can be shown at one time. Options: <em>None<\/em>, <em>Single<\/em>, <em>Dual<\/em>, <em>Multiple<\/em>. Default is <em>none<\/em>. Only available for continuous charts (X Axis data type is <strong><em>Time <\/em><\/strong>or <strong><em>Number<\/em><\/strong>). Additional options:<\/p>\n<p><strong>Hairline Start<\/strong>: The time of the line at the left-most hairline. If the Hairline Mode is <em>Single<\/em>, Hairline Start and Hairline End will have the same value.<br \/>\n<strong>Hairline End<\/strong>: The time of the line at the right-most hairline.<br \/>\n<strong>Hairline Update Mode<\/strong>: These options are the same as those for the Range Selector \u2013 the hairline is updated either as the user is actively dragging the hairline (<em>Update On Drag<\/em>), or after the user has finished dragging (<em>Update On Mouseup<\/em>). 'Update on Mouseup' is useful when a large amount of data is being returned.<\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Comments<\/strong><\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image054.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-36664 alignright\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image054.png\" alt=\"\" width=\"189\" height=\"155\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image054.png 255w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image054-150x123.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image054-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image054-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/image054-48x39.png 48w\" sizes=\"auto, (max-width: 189px) 100vw, 189px\" \/><\/a>Comments are observations made at a point in time that users can associate with a particular tag, entity, or entity attribute. When <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/comments\/\">comments<\/a> are enabled on a chart (see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/#Part_2_Hairline_and_Comments\">Tutorial 2 - Part 2<\/a>), a comment symbol <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8141 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/commenticonempty.png\" alt=\"\" width=\"15\" height=\"12\" \/> in the hairline (see above) indicates that users can click it to add a comment. If a comment has been added, this is shown by a triangular comment marker <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-36747 \" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/comment-icon-455.png\" alt=\"\" width=\"11\" height=\"10\" \/> on the chart itself, coloured to match the applicable series, at the point in time when the comment was added. Users can click the symbol to see the comments and add additional ones. Comments are only available for continuous charts (X Axis data type is <strong><em>Time <\/em><\/strong>or <strong><em>Number<\/em><\/strong>). Additional option if selected:<\/p>\n<p><strong>Comment Names<\/strong>: The names of the tags, entities, or entity attributes that a comment can be associated with, on this chart. You only need to add the items that you want users to be able to comment on. In the hairline, the comment symbol will appear next to its value.<\/p>\n<p><em><strong>Note<\/strong><\/em>: For comments against entity attributes, you must:<\/p>\n<ul>\n<li>Specify <em>Entity<\/em> for the <strong>Name Column<\/strong> in the series - this enables the comment service to recognise the entity and associate it with the attribute.<\/li>\n<li>Specify the full entity attribute path i.e. <span class=\"code-fragment\">Entity[Template]:Attribute!AttributeValue<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div>\u00a0<\/div>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial 1: Simple Chart<\/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 4-part tutorial. In Part 1, we'll add and configure a discrete bar chart. In Part 2, we'll add links to the X Axis. In Part 3, we'll add a Combo Box to control one of the chart's dataset parameters. And in Part 4 we'll use the chart's <em>Selected<\/em> property to update a variable used by a Data Label. At the end of Tutorial 1, your page should look something like this:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37244\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1.png\" alt=\"\" width=\"1432\" height=\"540\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1.png 1432w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-768x290.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-150x57.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1280x483.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-48x18.png 48w\" sizes=\"auto, (max-width: 1432px) 100vw, 1432px\" \/><\/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 bar chart onto a page, then configure it show dataset data (oil). Then we'll add another Bar Series (to show gas), and give the chart a legend and a label. We will also configure the X Axis so that users can drilldown and open a trend for the selected entity.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-30441\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png\" alt=\"add page\" width=\"596\" height=\"110\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png 596w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-48x9.png 48w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/a><\/p>\n<p class=\"intro-text\">Before you start, click the <strong>New Page<\/strong> button on the Home tab of the ribbon. Choose the <strong>Grid <\/strong>layout.<\/p>\n<ul class=\"intro-text\">\n<li>Remove a column.<\/li>\n<li>Assign a column spacing of <strong>10<\/strong>.<\/li>\n<li>Add a row (you should have 3 rows now).<\/li>\n<li>Assign the 1st and 2nd rows a height of <strong>10*<\/strong>.<\/li>\n<li>Assign the 3rd row a height of <strong>80*<\/strong>.<\/li>\n<li>Assign a row spacing of <strong>10<\/strong>.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\" data-slimstat-tracking=\"false\" data-slimstat-type=\"2\" data-slimstat-clicked=\"false\">Grid Layout tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Add a Bar Chart and Configure its Data<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37245\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2.png\" alt=\"\" width=\"1286\" height=\"570\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2.png 1286w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-768x340.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-150x66.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-1280x567.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-48x21.png 48w\" sizes=\"auto, (max-width: 1286px) 100vw, 1286px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop a <strong>Bar Chart<\/strong> component onto the 3rd row of the grid layout, as shown. The Bar Chart is in the Chart <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1837 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/chartsicon_sm.png\" alt=\"chartsicon_sm\" width=\"22\" height=\"17\" \/> group.<\/p>\n<p class=\"intro-text\">For the <strong>Chart Data<\/strong>, open the Data Selector by clicking on the field. Click the Dataset <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14669\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/> tab, and fill in the fields as follows:<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a><\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Field<\/strong><\/td>\n<td><strong>Click This First<\/strong><\/td>\n<td><b>Parameter<\/b><b> to Enter<\/b><\/td>\n<td><strong>Notes<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Dataset Query<\/strong><\/td>\n<td><em><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14669\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/> <\/em>(Dataset)<\/td>\n<td>ProductionDataByLevel<\/td>\n<td><em>Select the dataset query from the <\/em>Oil and Gas Data<em> datasource.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>EndDate<\/strong><\/td>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<td><em>Leaving this empty will use the default values for this parameter, as configured in the dataset.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>level<\/strong><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-34461 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/text-icon.png\" alt=\"\" width=\"24\" height=\"11\" \/> (Text)<\/td>\n<td>Region<\/td>\n<td><em>Type the variable into the drop-down list. <\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>StartDate<\/strong><\/td>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<td><em>Leaving this empty will use the default values for this parameter, as configured in the dataset.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-1c.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37290\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-1c.png\" alt=\"\" width=\"323\" height=\"402\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-1c.png 323w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-1c-121x150.png 121w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-1c-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-1c-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-2-1c-39x48.png 39w\" sizes=\"auto, (max-width: 323px) 100vw, 323px\" \/><\/a><\/p>\n<ul>\n<li class=\"intro-text\">Click the <strong>Preview<\/strong> button to check that you are getting data, and then close the preview window. If the preview window is blank, you may have filled in a parameter incorrectly.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-bar-2-preview.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-26850 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-bar-2-preview.png\" alt=\"\" width=\"724\" height=\"253\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-bar-2-preview.png 724w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-bar-2-preview-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-bar-2-preview-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-bar-2-preview-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-bar-2-preview-48x17.png 48w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 3. Configure the Series for Oil Production<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-3.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37249\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-3.png\" alt=\"\" width=\"329\" height=\"265\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-3.png 329w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-3-150x121.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-3-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-3-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-3-48x39.png 48w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/a><\/p>\n<p class=\"intro-text\">In the <strong>Series<\/strong> section, click the <strong>Bar Series<\/strong> to expand it, and configure it as follows:<\/p>\n<p class=\"intro-text\"><strong>Y Column<\/strong>: Select <em>DataColumn<\/em> from the first drop-down list, and then select <strong>OilActualSum<\/strong> from the second. This is one of the columns available from the Dataset Preview, in the previous step.<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add Another Series for Gas Production<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-4.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37250\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-4.png\" alt=\"\" width=\"323\" height=\"224\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-4.png 323w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-4-150x104.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-4-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-4-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-4-48x33.png 48w\" sizes=\"auto, (max-width: 323px) 100vw, 323px\" \/><\/a><\/p>\n<p class=\"intro-text\">In the Series section, click <strong>Add<\/strong> to add a new series, and configure it as follows:<\/p>\n<p class=\"intro-text\"><strong>Type<\/strong>: Bar Series<br \/>\n<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\"><strong>Step 5. Configure the X Axis<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-5.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37251\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-5.png\" alt=\"\" width=\"1289\" height=\"603\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-5.png 1289w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-5-768x359.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-5-150x70.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-5-1280x599.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-5-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-5-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-5-48x22.png 48w\" sizes=\"auto, (max-width: 1289px) 100vw, 1289px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click <strong>X Axis<\/strong> to expand the X Axis section, and configure it as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Column<\/strong><\/td>\n<td>Asset<\/td>\n<td>Select <em>DataColumn<\/em> from the first drop-down list, and <em>Asset<\/em> from the second.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Data Type<\/strong><\/td>\n<td>String<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Visibility<\/strong><\/td>\n<td>Ticks<\/td>\n<td><em>This hides the horizontal grid lines on the chart, but allows the values to be displayed.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">The basic chart is now configured! We'll now add some further standard chart configuration: a legend, axis labels, and tooltips.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 6. Add a Legend<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37252\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6.png\" alt=\"\" width=\"317\" height=\"140\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6.png 317w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-150x66.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-48x21.png 48w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/a><\/p>\n<p class=\"intro-text\">In the <strong>Other<\/strong> section, select the position of the Legend from the drop-down list. Note that the chart preview displays the column name from the dataset. Let's change these.<\/p>\n<ul class=\"intro-text\">\n<li>Expand the first Bar Series (for the <strong>OilActualSum <\/strong>bar series).<\/li>\n<li>In the <strong>Name<\/strong> text box, type <em>OIL<\/em>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-1.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37253\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-1.png\" alt=\"\" width=\"328\" height=\"270\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-1.png 328w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-1-150x123.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-1-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-1-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-1-48x40.png 48w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Expand the second Bar Series (for the <strong>GasActualSum <\/strong>bar series).<\/li>\n<li>In the <strong>Name<\/strong> text box, type <em>Gas<\/em>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-2.png\" rel=\"lightbox-33\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37254\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-2.png\" alt=\"\" width=\"332\" height=\"297\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-2.png 332w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-2-150x134.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-2-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-2-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-6-2-48x43.png 48w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 7. Add Labels to the Axes<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7.png\" rel=\"lightbox-34\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37255\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7.png\" alt=\"\" width=\"925\" height=\"408\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7.png 925w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-768x339.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-150x66.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-48x21.png 48w\" sizes=\"auto, (max-width: 925px) 100vw, 925px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Click <strong>X Axis<\/strong> to expand the section.<\/li>\n<li>In the <strong>Label<\/strong> text box, type <em>Assets<\/em>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-1.png\" rel=\"lightbox-35\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37256\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-1.png\" alt=\"\" width=\"331\" height=\"281\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-1.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-1-150x127.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-1-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-1-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-1-48x41.png 48w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Click <strong>Left Y Axis<\/strong> to expand the section.<\/li>\n<li>In the <strong>Label<\/strong> text box, type <em>Production<\/em>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-2.png\" rel=\"lightbox-36\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37257\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-2.png\" alt=\"\" width=\"318\" height=\"277\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-2.png 318w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-2-150x131.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-2-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-2-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-7-2-48x42.png 48w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 8. Enable Tooltips<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-8.png\" rel=\"lightbox-37\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37258\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-8.png\" alt=\"\" width=\"320\" height=\"136\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-8.png 320w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-8-150x64.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-8-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-8-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-8-48x20.png 48w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><\/p>\n<p class=\"intro-text\">In the <strong>Other<\/strong> section, select the <strong>Tooltip<\/strong> check box.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 9. Try out the Chart<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-9.png\" rel=\"lightbox-38\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37259\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-9.png\" alt=\"\" width=\"921\" height=\"402\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-9.png 921w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-9-768x335.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-9-150x65.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-9-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-9-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut1-1-9-48x21.png 48w\" sizes=\"auto, (max-width: 921px) 100vw, 921px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Preview<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Hover over the chart to see the tooltips.<\/li>\n<li>Note the label alongside the Y Axis, and the one below the X Axis.<\/li>\n<li>Note the legend for the two series, <em>Oil<\/em> and <em>Gas<\/em>.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" alt=\"save\" width=\"48\" height=\"53\" \/> Remember to <a title=\"Saving Your Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save your page<\/a>!<\/p>\n<h3>Part 2: X Axis Links on Bar Chart<\/h3>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-1.png\" rel=\"lightbox-39\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37270\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-1.png\" alt=\"\" width=\"1094\" height=\"407\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-1.png 1094w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-1-768x286.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-1-150x56.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-1-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-1-48x18.png 48w\" sizes=\"auto, (max-width: 1094px) 100vw, 1094px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this part, we will configure the X Axis so that each value is a link that opens a page, which displays the value of the X Axis that was clicked. First, we need to create a new page containing a simple Data Label.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Create a New Page with a Data Label<\/strong><\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14281\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-400x100.png 400w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-250x62.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-48x12.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png 438w\" alt=\"New Page button on ribbon\" width=\"438\" height=\"109\" \/><\/p>\n<p class=\"intro-text\">On the Home tab of the ribbon, click the <strong>New Page<\/strong> button and choose the Grid layout.<\/p>\n<p class=\"intro-text\">Add a Data Label (in the Display <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" rel=\"lightbox-40\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1844\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/><\/a> group) to the page.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-2.png\" rel=\"lightbox-41\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37271\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-2.png\" alt=\"\" width=\"1122\" height=\"328\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-2.png 1122w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-2-768x225.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-2-150x44.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-2-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-2-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-2-48x14.png 48w\" sizes=\"auto, (max-width: 1122px) 100vw, 1122px\" \/><\/a><\/p>\n<p class=\"intro-text\">For the <strong>Value<\/strong>, open the Data Selector by clicking on the field. Click the Value <strong><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" rel=\"lightbox-42\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15215\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" alt=\"Data selector Value icon\" width=\"15\" height=\"15\" \/><\/a><\/strong> tab, and configure it as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Field<\/strong><\/td>\n<td><strong>Click This First<\/strong><\/td>\n<td><b>Parameter<\/b><b> to Enter<\/b><\/td>\n<td><strong>Notes<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Value<\/strong><\/td>\n<td><em><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14462\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" alt=\"Variable 4.4\" width=\"14\" height=\"21\" \/><\/a> <\/em>(Variable)<\/td>\n<td>xValueinLabel<\/td>\n<td>This is a variable that will store the value clicked in the chart<em>.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Save the page in <em>My Workspace<\/em> and name it '<em>Data Label<\/em>'.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/#Tutorial_2_Configuring_a_Data_Label_Component\">Data Label<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Configure the Chart<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-3.png\" rel=\"lightbox-44\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37272\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-3.png\" alt=\"\" width=\"1271\" height=\"800\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-3.png 1271w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-3-768x483.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-3-150x94.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-3-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-3-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-3-48x30.png 48w\" sizes=\"auto, (max-width: 1271px) 100vw, 1271px\" \/><\/a><\/p>\n<p class=\"intro-text\">Reopen the page containing the chart, click the chart to open the configuration editor, and expand the <strong>X Axis<\/strong> section.<\/p>\n<p class=\"intro-text\">In the <strong>Link Action<\/strong> section, configure the following:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Type<\/strong><\/td>\n<td>Open Page<\/td>\n<td><em>We want to open an existing page.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Workspace<\/strong><\/td>\n<td>My Workspace<\/td>\n<td><em>Specify the workspace in which you save the page with the Data Label.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Page<\/strong><\/td>\n<td>Data Label<\/td>\n<td><em>This is the name of the page we just created.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Tab Type<\/strong><\/td>\n<td>New Explorer Tab<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">In the <strong>Variable Mapping <\/strong>section (below Link Action), add a <strong>Context<\/strong> variable and configure it as follows:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-4.png\" rel=\"lightbox-45\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37273\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-4.png\" alt=\"\" width=\"326\" height=\"312\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-4.png 326w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-4-150x144.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-4-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-4-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut2-4-48x46.png 48w\" sizes=\"auto, (max-width: 326px) 100vw, 326px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Source<\/strong><\/td>\n<td>xValue<\/td>\n<td><em>The drop-down list shows you the available context variables. The xValue variable stores the value of the X axis.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Target<\/strong><\/td>\n<td>xValueinLabel<\/td>\n<td><em>This is the variable we specified in the Data Label. When the user clicks on the X axis, its value is passed to this variable on the page specified in the link action above.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Try out the Chart<\/strong><\/p>\n<ul class=\"intro-text\">\n<li>Click the Preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Click on a link in the X Axis to open the page containing the Data Label. Observe the value of the Data Label.<\/li>\n<\/ul>\n<h4>The Set Variables Link Action Type<\/h4>\n<p class=\"note\">Note: From version 4.6.2, there is a new Link Action type called <em>Set Variables<\/em>.<\/p>\n<p class=\"intro-text\">You can use this link action to set page variables, instead of opening a different page, trend, or URL. When you choose the <em>Set Variables<\/em> link action, you add <em>Variables<\/em> instead of <em>Variable Mapping<\/em>. There are two tutorials covering this new Link Action type: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/#Tutorial_5_Adding_a_Hyperlink_to_Set_Page_Variables\">Hyperlink Tutorial: Adding a Hyperlink to Set Page Variables<\/a>, and <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-tile\/#Tutorial_Status_Tiles_with_Set_Variables_Link_Action\">Status Tile Tutorial: Status Tiles with Set Variables Link Action<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h3>Part 3: Bar Chart Driven by Combo Box<\/h3>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-1-combo2.png\" rel=\"lightbox-46\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-26912 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-1-combo2.png\" alt=\"\" width=\"795\" height=\"457\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-1-combo2.png 795w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-1-combo2-768x441.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-1-combo2-150x86.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-1-combo2-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-1-combo2-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut-1-combo2-48x28.png 48w\" sizes=\"auto, (max-width: 795px) 100vw, 795px\" \/><\/a><\/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. 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=\"intro-text\"><strong>Step 1. Add and Configure a Combo Box<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1.png\" rel=\"lightbox-47\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37278\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1.png\" alt=\"\" width=\"1254\" height=\"267\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1.png 1254w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1-768x164.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1-150x32.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1-48x10.png 48w\" sizes=\"auto, (max-width: 1254px) 100vw, 1254px\" \/><\/a><\/p>\n<p class=\"intro-text\">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. Configure the Combo Box as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Field<\/strong><\/td>\n<td><strong>Click This First<\/strong><\/td>\n<td><b>Parameter<\/b><b> to Enter<\/b><\/td>\n<td><strong>Notes<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Option Values<\/strong><\/td>\n<td><em><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/list-icon.png\" rel=\"lightbox-48\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34458\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/list-icon.png\" alt=\"\" width=\"11\" height=\"9\" \/><\/a> <\/em>(List)<\/td>\n<td>Region, Location, Area<\/td>\n<td><em>Click the Values <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" rel=\"lightbox-42\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15215\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" alt=\"Data selector Value icon\" width=\"15\" height=\"15\" \/><\/a> tab. These are all valid values for the level parameter in the chart's dataset query, ProductionDataByLevel.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>SelectedOption<\/strong><\/td>\n<td>&nbsp;<\/td>\n<td><em>selectedLevel<\/em><\/td>\n<td><i>We will use this variable in the chart.<\/i><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\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><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add a Default Value<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-default.png\" rel=\"lightbox-50\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26854\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-default.png\" alt=\"\" width=\"353\" height=\"517\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-default.png 353w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-default-102x150.png 102w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-default-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-default-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-default-33x48.png 33w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/a><\/p>\n<p class=\"intro-text\">In the Studio ribbon, click the <strong>Defaults<\/strong> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/defaults-ribbon-icon1.png\" rel=\"lightbox-51\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-17000\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/defaults-ribbon-icon1.png\" alt=\"\" width=\"23\" height=\"21\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/defaults-ribbon-icon1.png 34w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/defaults-ribbon-icon1-24x22.png 24w\" sizes=\"auto, (max-width: 23px) 100vw, 23px\" \/><\/a> button. Add the <em>selectedLevel<\/em> text variable and assign it a Default Value of <em>Region<\/em>.<\/p>\n<p class=\"left-bar\">Related: <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Configure the Chart Data<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2.png\" rel=\"lightbox-52\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37287\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2.png\" alt=\"\" width=\"316\" height=\"407\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2.png 316w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2-116x150.png 116w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2-37x48.png 37w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/a><\/p>\n<p class=\"intro-text\">Reopen the chart editor, and click the <strong>Chart Data<\/strong> data selector. Change the <strong>level<\/strong> parameter to the <em>selectedLevel<\/em> variable, as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Field<\/strong><\/td>\n<td><strong>Click This First<\/strong><\/td>\n<td><b>Parameter<\/b><b> to Enter<\/b><\/td>\n<td><strong>Notes<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>level<\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Use-Variable-a.png\" rel=\"lightbox-53\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7913\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Use-Variable-a.png\" alt=\"Variable 4.4\" width=\"18\" height=\"24\" \/><\/a> (Variable)<\/td>\n<td>selectedLevel<\/td>\n<td><em>Type the variable into the drop-down list. <\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 4. Try out the Chart with the Combo Box<\/strong><\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Preview<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Select <strong>Location <\/strong>from the combo box, and see how locations are displayed along the X Axis.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Part 4: Bar Chart Selection<\/h3>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4.png\" rel=\"lightbox-54\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37291\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4.png\" alt=\"\" width=\"1452\" height=\"663\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4.png 1452w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-768x351.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-150x68.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-1280x584.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-48x22.png 48w\" sizes=\"auto, (max-width: 1452px) 100vw, 1452px\" \/><\/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 class=\"intro-text\"><strong>Step 1. Add and Configure a Data Label<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-1.png\" rel=\"lightbox-55\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37292\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-1.png\" alt=\"\" width=\"1358\" height=\"329\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-1.png 1358w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-1-768x186.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-1-150x36.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-1-1280x310.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-1-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-1-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-1-48x12.png 48w\" sizes=\"auto, (max-width: 1358px) 100vw, 1358px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a> component onto the grid cell just above the chart, as shown.<\/p>\n<p class=\"intro-text\">In the Data Label, open the <strong>Value<\/strong> data selector by clicking on the field. In the Value <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" rel=\"lightbox-42\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15215\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" alt=\"Data selector Value icon\" width=\"15\" height=\"15\" \/><\/a> tab, fill in the fields as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Field<\/strong><\/td>\n<td><strong>Click This First<\/strong><\/td>\n<td><b>Parameter<\/b><b> to Enter<\/b><\/td>\n<td><strong>Notes<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Value<\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Use-Variable-a.png\" rel=\"lightbox-53\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7913\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/Use-Variable-a.png\" alt=\"Variable 4.4\" width=\"18\" height=\"24\" \/><\/a> (Variable)<\/td>\n<td>selectedAsset<\/td>\n<td><em>If not available for selection, type the variable into the drop-down list. <\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 2. Configure the Chart<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-2.png\" rel=\"lightbox-58\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37293\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-2.png\" alt=\"\" width=\"321\" height=\"298\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-2.png 321w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-2-150x139.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-2-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-2-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut4-2-48x45.png 48w\" sizes=\"auto, (max-width: 321px) 100vw, 321px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click on the chart to configure it, and expand the <strong>X Axis<\/strong> section.<\/p>\n<p class=\"intro-text\">In the <strong>Selected<\/strong> drop-down list, choose the <em>selectedAsset<\/em> variable.<\/p>\n<p class=\"intro-text\"><strong>Step 3. Try out the Chart with Data Label<\/strong><\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Preview<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Click a<i> <\/i>bar on the chart, and see how this appears in the Data Label.<\/li>\n<\/ul>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial 2: Linked Charts<\/h2>\n<p class=\"intro-text\">This tutorial is in 3 parts. In Part 1, we will add a scatter chart and a line chart configured with a range selector, and link them together. The user can then use the line chart (range selector) to change the highlighted data points in the scatter chart. In Part 2, we will add hairline and comment capabilities for the scatter chart. In Part 3, we will add a second series to the scatter chart that uses different data. Your charts will end up looking something like this:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1.png\" rel=\"lightbox-59\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37308\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1.png\" alt=\"\" width=\"680\" height=\"483\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1.png 680w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-150x107.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-48x34.png 48w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><\/p>\n<p class=\"intro-text\">Let\u2019s go through this process, step-by-step.<\/p>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the <em>Sample Data <\/em>table and datasets 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: Linked Range Selector<\/h3>\n<p class=\"intro-text\">In this part, we will configure default values and add a scatter and line chart, linking them together via a range selector on the line chart.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-30441\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png\" alt=\"add page\" width=\"596\" height=\"110\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png 596w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-48x9.png 48w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/a><\/p>\n<p class=\"intro-text\">Before you start, click the <strong>New Page<\/strong> button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n<ul class=\"intro-text\">\n<li>Add another row.<\/li>\n<li>Assign the first row a height of 100.<\/li>\n<li>Assign the second row a height of 350.<\/li>\n<li>Assign a row spacing of 10.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout tutorial<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Set the Page Defaults<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-2.png\" rel=\"lightbox-61\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37316\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-2.png\" alt=\"\" width=\"1357\" height=\"620\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-2.png 1357w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-2-768x351.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-2-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-2-1280x585.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-2-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-2-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-2-48x22.png 48w\" sizes=\"auto, (max-width: 1357px) 100vw, 1357px\" \/><\/a><\/p>\n<p class=\"intro-text\">We want the initial value of the charts to show average daily data for the <em>Archer<\/em> well, for the last month. We can set that here.<\/p>\n<p class=\"intro-text\">Click the <strong><em>Defaults <\/em><\/strong>button in the Studio tab of the ribbon, and configure the following:<\/p>\n<ul class=\"intro-text\">\n<li><strong>endTime<\/strong>: Current Datetime<\/li>\n<li><strong>startTime<\/strong>: Relative Datetime of 30 Days<\/li>\n<li><strong>pageSampleInterval<\/strong>: 86400 (<em>This is equivalent to 1 day)<\/em><\/li>\n<li><strong>selectedEntity<\/strong>: Archer<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">Variables<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add and configure a Range Selector Chart<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3.png\" rel=\"lightbox-62\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37320\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3.png\" alt=\"\" width=\"1341\" height=\"653\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3.png 1341w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-768x374.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-1280x623.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-48x23.png 48w\" sizes=\"auto, (max-width: 1341px) 100vw, 1341px\" \/><\/a><\/p>\n<p class=\"intro-text\">This Chart will enable the user to select data points for highlighting on the Scatter Chart, which we will add in the next step.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a><\/p>\n<p class=\"intro-text\">Drag and drop a <strong>Line Chart<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-26326\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/04\/line-chart-icon.png\" sizes=\"auto, (max-width: 27px) 100vw, 27px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/04\/line-chart-icon.png 47w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/04\/line-chart-icon-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/04\/line-chart-icon-36x26.png 36w\" alt=\"\" width=\"27\" height=\"20\" \/> component onto the page, and configure it as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Open the <strong>Chart Data <\/strong>Data Selector by clicking on the field.<\/td>\n<td>\n<p>Click the <strong>Dataset <\/strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14669\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/> tab, and fill in the fields as follows:<\/p>\n<p><strong>Dataset Query<\/strong>: PressureTempData<\/p>\n<p><strong>EntitiesList:<\/strong> selectedEntity<\/p>\n<p>Click the <strong>Preview<\/strong> button to observe the data, and then close the preview window.<\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-1.png\" rel=\"lightbox-63\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-1.png\" alt=\"\" width=\"316\" height=\"317\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-1.png 316w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-1-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-1-252x252.png 252w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-1-48x48.png 48w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Configure the <strong>Line Series<\/strong> as follows:<\/td>\n<td>\n<p><strong>Y Column<\/strong>: THT (DataColumn)<\/p>\n<p><strong>Colour<\/strong>: #5BCE3B<\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-2.png\" rel=\"lightbox-64\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37349\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-2.png\" alt=\"\" width=\"318\" height=\"527\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-2.png 318w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-2-91x150.png 91w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-2-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-2-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-2-29x48.png 29w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Configure the <strong>X Axis<\/strong> as follows:<\/td>\n<td>\n<p><strong>Column<\/strong>: StartDate (DataColumn)<br \/>\n<em>This will plot the values against the StartDate column, along the X Axis.<\/em><\/p>\n<p><strong>DataType<\/strong>: Time<br \/>\n<em>This will be a continuous chart.<\/em><\/p>\n<p><strong>Visibility<\/strong>: Ticks<br \/>\n<em>Hides the gridlines originating from the X Axis, but retains the values.<\/em><\/p>\n<p><strong>Ticks<\/strong>: 4<br \/>\n<em>Makes the values on the X Axis more readable. <\/em><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-3.png\" rel=\"lightbox-65\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37350\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-3.png\" alt=\"\" width=\"317\" height=\"326\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-3.png 317w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-3-146x150.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-3-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-3-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-3-48x48.png 48w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Configure the following <strong>Other<\/strong> options:<\/td>\n<td>\n<p><strong>Range Selector<\/strong>: Update on Drag<br \/>\n<em>This enables range selection on the chart, and updates the selection dynamically as the user drags the mouse. We will use the default start and end variables.<\/em><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-4.png\" rel=\"lightbox-66\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37351\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-4.png\" alt=\"\" width=\"327\" height=\"247\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-4.png 327w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-4-150x113.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-4-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-4-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-3-4-48x36.png 48w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add and configure a Scatter Chart<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4.png\" rel=\"lightbox-67\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37353\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4.png\" alt=\"\" width=\"1213\" height=\"481\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4.png 1213w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-768x305.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-150x59.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-48x19.png 48w\" sizes=\"auto, (max-width: 1213px) 100vw, 1213px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop a <strong>Scatter Chart<\/strong> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/scatter-chart-icon.png\" rel=\"lightbox-68\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-27468\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/scatter-chart-icon.png\" alt=\"\" width=\"20\" height=\"14\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/scatter-chart-icon.png 46w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/scatter-chart-icon-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/scatter-chart-icon-36x26.png 36w\" sizes=\"auto, (max-width: 20px) 100vw, 20px\" \/><\/a> component onto the page, and configure it as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Open the <strong>Chart Data <\/strong>Data Selector by clicking on the field.<\/td>\n<td>\n<p><strong>Chart Data:<\/strong> Open the Data Selector by clicking on the field. Click the Dataset <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14669 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/> tab, and fill in the fields as follows:<\/p>\n<ul>\n<li><strong>Entities<\/strong>: selectedEntity (variable)<\/li>\n<li>Add an<strong> Attribute <\/strong>with the following properties:\n<ul>\n<li><strong>Template<\/strong>: Oil Producing Well<\/li>\n<li><strong>Attribute<\/strong>: THT<\/li>\n<li><strong>Attribute Value<\/strong>: Actual<\/li>\n<\/ul>\n<\/li>\n<li><strong>Sample Method<\/strong>: pageSampleMethod (variable)<\/li>\n<li><strong>Sample Interval<\/strong>: pageSampleInterval (variable)<\/li>\n<li><strong>Start Time<\/strong>: startTime (variable)<\/li>\n<li><strong>End Time<\/strong>: endTime (variable)<\/li>\n<\/ul>\n<p>Click the <strong>Preview<\/strong> button to observe the data, and then close the preview window.<\/p>\n<p><em><strong>Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Attribute_Data\">Data Selector<\/a><\/strong><\/em><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p1-s4-attribute.png\" rel=\"lightbox-69\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-27469\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p1-s4-attribute.png\" alt=\"\" width=\"317\" height=\"551\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p1-s4-attribute.png 317w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p1-s4-attribute-86x150.png 86w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p1-s4-attribute-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p1-s4-attribute-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p1-s4-attribute-28x48.png 28w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Configure the <strong>Dot Series<\/strong> as follows:<\/td>\n<td>\n<ul>\n<li><strong>Y Column<\/strong>: [Oil Producing Well]:THT!Actual<br \/>\n<em>We want this attribute to be plotted on the Y axis<\/em><\/li>\n<li><strong>Colour:<\/strong>#4A4A4A<\/li>\n<li><strong>Highlight Colour<\/strong>: #FFFF00<\/li>\n<li><strong>Highlight Column<\/strong>: Timestamp<\/li>\n<li><strong>Last Point Colour<\/strong>: #FF2A1F<\/li>\n<li><strong>Radius<\/strong>: 4<\/li>\n<\/ul>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-1.png\" rel=\"lightbox-70\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37354\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-1.png\" alt=\"\" width=\"328\" height=\"680\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-1.png 328w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-1-72x150.png 72w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-1-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-1-17x36.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-1-23x48.png 23w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Configure the <strong>X Axis<\/strong> as follows:<\/td>\n<td>\n<ul>\n<li><strong>Column<\/strong>: Timestamp<\/li>\n<li><strong>Data Type<\/strong>: Time<br \/>\n<em>We want the chart to display the THT data points over a selected time period.<\/em><\/li>\n<li><strong>Label<\/strong>: Downtime vs THT for Archer<\/li>\n<li><strong>Ticks<\/strong>: 4<\/li>\n<li><strong>Selected:<\/strong> selectionEnd<br \/>\n<em>This variable provides the time that will be linked to the range selector chart.<\/em><\/li>\n<\/ul>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-2.png\" rel=\"lightbox-71\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37355\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-2.png\" alt=\"\" width=\"317\" height=\"326\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-2.png 317w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-2-146x150.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-2-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-2-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-2-48x48.png 48w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Configure the <strong>Left<\/strong> <strong>Y Axis<\/strong> as follows:<\/td>\n<td>\n<p>Here we will add a label to the Y axis.<\/p>\n<p><strong>Label<\/strong>: Temperature (Celsius)<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-3.png\" rel=\"lightbox-72\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37356\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-3.png\" alt=\"\" width=\"317\" height=\"360\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-3.png 317w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-3-132x150.png 132w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-3-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-3-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-3-42x48.png 42w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 5. All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-4a.png\" rel=\"lightbox-73\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-37358 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-4a.png\" alt=\"\" width=\"672\" height=\"463\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-4a.png 672w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-4a-150x103.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-4a-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-4a-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-4-4a-48x33.png 48w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have two linked charts. The Scatter Chart will show you the THT over time for a selected entity. The Line Chart is a range selector and is linked to the Scatter Chart, so that when you select a range, the dots within that date range are highlighted in the Scatter Chart.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview <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 Button\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Use the range selector chart to select a date range, and play with this to observe the highlight changes.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Part 2: Hairline and Comments<\/h3>\n<p class=\"intro-text\">This part builds on the chart created in Part 1. We will now enable hairlines and commenting capability for the scatter chart.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Enable a hairline<\/strong><\/p>\n<p class=\"intro-text\">Go back to the editor for the scatter chart. The hairline functionality is enabled in the \u2018Other\u2019 section of the chart.<\/p>\n<p class=\"intro-text\">The variables that indicate the start and end times of the hairline are already set, so you don\u2019t need to alter these. The only thing you really need to do is choose how many hairlines you want the user to be able to show. In this case, let's just allow a single hairline, and choose an update mode. You can also choose some display options, by changing the Hairline Display Option selection.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Hairline Mode<\/strong>: Single<\/li>\n<li><strong>Hairline Update Mode<\/strong>: Update On Drag (<em>updates the hairline variables dynamically as the user drags the mouse)<\/em><\/li>\n<li><strong>Hairline Display Option<\/strong>:\n<ul class=\"intro-text\">\n<li>Show Values And Timestamp<\/li>\n<li>Show Timestamp Only<\/li>\n<li>Show Values Only<\/li>\n<li>None (just shows the line itself)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hairline-settings-for-chart-1.png\" rel=\"lightbox-74\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41842 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hairline-settings-for-chart-1.png\" alt=\"\" width=\"348\" height=\"428\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hairline-settings-for-chart-1.png 348w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hairline-settings-for-chart-1-122x150.png 122w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hairline-settings-for-chart-1-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hairline-settings-for-chart-1-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hairline-settings-for-chart-1-39x48.png 39w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/a><\/p>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/hairlines\/\">Hairlines<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Enable Comments<\/strong><\/p>\n<p class=\"intro-text\">In this step, we want to enable comments for the attribute we\u2019ve plotted. This functionality is also enabled in the \u2018Other\u2019 section of the chart, below the hairline settings.<\/p>\n<p class=\"intro-text\"><strong>Comments<\/strong>: Yes<br \/>\n<em>When you enable comments, you also need to specify the series names you want to enable.<\/em><\/p>\n<p class=\"intro-text\"><strong>Comment Names<\/strong>: Archer[Oil Producing Well]:THT!Actual<br \/>\n<em>When you enable comments on tags or entities, you can just specify the tag or entity name. However when you enable comments on entity attributes, you need to specify the fully entity-attribute path.<\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p2-s2-2.png\" rel=\"lightbox-75\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-27474\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p2-s2-2.png\" alt=\"\" width=\"311\" height=\"145\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p2-s2-2.png 311w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p2-s2-2-150x70.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p2-s2-2-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p2-s2-2-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p2-s2-2-48x22.png 48w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/a><\/p>\n<p class=\"intro-text\">There\u2019s one other thing you need to do to enable comments on entity-attributes: you need to get the series to recognise the entity. This is done by using a particular combination of the <strong>Label Option<\/strong> and <strong>Name Column<\/strong> properties of the series.<\/p>\n<p class=\"intro-text\"><strong>Label Option<\/strong>: Both<br \/>\n<strong>Name Column<\/strong>: Entity<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-5.png\" rel=\"lightbox-76\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37360\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-5.png\" alt=\"\" width=\"321\" height=\"297\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-5.png 321w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-5-150x139.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-5-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-5-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-5-48x44.png 48w\" sizes=\"auto, (max-width: 321px) 100vw, 321px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a chart that allows you to click on it to get a hairline, see the value at the time, and add comments for the entity-attribute.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-77\"><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 Button\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Click on the scatter chart to show the hairline.<\/li>\n<li>Enter a comment for the entity attribute.<\/li>\n<li>Click the black comment icon on the chart to view those comments.<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-6.png\" rel=\"lightbox-78\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37361\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-6.png\" alt=\"\" width=\"673\" height=\"357\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-6.png 673w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-6-150x80.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-6-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-6-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt2-1-6-48x25.png 48w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/a><\/p>\n<h3>Part 3: New Data<\/h3>\n<p class=\"intro-text\">This part builds on Part 1 and Part 2. We will add a new bar series to the scatter chart, and configure it to use completely different data.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add a new series to the chart, that uses different data<\/strong><\/p>\n<p class=\"intro-text\">Open the editor for the Scatter Chart, and add a new Bar series. Use the arrows next to the series to move the Bar Series to the top.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-1.png\" rel=\"lightbox-79\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37362\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-1.png\" alt=\"\" width=\"323\" height=\"273\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-1.png 323w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-1-150x127.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-1-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-1-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-1-48x41.png 48w\" sizes=\"auto, (max-width: 323px) 100vw, 323px\" \/><\/a><\/p>\n<p class=\"intro-text\">Expand the Bar Series and configure it as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Choose the <strong>Series Data<\/strong><\/td>\n<td>\n<ul>\n<li><strong>Use Series Data<\/strong>: Yes<\/li>\n<li><strong>Series Data<\/strong>: Open the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a> by clicking on the field. Click the Dataset <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" rel=\"lightbox-80\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14669\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/><\/a> tab, and fill in the fields as follows:\n<ul>\n<li><strong>Dataset Query<\/strong>: WellProductionData<\/li>\n<li><strong>EndDate<\/strong>: endTime<\/li>\n<li><strong>EntitiesList<\/strong>: selectedEntity<\/li>\n<li><strong>StartDate<\/strong>: startTime<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Click the <strong>Preview<\/strong> button to observe the data, and then close the preview window.<\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p3-s1-data.png\" rel=\"lightbox-81\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-27478\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p3-s1-data.png\" alt=\"\" width=\"324\" height=\"427\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p3-s1-data.png 324w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p3-s1-data-114x150.png 114w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p3-s1-data-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p3-s1-data-27x36.png 27w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut2-p3-s1-data-36x48.png 36w\" sizes=\"auto, (max-width: 324px) 100vw, 324px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Configure the rest of the <strong>Bar<\/strong><strong> Series<\/strong> as follows:<\/td>\n<td>\n<ul>\n<li><strong>X Column<\/strong>: StartDate<\/li>\n<li><strong>Y Column<\/strong>: DowntimeHours<\/li>\n<li><strong>Y Axis<\/strong>: Right<\/li>\n<li><strong>Colour<\/strong>: #BCC6D7<\/li>\n<li><strong>Bar Size<\/strong>: 17 (<em>you can play with this number until you get the size you like<\/em>)<\/li>\n<\/ul>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-2.png\" rel=\"lightbox-82\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37363\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-2.png\" alt=\"\" width=\"328\" height=\"529\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-2.png 328w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-2-93x150.png 93w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-2-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-2-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-2-30x48.png 30w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">Configure the <strong>Right <\/strong><strong>Y Axis<\/strong> as follows:<\/td>\n<td>\n<p>Here we will add a label to the right Y axis.<\/p>\n<p><strong>Label<\/strong>: Downtime<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-3.png\" rel=\"lightbox-83\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37364\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-3.png\" alt=\"\" width=\"318\" height=\"315\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-3.png 318w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-3-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-3-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-3-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-3-48x48.png 48w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 2. All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-4.png\" rel=\"lightbox-84\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37365\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-4.png\" alt=\"\" width=\"671\" height=\"465\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-4.png 671w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-4-150x104.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-4-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-4-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-pt3-4-48x33.png 48w\" sizes=\"auto, (max-width: 671px) 100vw, 671px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a bar chart on a scatter chart, that uses different data. The Bar Chart shows you the Downtime Hours for the selected entity and plots this against the right Y axis.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview <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 Button\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Click on the Bar Chart to show the hairline. Note that comments are not enabled: you cannot enter comments against a dataset.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" alt=\"\" width=\"48\" height=\"53\" \/> Remember to <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save your page<\/a>!<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial 3: Split Series<\/h2>\n<p class=\"intro-text\">If you have data in a particular format, you can use the <strong>Name Column<\/strong> series setting to split a series into separate, smaller sub-series. This uses one of the columns from the chart's data, where each value in the data's named column is used as a separate name.<\/p>\n<p class=\"intro-text\">This feature is intended for datasets with the following structure:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"208\"><strong>Entity<\/strong><\/td>\n<td width=\"208\"><strong>Timestamp<\/strong><\/td>\n<td width=\"208\"><strong>Value<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"208\">TWell 1<\/td>\n<td width=\"208\">1<\/td>\n<td width=\"208\">100<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"208\">TWell 2<\/td>\n<td width=\"208\">1<\/td>\n<td width=\"208\">200<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">In this example, we're going to plot the downtime hours for 3 entities, using a single series. At the end of the tutorial, your chart should look something like this:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5-.png\" rel=\"lightbox-85\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37371\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5-.png\" alt=\"\" width=\"668\" height=\"400\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5-.png 668w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5--150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5--24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5--36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5--48x29.png 48w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 1. Add a Bar Chart to a page<\/strong><\/p>\n<p class=\"intro-text\">Open a new page, and drag and drop a Bar Chart component onto it. Configure its data as follows:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-1.png\" rel=\"lightbox-86\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-27102\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-1.png\" alt=\"\" width=\"320\" height=\"471\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-1.png 320w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-1-102x150.png 102w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-1-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-1-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-1-33x48.png 33w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li><strong>Dataset Query<\/strong>: WellProductionData<\/li>\n<li><strong>EntitiesList<\/strong>: Ibis, Archer, Big Red<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Specify the Y column in the bar series<\/strong><\/p>\n<p class=\"intro-text\">Expand the Bar Series, and select '<em>DowntimeHours<\/em>' for the <strong>Y Column<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-2.png\" rel=\"lightbox-87\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-27104\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-2.png\" alt=\"\" width=\"319\" height=\"192\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-2.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-2-150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-2-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-2-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart45-tut3-2-48x29.png 48w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Configure the X axis<\/strong><\/p>\n<p class=\"intro-text\">Expand the X Axis, and specify the following:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1-.png\" rel=\"lightbox-88\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37367\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1-.png\" alt=\"\" width=\"319\" height=\"137\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1-.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1--150x64.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1--24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1--36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-1--48x21.png 48w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li><strong>Column<\/strong>: StartDate<\/li>\n<li><strong>Data Type<\/strong>: Time<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add the legend<\/strong><\/p>\n<p class=\"intro-text\">In the '<em>Other<\/em>' Section, set the <strong>Legend<\/strong> on the bottom of the chart.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2-.png\" rel=\"lightbox-89\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37368\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2-.png\" alt=\"\" width=\"316\" height=\"139\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2-.png 316w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2--150x66.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2--24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2--36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-2--48x21.png 48w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/a><\/p>\n<p class=\"intro-text\">Your chart should now look like this:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-3-.png\" rel=\"lightbox-90\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37369\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-3-.png\" alt=\"\" width=\"665\" height=\"393\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-3-.png 665w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-3--150x89.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-3--24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-3--36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-3--48x28.png 48w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 5. Split the series<\/strong><\/p>\n<p class=\"intro-text\">We're now going to split the series so that each entity has its own bar. The bars will be clustered along the X Axis.<\/p>\n<p class=\"intro-text\">Expand the Bar series again, and configure the following:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Label Option<\/strong>: Both<\/li>\n<li><strong>Name Column<\/strong>: Entity <br \/>\n<em>Observe that the entity name is prefixed to the column name in the legend.<\/em><\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-4-.png\" rel=\"lightbox-91\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37370\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-4-.png\" alt=\"\" width=\"325\" height=\"298\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-4-.png 325w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-4--150x138.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-4--24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-4--36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-4--48x44.png 48w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/p>\n<p class=\"intro-text\">Your chart should now look like this:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5-.png\" rel=\"lightbox-85\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-37371\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5-.png\" alt=\"\" width=\"668\" height=\"400\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5-.png 668w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5--150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5--24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5--36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/chart-455-tut3-5--48x29.png 48w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a single series that is split according to the Entity column.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview <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 Button\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Change the column name setting in the series and observe the changes in the legend.<\/li>\n<\/ul>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-resources\/faq-configuring-charts\/#How_do_I_add_a_legend\">How do I configure a legend<\/a>?<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 id=\"Release_History\" class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Charts 4.6.2 (this release)\n<ul class=\"overview\">\n<li>New Link Action type: Set Variables<\/li>\n<li>New Hairline setting: Hairline Display Options<\/li>\n<\/ul>\n<\/li>\n<li>Charts 4.5.5\n<ul class=\"intro-text\">\n<li>This release sees several usability enhancements to the chart editor, and minor visual improvements to chart display. For detailed descriptions, see the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-releases\/explorer-release-4-5-5\/\">release notes<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/charts-4-5-4\/\">Charts 4.5.4<\/a>\n<ul class=\"intro-text\">\n<li>Tab Action 'New Browser Tab' is now available for all Link Action Types<\/li>\n<li>Whenever HTTP content is accessed from an HTTPS instance of Explorer, a New Browser tab opens, regardless of the Tab Type specified in the Link Action editor<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/charts-4-5-2\/\">Charts 4.5.2<\/a>\n<ul class=\"intro-text\">\n<li>Only series with an explicitly defined name will appear in the legend<\/li>\n<li>Null values are now rendered as a gap in the chart.<\/li>\n<\/ul>\n<\/li>\n<li>Charts 4.5\n<ul class=\"intro-text\">\n<li>Bar and stacked bar charts can be configured to have a drilldown on the X Axis<\/li>\n<li>Bar series can be configured to use the \u2018Time\u2019 Data Type on the X Axis<\/li>\n<\/ul>\n<\/li>\n<li>Charts 4.4.6\n<ul class=\"intro-text\">\n<li>Right-click on a chart to open a trend for time series data<\/li>\n<li>Each chart series can optionally use data from its own datasource<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/charts-4-4-2\/\">Charts 4.4.2<\/a>\n<ul class=\"intro-text\">\n<li>Enable or disable vertical grid lines<\/li>\n<\/ul>\n<\/li>\n<li>Charts 4.4.1\n<ul class=\"intro-text\">\n<li>Reorder series in the component editor<\/li>\n<\/ul>\n<\/li>\n<li><a title=\"Charts 4.4.0\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/charts-4-4-0\/\">Charts 4.4.0<\/a>\n<ul class=\"intro-text\">\n<li>Data Selector<\/li>\n<\/ul>\n<\/li>\n<li><a title=\"Charts 4.3.2\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/charts-4-3-2\/\">Charts 4.3.2<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>IFS OI Explorer charts work together with user controls to display source data interactively. There are several types of charts available, including area chart, line chart, scatter chart, bar chart, and stacked bar chart. Learn 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 display mode. <\/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\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":31623,"parent":1407,"menu_order":73,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[15],"class_list":["post-19050","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-charts-2","Version-4-5-5","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/19050","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=19050"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/19050\/revisions"}],"predecessor-version":[{"id":67009,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/19050\/revisions\/67009"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/31623"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=19050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=19050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=19050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}