Blog

How to build a multi axes Bar chart

Author:
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.

MultiAxesBar

  1. Launch NetCharts Designer 7.0, click the Create a new Project button and name the project MultiAxesBar.

    Bar_create_new_project

  2. Then click the Create a new Chart button and select Bar as the Chart type.

    Bar_create_new_chart

  3. Expand the Axes node and click to highlight Left Axes.

    Bar_axes_leftaxes

  4. Click the New Axis button once to add the second left axis. Leave Stack Multiple Axes: checked.

    Bar_new_axes

  5. 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%.

    Bar_stacked_axis_layout

  6. Click the Left 2 tab and repeate the steps, but set the Axis Gap: to 0 pixels and the Display Size: to 50%.

    Bar_stacked_axis_layout2

  7. In the Presentation tab, click to highlight Bars.

    Bar_Bars

  8. In the Bar Sets box on the far right side, set the Bar Sets Type: dropdown to Rows.

    Bar_barsets_rows

  9. Then click the New Bar Set button once to have a second bar set.

    Bar_new_barset

  10. Click the Bar Set 1 tab, then click the Color: button and choose a color. In this example the selected color is grey.

    Bar_barset1_color

  11. In the Labeling: dropdown, select External.

    Bar_labeling_external

  12. 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.

    Bar_barset2_color

  13. In the Labeling: dropdown, select External.

    Bar_labeling_external

  14. In the left Bars box, select Undefined in the Corners: dropdown.

    Bar_corners_undefined

  15. A bit lower in the Bar Highlights: dropdown, select Undefined.

    Bar_bar_highlights

  16. At this point, you will only see a single Bar Set. Lets add some data to the bars through the bottom Variable Binding tab.

    Bar_variable_binding

  17. Expand the Data node, and click to highlight Bar Values

    Bar_data_barvalues

  18. In the CDX Variable Name column, check the checkbox for DATASET1 and DATASET2.

    Bar_data_cdx_variable_name

  19. In the Format column for DataSet1, paste in 1.86,1.49,1.21,1.42,1.59
  20. In the Format column for DataSet2, paste in -5.1,-7.2,-6.7,-1.3,-1.0

    Bar_data_format

  21. Return to the bottom Presentation tab and click to highlight Bars.

    Bar_Bars

  22. In the Bar Sets box, set the Axis Mapping dropdown of Bar Set 1 to Bottom 1, Left 2.

    Bar_barset1_axismapping

  23. Click the Bar Set 2 tab, set the Axis Mapping to Bottom 1, Left 1.

    Bar_barset2_axismapping

  24. Return to the Axes node and click Left Axes.

    Bar_axes_leftaxes

  25. Click the Left 1 tab and in the Number Format: dropdown, select percentformat.

    Bar_axes_left1_format

  26. Uncheck the Show Tic Labels: to remove the Left 1 axis line and tic labels.

    Bar_axes_left1_show_tic_labels

  27. Click the Left 2 tab and in the Number Format: dropdown, select dollarsandcents.

    Bar_axes_left2_format

  28. Uncheck the Show Tic Labels: to remove the Left 2 axis line and tic labels.

    Bar_axes_left2_show_tic_labels

  29. Still in the Axes node, click Bottom Axes and uncheck the Show Tic Labels: to remove the bottom axis line and tic labels.

    Bar_axes_bottom1_show_tic_labels

  30. 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

    Bar_notes

    and click on the New NoteSet button to add a Note.

    Bar_notes_new_noteset

  31. Click on the Note 1 tab, then in the Text: box, enter 2007.

    Bar_notes_text

  32. In the Note X: box, enter 0 and for Y: enter 175

    Bar_xy_location

  33. In the Mapping dropdown, select Bottom 1 for X and Pixel for Y.

    Bar_notes_mapping

  34. Lets go back to the bottom Variable Binding tab to add some data for additional Note labels.

    Bar_variable_binding

  35. Click to highlight Notes.

    Bar_data_notes

  36. In the CDX Variable Name column, check the checkbox for NOTESET1.

    Bar_data_notes_cdx_variable_name

  37. 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)

    Bar_data_notes_format

  38. Return to the Presentation tab and click to highlight Notes.

    Bar_notes

  39. In the Note Text box, select arial12ptbold in the Text Style: dropdown.

    Bar_notes_text_style

  40. While in the Presentation tab, click to highlight Legend.

    Bar_legend

  41. In the Display box, check the Show Legend: check box, then select arial10pt in the Label Style: dropdown

    Bar_legend_labelstyle

  42. Return to the bottom Variable Binding tab to add text for the legend items.

    Bar_variable_binding

  43. Click to highlight Legend Items.

    Bar_legend_legenditems

  44. In the CDX Variable Name column, check the checkbox for LEGENDITEMS.

    Bar_legend_cdxvariablename

  45. In the Format column for LEGENDITEMS, replace the default “Set1” and paste in “Earnings Per Share”,”Same-Store Sales”

    Bar_legend_format

 

You’re finally done! Here’s the finished Multiple Axes Bar chart.

MultiAxesBar

If you have any questions, feel free to contact us at support@visualmining.com

Comments are closed.