ChartsPLUS 3.0 offers the ability to customize charts at runtime. In addition to having the ability to select standard charts from a chart picker ChartsPLUS also offers a powerful Combination Chart Wizard and Chart Editor to customizing chart properties at runtime.

In this blog we look at how we can convert a simple column chart into a stacked column, line dual axes chart.

In this example we will creating a combination chart to compare Sales, Costs (multiple measures: Storage Cost, Transportation Cost and COGS) and Gross Margin %.

You can view an online demo below:

 

Below is the screenshot of the data source, we have the following measures: Gross Sales, Storage Cost, Transportation Cost, COGS (Cost) and Gross Margin%. For this demo purpose we want to have the Sales measure in one column, all the Cost measures stacked in a second column and the Gross Margin % as a line on the second axes (%).

chart-menu-data-source

 

Add ChartsPLUS to the application layout, under the Additional Properties of the Chart, go to General>>Chart Menu>>Chart Menu and toggle the Enabled value ON under General properties.  This property enables the Chart Menu at run time.

chartmenu-enable

The chart initially appears as below:

chartmenu-chart-initial

 

MODIFYING CHART


Observe the new Chart Menu button option available to us on the Top-left hand side of the application. To convert this chart into a Combination chart we select this button and go to Chart Menu>>Chart Type>>Combination…

chartmenu-chart-type-properties

 

In the Chart Preview popup toggle ON the Stackable property of the Storage, Transport and COGS graphs, this will set all the Cost Measures as a new stacked column. Toggle the Secondary Axis property of Gross Margin% to ON and set the Chart Type to Line.

chartmenu-combo-properties

 

Click Apply. This ensures all the Cost graphs are in a stacked column along with the Sales column, while the Gross Margin% is represented in the same Chart on a separate axis. The chart now looks something like:

chartmenu-combo-initial

 

Modifying Chart Editor Properties:


Once again select the Chart Menu button and go to Chart Type>>Chart Editor. Under Graphs let us select the Gross Margin% graph to modify its properties.

chartmenu-chart-editor-properties

 

Under Titles & Labels change the Title to ‘GM%‘. Toggle the Show Value Labels property to ON.

chartmenu-gm-properties

 

Also, under Value Axes select Secondary Axis and set its Title property to ‘Gross Margin%’. This serves to represent the fact that our Gross Margin% line graph is represented on a separate value axis. Click Apply.

chartmenu-axis-label

 

Our resultant chart appears as follows:

chartmenu-combo-final

You can request a trial version of ChartsPLUS from here.