Guides enable one to set a single value or a range as reference points to other values in a Chart in order to make analysis easy for the user.

The process of creating and configuring Guides is demonstrated here in this Video Guide, where the process is explained step-by-step:

 

In this blog we will configure Guides on our Application that help show us the seasonal trends in Sales Revenue. We will use Guides to show the mean sales during each season and to also highlight areas where there is a dip in sales. At the end of this blog we will have created an Application resembling the one shown below:

chartsplus-guides-intro-display

 

ADDING AND CONFIGURING THE CHART


Add a ChartsPLUS 3.0 chart to the Layout Editor, and then assign a Data Source to the Chart. (In this situation we used a Custom Data Source>> Bring Your Own Data). The data we use in this instance is the Net Sales per region per month.

Clicking on the Data Source and opening up the Additional Properties panel shows the data that populates our chart, as represented below.

chartsplus-guides-data

 

We want to have the Regions represented on the Chart in the form of Stacked Columns. To do this we use the steps we learned in the previous blog. From the Chart Selection tab click on Wizards>> Combination Chart. In the combo chart popup select the five Regions and toggle ON the Stackable property for each. Click Apply.

chartsplus-guides-combination-chart-wizard

 

Our initial chart appears as shown below:

chartsplus-guides-combination-chart-initial

 

ADDING AND CONFIGURING THE GUIDES


Let us add our first guide by going to CONFIG>> Axes>> Guides. Add a new Guide to the application. Under the General category set the ID as Seasonal Trend. Set its Fill Color as #E8273A and its Fill Alpha as as  80%. Set its Value and …To Value options to Static Value>> 315. To ensure the Guide line stays Visible over the Chart check the Above checkbox.

chartsplus-guides-guide-config-1

chartsplus-guides-guide-config-2

 

Under the LABEL Category set the Label option to Spring Avg.(315). Set the Color to #E8273A, set the Font Size to 14 and check the Bold Label checkbox.

chartsplus-guides-guide-config-3

 

Under the LINE category set the Line Thickness to 2, set the Line Color to #E8273A and set the Dash Length to 5.

chartsplus-guides-guide-config-4

 

Now, we’ve added a Guide to our Chart which shows up as a red, dotted, horizontal demarcation.

So far this guide only shows us the Average Sales across regions for the Spring season. Further along in this blog we will use BIAL scripts to modify this guide to show Average Sales across all regions for each and every season.

The first guide we added is built upon a Static Value along the Value Axis. We now add another guide to highlight a selected region along the Category Axis.

Add another guide to the application. Under the GENERAL category set its ID as Problem Area. Set the Fill Color to #E8273A and the Fill Alpha to 25%. Under the Category… option set the type to Data Bound and select the Sep-15 value as shown. Under the …To Category option set the type to Data Bound and select the Nov-15 option. Check the Expand and the Above checkbox.

(Note the selected value highlighted in blue)

(Note the selected value highlighted in blue)

 

chartsplus-guides-guide-config-6

 

Under the LABEL category set the Label as Problem Season. Set the Color as #E8273A and Label Position as Top. Set the Font Size as 14 and check the Bold Label checkbox.

chartsplus-guides-guide-config-7

 

We have now set up a second guide that highlights the Problem Area of the Fall Season where overall sales are the lowest. Our Application appears as so:

chartsplus-guides-chart-intermediate

 

USING BIAL TO MODIFY GUIDES AT RUNTIME


From the Basic Components tab add a Dropdown Box to the Application. In the Properties View of the Dropdown go to Display>>Items and click on the Edit the Item List… button. In the Edit Items popup add the following values by clicking on the Insert button as shown:

chartsplus-guides-dropdown-items

 

Similary, in the Properties view, under Events>> On Select click on the Edit the Script… button and type in the following script in the Script Editor that pops up:

chartsplus-guides-dropdown-bial

if (DROPDOWN_1.getSelectedValue()== “Summer”)
{
CHARTSPLUS2_1.getGuides().atIndex(0).setToValue(“318”);
CHARTSPLUS2_1.getGuides().atIndex(0).setValue(“318”);
CHARTSPLUS2_1.getGuides().atIndex(0).setLabel(“Summer Avg.(318)”);
}

if (DROPDOWN_1.getSelectedValue()== “Fall”)
{
CHARTSPLUS2_1.getGuides().atIndex(0).setToValue(“256”);
CHARTSPLUS2_1.getGuides().atIndex(0).setValue(“256”);
CHARTSPLUS2_1.getGuides().atIndex(0).setLabel(“Fall Avg.(256)”);
}

if (DROPDOWN_1.getSelectedValue()== “Winter”)
{
CHARTSPLUS2_1.getGuides().atIndex(0).setToValue(“320”);
CHARTSPLUS2_1.getGuides().atIndex(0).setValue(“320”);
CHARTSPLUS2_1.getGuides().atIndex(0).setLabel(“Winter Avg.(320)”);
}

if (DROPDOWN_1.getSelectedValue()== “Spring”)
{
CHARTSPLUS2_1.getGuides().atIndex(0).setToValue(“315”);
CHARTSPLUS2_1.getGuides().atIndex(0).setValue(“315”);
CHARTSPLUS2_1.getGuides().atIndex(0).setLabel(“Spring Avg.(315)”);
}

Note: This script checks which option is selected in the Dropdown box and depending on the option it sets the Value… and …To Value options of the first Guide(Seasonal Trend) as mentioned in the script. It also changes the Label of the Guide accordingly. It chooses the first guide because the Index is set to ‘0’. Also, the average values can be datasource driven and be dynamically fed from any data source assigned to the application, in place of being Static Values configured while creating the Guide.

 

TESTING THE APPLICATION


Let us Execute the Application Locally by clicking the green Execute button, the Application initially shows us the two guides. The first guide shows us the Average Sales during Spring season and the second guide highlights the Fall Season where sales are the lowest.

chartsplus-guides-intro-display

 

By clicking on the Dropdown Box we can modify the guide to show us Average Sales during other seasons as well. For example, on selecting Winter from the Dropdown the Chart appears as so:

chartsplus-guides-guide-final

 

For additional information on ChartsPLUS and to download a free trial click here.