{"id":2238,"date":"2015-03-11T22:53:48","date_gmt":"2015-03-11T14:53:48","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=2238"},"modified":"2016-10-13T11:54:54","modified_gmt":"2016-10-13T03:54:54","slug":"stacked-bar-chart-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/charts-4-3-2\/stacked-bar-chart-4-3-2\/","title":{"rendered":"Stacked Bar Chart (4.3.2)"},"content":{"rendered":"

<\/p>\n

This article applies to versions 4.3.2 and earlier of P2 Explorer. For help on the latest version of the chart, see Charts<\/a>.<\/p>\n

Overview<\/h3>\n

The stacked bar chart has one or more series containing bar charts, which stack vertically to form single bars. Bar charts are described in a separate topic.\u00a0The following diagram shows a stacked bar chart in design mode:<\/p>\n

(See separate topics for: Line Chart<\/a>, Bar Chart<\/a>, Area Chart<\/a> and Dot Chart<\/a>.)<\/p>\n

\u00a0<\/div>\n
\"addingastackedbarchart3\"<\/a><\/div>\n
\n

The chart has three mandatory selections (marked with an asterisk *) that have not been preconfigured: Source Data<\/strong>, at least one Series<\/strong> (define the Y Column<\/strong>), and the X Axis<\/strong> (define the Column<\/strong>). You\u2019ll need to fill these in yourself.<\/p>\n<\/div>\n\n\n\n\n\n\n\n\n
Source Data:<\/strong><\/td>\nThis is a mandatory selection. Your chart data comes from this source data.<\/td>\n<\/tr>\n
Series:<\/strong><\/td>\nYour chart needs at least one series. Click Add<\/strong> for new series, or Remove<\/strong> to remove a series.<\/td>\n<\/tr>\n
 <\/td>\nThe chart definitions here cover the elements of a Stacked Bar Series<\/em>. Other types are Bar Series<\/em>, Line Series<\/em>, Area Series<\/em> and Dot Series<\/em>.<\/td>\n<\/tr>\n
 <\/td>\nSelect Stacked Bar Series<\/strong>. You will notice that a Bar Series<\/em> appears.<\/td>\n<\/tr>\n
 <\/td>\nThe Bar Series<\/strong> elements are described below. Add <\/strong>one or more Bar Series<\/em> to your Stacked Bar Series<\/em>.<\/td>\n<\/tr>\n
 <\/td>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Bar Series:<\/em><\/strong><\/td>\nType:<\/em><\/strong><\/td>\nEach series can be plotted to best suit your data. The default is Line Series.<\/td>\n<\/tr>\n
 <\/td>\nY Column:<\/em><\/strong><\/td>\nThis is a mandatory selection. Select a value from the source data, or hook this up to an event. These values get plotted against the Y Axis.<\/td>\n<\/tr>\n
 <\/td>\nName:<\/em><\/strong><\/td>\nGive the Y Column<\/strong> a name. This appears in the legend, and should describe what is being represented. For example, the name COSTS can be applied to a series where the Y Column<\/strong> is the value TOTAL_AMT, if this value represents costs.<\/td>\n<\/tr>\n
 <\/td>\nName Column:<\/em><\/strong><\/td>\nAs an alternative to Name<\/strong>, you may prefer to have a variable label in the legend. Select a value from the source data, or use an event, to show the label. This value overrides the value entered into Name<\/strong>, and effectively splits the bar into separate, smaller groups (bars). For example, use the value COST_TYPE (a column from the source data) as a Name Column<\/strong> for Y Column<\/strong> TOTAL_AMT. Here, the TOTAL_AMT per COST_TYPE is shown as a separate bar.<\/td>\n<\/tr>\n
 <\/td>\nY Axis:<\/em><\/strong><\/td>\nChoose left or right for the Y Axis. If you have more than one series, with a very different range of values, then you might choose to have a left Y Axis for one series, and a right Y Axis for others, so that values line up better on a single chart.<\/td>\n<\/tr>\n
 <\/td>\nFilter Column and Filter Value:<\/em><\/strong><\/td>\nUse Filter Column<\/strong> and Filter Value<\/strong> together, instead of the Name Column<\/strong>, if the Y Column<\/strong> values come from a columnthat stores values apart from the ones you want for this series. With Filter Column<\/strong> and Filter Value <\/strong>you will also need to specify a Name<\/strong>. (More<\/a>)<\/td>\n<\/tr>\n
 <\/td>\nColour:<\/em><\/strong><\/td>\nSpecify the colour of the series in hexadecimal, for example #913D88 or RGB format, for example RGB(145,61,136). You can also just type in the name of a colour, for example RED, BLUE, MAGENTA, YELLOW etc.<\/td>\n<\/tr>\n
 <\/td>\nColour Matcher:<\/em><\/strong><\/td>\nYou can type in a reserved word to get the correct matching colour. For example, OIL<\/em> gives you the correct values for the specific oil green. Note that Colour<\/strong> overrides Colour Matcher<\/strong>, so keep it empty if you want to use Colour Matcher<\/strong>. Colour matcher values you can use are OIL, GAS, NGL<\/em> and WATER<\/em>. This is particularly useful if you're driving the colour from a value in the source data, and want it to be meaningful for the value that it's representing.<\/td>\n<\/tr>\n
 <\/td>\nBar Size:<\/em><\/strong><\/td>\nIf you want to specify a bar size, type a number here, for example 10, 20, 40 or 80. This determines the width of the bar, in pixels. Note that all the bar series on this chart will have the same width, and you only need to set this for one of the bar series. The bar size may be limited by Explorer, depending on bar padding and the available width for the chart.<\/td>\n<\/tr>\n
 <\/td>\nBar Padding:<\/em><\/strong><\/td>\nThis is the padding (in pixels) between the different bars for an x-value. Note that bar size and bar padding values will be overridden by Explorer, if there is not enough room on the chart.<\/td>\n<\/tr>\n
Bar Series:<\/em><\/strong><\/td>\n <\/td>\nAnd so on, with the next Bar Series<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
Axes:<\/strong><\/td>\nEach chart has an X Axis and either one or two Y Axes.<\/td>\n<\/tr>\n
 <\/td>\n\n\n\n\n\n
X Axis:<\/em><\/strong><\/td>\nThe X Axis is the principle axis, horizontal by default, containing the values against which other values are then measured (for example, AREAS<\/em> (X Axis) with allocated BUDGETS<\/em> (Y Axis).<\/td>\n<\/tr>\n
 <\/td>\n\n\n\n\n\n\n\n\n\n\n
Column:<\/strong><\/td>\nChoose a column from your source data (for example, AREA). The column values for the result rows are then plotted along the X Axis (for example, Fayetteville, Haynesville, Area ABC, etc.). (Be careful to pick a column that has no duplicates.)<\/td>\n<\/tr>\n
Data Type:<\/strong><\/td>\nThis defaults to String<\/em>, and should be compatible with the Column<\/strong>. If Column<\/strong> can be represented as a number, then you can select Number<\/em> from the drop-down (the third option is Time<\/em>). If this is still not compatible with some of the series, then you will get a warning message.<\/td>\n<\/tr>\n
Visible:<\/strong><\/td>\nIf this is not selected (select the check box or let an event determine this), the X Axis values do not appear along the X Axis.<\/td>\n<\/tr>\n
Values:<\/strong><\/td>\nAdd one or more values to the existing values on the X Axis that are returned from the source data.<\/td>\n<\/tr>\n
Label:<\/strong><\/td>\nThis can be blank, or add a label (value or event) to be displayed below the X Axis<\/strong>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
Left Y Axis:<\/em><\/strong><\/td>\nThe Left Y Axis<\/strong>, vertical by default, is used for plotting values of the X Axis<\/strong>. Note that this axis is only used if Left is selected as the Y Axis<\/strong> in one or more series (it is, by default). The Left Y Axis<\/strong> comes preconfigured.<\/td>\n<\/tr>\n
 <\/td>\nTicks:<\/strong>Defines the number of Y Axis intervals<\/p>\n\n\n\n\n\n\n\n\n\n\n
Min and Max:<\/strong><\/td>\nThe max value cannot be exceeded, so only set Max <\/strong>if you know what the max should be, or if you are only interested in showing up to a maximum value. The same applies to Min<\/strong>. Min\/Max can be left out (no limit set), or assigned a numerical value (the limit), or assigned an event (a variable limit). For example, you might use source data that returns the max value of the Y Column<\/strong>: that would be a good variable (event) maximum to use.<\/td>\n<\/tr>\n
Visible:<\/strong><\/td>\nIf this is not selected (select the check box or let an event determine this), the X Axis<\/strong> values do not appear along the X Axis<\/strong>.<\/td>\n<\/tr>\n
Label:<\/strong><\/td>\nThis can be blank, or add a label (value or event) to be displayed alongside the Y Axis<\/strong>.<\/td>\n<\/tr>\n
Enable Gridlines:<\/strong><\/td>\nEnable or disable gridlines.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
Tick Format:<\/strong><\/td>\nFormat the Y Column<\/strong>, which is displayed along the Y Axis<\/strong>. For example, if your Y Column<\/strong> is a dollar value, you can type in the dollar $<\/strong> symbol. Your labels would then look like $ 50.00, $ 25.00 and so on. Other formatting to use are the signs (+\/-), the comma (for a thousands separator),<\/strong> and precision symbols. You can use these together, for example \"$ ,\" displays the currency symbol and has a thousands separator.<\/td>\n<\/tr>\n
Scale Type:<\/strong><\/td>\nThe default option is Linear<\/em> (showing the actual values). Logarithmic scale (Log<\/em>) displays a logarithmic calculation, which is useful when you have a wide range of values to display. Tip<\/strong>: If using Log<\/em>, show this in your label. If you set this as an event, then the user can toggle between the log and linear scale quite easily, with the help of a combo box.<\/td>\n<\/tr>\n
Log Gridlines:<\/strong><\/td>\nNote: This only applies to the Log<\/em> Scale Type<\/strong>. Options are: Major Only<\/em>, and Major and Minor<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
Right Y Axis:<\/em><\/strong><\/td>\nThis is the same as the Left Y Axis, and can be used instead of or together with the Left Y Axis. It is useful to have these two separate axes if there are series with very different expected values; this way, all series can be better scaled to show up well in the chart. Another use of having both Y Axes would be to show different types of measures. For example, show dollars along the Left Y Axis, and counts along the right Y Axis.
\n Note that this axis is only used if Right<\/strong> is selected as the Y Axis in one or more series.
\n The Right Y Axis is pre-configured. This axis has the same components as the Left Y Axis.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Other:\u00a0<\/strong>This is where you can configure the general chart appearance, such as orientation.\u00a0<\/p>\n\n\n\n\n\n\n
Orientation:<\/em><\/strong><\/td>\nCharts default to vertical. If you change this to horizontal, then your Y Axis is plotted along the horizontal, and your primary values (X Axis<\/strong>) move to the vertical. Horizontal is useful if you are expecting a lot of X Values, as the legends stack neatly underneath each other (horizontally).<\/td>\n<\/tr>\n
Legend:<\/em><\/strong><\/td>\nThe legend displays the values of the X Axis Column<\/strong>.<\/td>\n<\/tr>\n
Legend Position:<\/em><\/strong><\/td>\nThis option only appears if you select the Legend<\/strong>. Right by default. This can be Left<\/em>, Right<\/em>, Top<\/em>, or choose Top-inside<\/em> if you have limited space.<\/td>\n<\/tr>\n
Tooltip:<\/em><\/strong><\/td>\nTooltips show the Y value when you hover your mouse over that area of the chart (e.g. over a bar).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\n<\/div>\n
\n

Tutorial<\/h3>\n<\/div>\n
\n

You can put a chart together in a matter of minutes, as most of the chart options are preconfigured.<\/p>\n<\/div>\n

\n
\"stackedbarchart\"<\/div>\n<\/div>\n
\n

Follow the step-by-step instructions for adding this chart.<\/p>\n

\n

Step by Step: Adding a Stacked Bar\u00a0Chart<\/h3>\n

Before you start, open a new tab in Explorer and add a new page in grid<\/a>\u00a0layout.<\/p>\n

If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.<\/p>\n

Step 1. Add and configure Source Data<\/strong><\/p>\n

\"configuredatasource3\"<\/p>\n

Click Add Data<\/strong>, then select the Dataset<\/strong> option. Select the Training<\/em> Datasource, then click LandCostsBudgetVersusSpent<\/em> and Add<\/strong>. Configure as follows:<\/p>\n