Home Explorer Studio Components Charts Charts (4.3.2) Bar Chart (4.3.2)

Bar Chart (4.3.2)

This article applies to versions 4.3.2 and earlier of P2 Explorer. For help on the latest version of the chart, see Charts.

Overview

The bar chart displays values in rectangular bars, where the length of each bar is proportional to its value. The following diagram shows the a bar chart control in design mode:

(See separate topics for: Line Chart, Stacked Bar Chart, Area Chart and Dot Chart.)

addingabarchart2

The chart has three mandatory selections (marked with an asterisk *) that have not been preconfigured: Source Data, at least one Series (define the Y Column), and the X Axis (define the Column). You’ll need to fill these in yourself.

Source Data: This is a mandatory selection. Your chart data comes from this source data.
Series: Your chart needs at least one series. Click Add for new series, or Remove to remove a series.
  The chart definitions here cover the elements of a Bar Series. Other types are Line Series, Stacked Bar Series, Area Series and Dot Series.
 
Type: Each series can be plotted to best suit your data. The available types are Line Series, Bar Series, Stacked Bar Series, Area Series, and Dot Series. Select this from the Type drop-down. (The default is Line Series.)
Y Column: This is mandatory selection. Select a value from the source data, or hook this up to an event. These values get plotted against the Y Axis.
Name: Give the Y Column 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 is the value TOTAL_AMT, if this value represents costs.
Name Column: As an alternative to Name, 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, and effectively splits the bar into separate, smaller groups (bars). For example, use the value COST_TYPE as a Name Column for Y Column TOTAL_AMT. Here, the TOTAL_AMT per COST_TYPE is shown as a separate bar.
Y Axis: Choose 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.
Filter Column and Filter Value: Use the Filter Column and Filter Value together, instead of the Name Column, if the Y Column values come from a column 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 Name. (More)
Color: Specify 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.
Colour Matcher: You can type in a reserved word to get the correct matching colour. For example, OIL gives you the correct values for the specific oil green. Note that Colour overrides Colour Matcher, so keep it empty if you want to use Colour Matcher. Colour matcher values you can use are OIL, GAS, NGL and WATER. 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.
Bar Size: If you want to specify a bar size, type a number here, for example 10, 20, 40 or 80. This determines the width of the bar, in pixels. Note that all the bar series on this chart will have the same width, and you only need to set this for one of the bar series. The bar size may be limited by Explorer, depending on bar padding and the available width for the chart.
Bar Padding: This is the padding (in pixels) between the different bars for an x-value. Note that bar size and bar padding values will be overridden by Explorer, if there is not enough room on the chart.
Axes: Each chart has an X Axis and either one or two Y Axes.
 
X Axis: The X Axis is the principle axis, horizontal by default, containing the values against which other values are then measured (for example, AREAS (X Axis) with allocated BUDGETS (Y Axis).
 
Column: Choose 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.)
Data Type: This defaults to String, and should be compatible with the Column. If Column can be represented as a number, then you can select Number from the drop-down (the third option is Time). If this is still not compatible with some of the series, then you will get a warning message.
Visible: If 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.
Values: Add one or more values to the existing values on the X Axis that are returned from the source data.
Label: This can be blank, or add a label (value or event) to be displayed below the X Axis.
Selected: Name an event here if you want to use the selected X Value in labels or as a parameter to other dataset queries. At run-time, click a band on the X Axis to select it.
Left Y Axis: The Left Y Axis, vertical by default, is used for plotting values of the X Axis. Note that this axis is only used if Left is selected as the Y Axis in one or more series (it is, by default). The Left Y Axis comes preconfigured.
  Ticks:Defines the number of Y Axis intervals

Min and Max: The max value cannot be exceeded, so only set Max 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. 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: that would be a good variable (event) maximum to use.
Visible: If 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.
Label: This can be blank, or add a label (value or event) to be displayed alongside the Y Axis.
Enable Gridlines: Enable or disable gridlines.
Tick Format: Format the Y Column, which is displayed along the Y Axis. For example, if your Y Column is a dollar value, you can type in the dollar $ 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), and precision symbols. You can use these together, for example "$ ," displays the currency symbol and has a thousands separator.
Scale Type: The default option is Linear (showing the actual values). Logarithmic scale (Log) displays a logarithmic calculation, which is useful when you have a wide range of values to display. Tip: If using Log, 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.
Log Gridlines: Note: This only applies to the Log Scale Type. Options are: Major Only, and Major and Minor.

Right Y Axis:This 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.
Note that this axis is only used if Right is selected as the Y Axis in one or more series.
The Right Y Axis is pre-configured. This axis has the same components as the Left Y Axis.Other:This is where you can configure the general chart appearance, such as orientation. 

Orientation: Charts default to vertical. If you change this to horizontal, then your Y Axis is plotted along the horizontal, and your primary values (X Axis) 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).
Legend: The legend displays the values of the X Axis Column.
Legend Position: This option only appears if you select the Legend. Right by default. This can be Left, Right, Top, or choose Top-inside if you have limited space.
Tooltip: Tooltips show the Y value when you hover your mouse over that area of the chart (e.g. over a bar).

 

Tutorial

You can put a chart together in a matter of minutes, as most of the chart options are preconfigured.

budgetbarchart

Follow the step-by-step instructions for adding this chart.

Step by Step: Adding a Bar Chart

Before you start, open a new tab in Explorer and add a new page in grid layout.

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.

Step 1. Add and configure Source Data

configuredatasource3

Click Add Data, then select the Dataset option. Select the Training Datasource, then click LandCostsBudgetVersusSpent and Add. Configure as follows:

  • Name: BudgetVersusActual
  • Query: LandBudgetAndSpent
  • Parameters:
    • selectedEndDate: (Datetime) 03/31/2015 12:00:00
    • selectedEntity: (Text) P2 Energy Solutions
    • selectedLevel: (Text) Corporate
    • selectedStartDate: (Datetime) 01/01/2015 12:00:00

We've added fixed parameters; you can get these to run off events if you'd prefer. Click Preview to see what the data looks like.

 

 Step 2.  Add and configure the Chart

configurebarchart2

Drag and drop a Chart control onto a grid cell. Configure as follows:

  • Source Data: BudgetVersusActual
  • Series:
    • Type: Bar Series
    • Y Column: (Text) Budget_amt
  • Axes:
    • X Axis:
      • Column: (Text) hierarchy_entity

Note that the Y Column and the X Axis Column are columns from the source data.

 

 Step 3.  All done!

budgetbarchart

Well done! You have configured a basic bar chart. Click the preview previewbutton button on the Studio toolbar, to see what your page will look like in run-time.

save Don't forget to save your page!

 

Leave a Reply

Your email address will not be published. Required fields are marked *