How to build a multi axes Bar chart
Visual Mining product’s core rendering engines share the same Chart Definition Language (CDL) language. While CDL is a text based language, NetCharts Designer offers a user interface with wizards and menus to design and style the charts, removing the need to learn CDL. The benefits include reduced development time, ease of development vs. manually defining […]
- Author:
- Visual Mining
- Date:
- October 6, 2014
- Category:
- Design Approaches, NetCharts Designer
Visual Mining product’s core rendering engines share the same Chart Definition Language (CDL) language. While CDL is a text based language, NetCharts Designer offers a user interface with wizards and menus to design and style the charts, removing the need to learn CDL. The benefits include reduced development time, ease of development vs. manually defining templates, and the ability to access some of the unique and innovative features only available with the NetCharts rendering engines.
Here’s a great example of using NetCharts Designer to build a multi axes bar chart to present complementary data within the same chart.
-
Launch NetCharts Designer 7.0, click the Create a new Project button and name the project MultiAxesBar.
-
Then click the Create a new Chart button and select Bar as the Chart type.
-
Expand the Axes node and click to highlight Left Axes.
-
Click the New Axis button once to add the second left axis. Leave Stack Multiple Axes: checked.
-
Click the Left 1 tab and locate the Stacked Axis Layout box. Set the Axis Gap: to 15 pixels and the Display Size: to 50%.
-
Click the Left 2 tab and repeate the steps, but set the Axis Gap: to 0 pixels and the Display Size: to 50%.
-
In the Presentation tab, click to highlight Bars.
-
In the Bar Sets box on the far right side, set the Bar Sets Type: dropdown to Rows.
-
Then click the New Bar Set button once to have a second bar set.
-
Click the Bar Set 1 tab, then click the Color: button and choose a color. In this example the selected color is grey.
-
In the Labeling: dropdown, select External.
-
Click the Bar Set 2 tab, then click the Color: button and choose a color. In this example the selected color is dark red or maroon.
-
In the Labeling: dropdown, select External.
-
In the left Bars box, select Undefined in the Corners: dropdown.
-
A bit lower in the Bar Highlights: dropdown, select Undefined.
-
At this point, you will only see a single Bar Set. Lets add some data to the bars through the bottom Variable Binding tab.
-
Expand the Data node, and click to highlight Bar Values
-
In the CDX Variable Name column, check the checkbox for DATASET1 and DATASET2.
- In the Format column for DataSet1, paste in 1.86,1.49,1.21,1.42,1.59
-
In the Format column for DataSet2, paste in -5.1,-7.2,-6.7,-1.3,-1.0
-
Return to the bottom Presentation tab and click to highlight Bars.
-
In the Bar Sets box, set the Axis Mapping dropdown of Bar Set 1 to Bottom 1, Left 2.
-
Click the Bar Set 2 tab, set the Axis Mapping to Bottom 1, Left 1.
-
Return to the Axes node and click Left Axes.
-
Click the Left 1 tab and in the Number Format: dropdown, select percentformat.
-
Uncheck the Show Tic Labels: to remove the Left 1 axis line and tic labels.
-
Click the Left 2 tab and in the Number Format: dropdown, select dollarsandcents.
-
Uncheck the Show Tic Labels: to remove the Left 2 axis line and tic labels.
-
Still in the Axes node, click Bottom Axes and uncheck the Show Tic Labels: to remove the bottom axis line and tic labels.
-
The next step is to add a Note in order to display labels in the center of the chart. There isn’t an actual axis there, so by using Notes it allows you to specify a location or coordinate of where the Note label should be placed.
Click to highlight Notes
and click on the New NoteSet button to add a Note.
-
Click on the Note 1 tab, then in the Text: box, enter 2007.
-
In the Note X: box, enter 0 and for Y: enter 175
-
In the Mapping dropdown, select Bottom 1 for X and Pixel for Y.
-
Lets go back to the bottom Variable Binding tab to add some data for additional Note labels.
-
Click to highlight Notes.
-
In the CDX Variable Name column, check the checkbox for NOTESET1.
-
In the Format column for NOTESET1, replace the default (“Text1”, 50, 50) and paste in (“2007”,0.0,150.0),(“2008”,1.0,150.0),(“2009”,2.0,150.0),(“2010”,3.0,150.0),(“2011”,4.0,150.0)
-
Return to the Presentation tab and click to highlight Notes.
-
In the Note Text box, select arial12ptbold in the Text Style: dropdown.
-
While in the Presentation tab, click to highlight Legend.
-
In the Display box, check the Show Legend: check box, then select arial10pt in the Label Style: dropdown
-
Return to the bottom Variable Binding tab to add text for the legend items.
-
Click to highlight Legend Items.
-
In the CDX Variable Name column, check the checkbox for LEGENDITEMS.
-
In the Format column for LEGENDITEMS, replace the default “Set1” and paste in “Earnings Per Share”,”Same-Store Sales”
You’re finally done! Here’s the finished Multiple Axes Bar chart.
If you have any questions, feel free to contact us at support@visualmining.com
Comments are closed.