Design Studio ChartsPLUS: Adding and Configuring Guides
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:
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.
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.
Our initial chart appears as shown below:
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.
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.
Under the LINE category set the Line Thickness to 2, set the Line Color to #E8273A and set the Dash Length to 5.
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.
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.
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:
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:
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:
if (DROPDOWN_1.getSelectedValue()== “Summer”)
if (DROPDOWN_1.getSelectedValue()== “Fall”)
if (DROPDOWN_1.getSelectedValue()== “Winter”)
if (DROPDOWN_1.getSelectedValue()== “Spring”)
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.
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:
For additional information on ChartsPLUS and to download a free trial click here.