Cluster Bar Chart in Sugar

By Craig Cavanaugh • December 14th, 2015
Audiences: End Users, Developers

We have recently developed a new Cluster Bar Chart with customization options to complement Sugar's Dashlets collection. Let’s briefly review Sugar Dashlets and see how the new UpCurve Cloud Cluster Bar Chart enhances a Dashboard.

Sugar Dashlets offer an effective way for users to get essential information presented in a concise, meaningful view. Users have the ability to configure Dashboards with a variety of Dashlet types offered within Sugar. 

Sugar Dashlets include:

  • List View
  • Activities/History Dashlets
  • Opportunity Metrics
  • Cases Summary
  • Saved Reports Chart Dashlet (my favorite)

Combining both List View and Saved Reports Chart Dashlets makes a powerful Sugar Dashboard.

Saved Reports Chart Dashlets use Sugar’s standard report chart objects (Pie, Line, and Bar Charts all can be used as a Saved Reports Chart Dashlet). 

Bar Charts are the most popular type used for Dashlets. In Sugar, there are two different types of bar charts: simple and sacked. Both (shown below) will serve most users needs.

Simple Bar ChartStacked Bar Chart

Figure 1

Figure 2

Simple Bar Chart

A simple bar chart shows one solid column for each category of data. The columns represent some numeric value for each category and is the most commonly used chart for general totaling and counts across categories. In this type of bar chart, the column colors provide little more than simply making it easy to read. The heights of the columns are more important than the colors. In the above example (Figure 1), let’s assume we’re looking at total Sales for three Salespersons. We can easily see that Salesperson ‘c’ has sold more Salesperson ‘a’.

Stacked Bar Chart

A stacked bar chart shows columns with sections stacked on top of one another. These sections provide an additional layer of data for each category. The color is much more important in a stacked bar chart as it shows proportions of another value for each category. Unlike the simple bar chart, the stacked bar chart uses both color and size to tell us something about the column values.

In the above example (Figure2), the color shows a second layer of data for each Salesperson – such as Products. We see Salespersons ‘a', ‘b’ and ‘c,' who sell Products ‘orange', ‘light blue’, and ‘dark blue’.

Both the simple bar chart and stacked bar chart show how each Salesperson is performing in total sales. However, the stacked bar chart shows each Salesperson’s specific strengths. In the stacked bar chart (Figure 2) Salesperson ‘c’ sells the most Products, but Salesperson ‘a’ does a better job at selling Product ‘dark blue’.

Stacked bar charts are better for showing proportions visually, but they are sometimes difficult to focus in on the value for each column section. 

For example, seeing the values for the ‘dark blue’ product is easy since those sections start at the bottom axis, they begin at 0 and then top off at a number (just like the simple bar chart). However, the values of the ‘light blue’ product are a bit trickier. To focus on their values, you have to hover over the ‘light blue’ column section or guestimate the value by seeing where the bottom of the ‘light blue’ starts and ends using the markers on the y-axis.

This is where a Cluster Bar Chart would be more helpful – as shown below.

Cluster Bar Charts

A cluster bar chart allows columns to break out into another series.

Figure 3

Using the example we just reviewed, you can see how a cluster bar chart provides the same proportional functionality as a stacked bar chart, but it also offers the advantage of comparing the values more easily against the y-axis.

As shown below in Figure 5, it’s easier to see the value of the ‘light blue’ product in a cluster bar chart.

Stacked Bar ChartCluster Bar Chart

Figure 4

Figure 5

We can see a cluster bar chart is an improved way to view the data in our examples above. Unfortunately, Sugar does not have a cluster bar chart option – until now!

One of our developers, Silviu Bratulescu has created the UpCurve Cloud Cluster Bar Chart for Sugar. In the next section, we'll assess how this chart increases the value of Sugar's Dashlet arsenal.

UpCurve Cloud Cluster Bar Chart

The UpCurve Cloud Cluster Bar Chart was developed because Sugar users wanted a way to chart multiple series of data in a single chart.

Although Sugar does not offer a cluster bar chart, it does offer a way to display multiple charts on a single a dashboard that is visually appealing, however, there are some scenarios where breaking up data into multiple charts is not as effective as a single chart containing multiple data elements.

One of our clients recently needed to compare sales figures for ten of their top products across the past three years. If we had done this with Sugar Dashlets and Charts, it would have been challenging to present on a single dashboard. It could have been done with multiple charts, but it would be difficult to analyze the data.

The most efficient way to do it is with a cluster bar chart that shows each product as categories and the three-year comparison as sets of columns. Much like we just saw above in Figure 3 let's define ‘a’, ‘b’, and ‘c’ as the products and the colored columns represent each of the three years.

Let’s proceed to use the year to year comparison scenario needed by our client, and see how the Cluster Bar Chart provides a solution:

  • The client has 4 products, not 10. They sell: Coffee, Tea, Milk, and Sugar.
  • They want to compare the current year sales against last year’s sales, and also against the year before that. 

We need Current Year, Last Year, and 2 Years Ago. We’ll abbreviate those figures in our charts as CYTD (Current Year To Date), LYTD (Last Year To Date), and L2YTD (Last 2 Years To Date) keeping in mind that the point is that the client wants to see how these products have performed over the last three years.

If we try to use existing Sugar Dashlets, one option would be to break up the product in a year-to-year comparison into three simple bar chart dashlets (one for each year) as seen below:

The above charts would work, but you would have to move back and forth through each chart to analyze the data. In our example chart we are only showing four products, where the clients final output needs to have 10. It's easy to see that when adding more columns the charts would get a bit cramped.

Another problem with this solution is that the y-axis grows for each chart. You can see that chart 3 looks like the Sugar sales (orange column) are the same size as last year, but more Sugar was sold. The orange columns only look the same size, because the y-axis’s ceiling rises to the maximum value per chart. Visually comparing the two last charts is misleading.

Another option is to create a single stacked bar chart to show the year to year comparison. Below are two examples of this attempt. One that shows the three years as the columns, and another chart that shows the products as columns.

You can see that although both charts are accurate, neither chart is easy to see the three-year comparison across products. The sections all have to be broken apart and pieced back together in the reader’s head to make sense of them.

The best solution to the scenario is a cluster bar chart. Shown below is the UpCurve Cloud Cluster Bar Chart solution.

The UpCurve Cloud Cluster Bar Chart quickly displays the year to year comparison among the four products.

The yearly figures are neatly stacked next to each other and grouped by each product. The columns are sorted so that they visually show the year progression as it should look. For example, it is easy to see that Sugar sales have increased over each year and that Milk has taken a sharp drop over the last year.

The y-axis makes sense as it shows the maximum value needed for all the data. Within the bar chart you can set the order of the x-axis. For example if you want the Sugar product to show first in your chart, the standard charts in Sugar only allow the x-axis to be listed alphabetically – as seen in the previous examples above. Those charts would have shown Sugar as the third section, not the first.

Another feature of the W-Sytems Bar Chart is the ability to customize the color. Here’s the same chart using earth tones to draw more focus on the data correlation, rather than loud column colors.

The UpCurve Cloud Cluster Bar Chart is highly scalable. The Bars will narrow as more categories are added to the x-axis. The chart can be placed on the home screen dashboards or even in the Intelligence Pane in List and Record views. Again, it will scale to fit the screen.

Each UpCurve Cloud Cluster Bar Chart is customizable. Clicking on the chart’s settings will show the following screen.

Some highlights of the above customizations are:

  • Configure chart for both standard or custom modules

  • Choose several summary options for data

  • Use any field for x-axis categories

  • Set the x-axis sort to any field

  • Configure up to five series (columns)

  • Set color for each column

  • Use the chart in Record Views, not just the Home Screen. The ‘Relate to current record’ is used for Record View
    versions of the chart.

Cluster Bar Chart Implementation 

If the UpCurve Cloud Cluster Bar Chart is something you would like to see in your Sugar instance, please contact us and we will be happy to provide you with more information.

More From This Author
Craig Cavanaugh
Consulting Team Manager at UpCurve Cloud