New Charts Library

Common Charts

The MooD software team are pleased to introduce Apache ECharts as our new chart library.

The team have been hard at work replacing the most commonly used charts with this library: Column, Line, Pie, Doughnut, Bar, Area, and Radar.  Over the next few iterations we will replace other charts in the library and extend the possibilities for presenting your data, even further.

There are 6 key changes to note:

• The charts look fresh and modern out of the box
• Define the data and shape of the data on the go; no more having to aggregate the data first, our new charts will do that for the user
• Get to data from a simple query, by following relationships
• Change the chart type on the fly; start off with a column chart, but at the press of a button see what it looks like as a pie chart
• Easily lay line over column to represent two values, and add a secondary axis
• All the options to configure a chart are in one place in a new, intuitive side settings panel

To Note:  we have not directly replaced the old charts with the new ones.  This was to ensure the new charts would not be constrained moving forward and your upgrade process to MooD 17 would be minimal, allowing you to leverage these features at your own pace.

That means your existing charts will still look and feel the way they do now.  We have deprecated the existing charts, meaning we will no longer be making improvements to them; however, they are still available for use.

They deprecated charts can be found at the bottom of the navigation bar, under Charts -> Deprecated.

How to:

1. Add a chart to the canvas:
   1. On the navigation bar to the left of Business Architect, under Gallery tab then the Charts sub-tab, you will find a new icon labelled Common Charts
   2. Drag and drop this icon onto the canvas
   3. The Settings pane will appear to the right of the canvas, which houses all the settings options pertinent to the chart
2. Define Data Source
   1. Select a data source, either from the dropdown, or by designing a new query
   2. Data sources can be in the form of queries, relationships, hierarchies or measures.  Top Tip: you can get to any data within the repository if it is somehow related to the query you have as your data source, see the Gif below:
3. Define Data to be Shown
   1. Click on the plus sign for the chart areas: e.g., the X-Axis
   2. Choose the field or value you want to represent
   3. Make sure to have a value in the Value area, otherwise the chart will remain blank
   4. You can add multiple values to the chart and represent them as other chart types (where appropriate), for example a line chart over a column chart.  You can also change a value to show on a secondary axis.
   5. You can also add a further dimension to your chart via the Series area, for example if you wanted to split up total cost by project billable.  These series can also be stacked.
4. Refine Data Shown
   1. You can further refine how your data is shown, by filtering and sorting
      1. Click on the Value field
         1. You can change the title displayed for the value
         2. Change the value to one of COUNT, SUM, MIN, MAX, AVG
         3. Add a secondary axis
         4. Change the chart type of a specific value
         5. Set the value to Cumulative, depending on what you are trying to represent, for example showing the overall contribution of a category
         6. Set the value to Percentage
   2. At the bottom of the chart area, under Options you have the option to Sort by Value, with a dropdown of your options, which will then allow you to filter by the Top n, for example if you only want to show the top 5 billable projects by cost.
   3. When clicking on fields within the X-axis/Categories/Segments area, or the Series area, you may be given the following options:
      1. Show all pick items even where no values exist (ticked by default)
      2. Reverse the order of items
5. Applying Variables
   1. If your data source has variables, these will be ignored by default, so that the chart populates in Business Architect.  To set these variables, go to the Variables tab in the Settings pane, 
6. Styling your chart
   1. Go to the Style tab in the Settings pane on the right
   2. There will be a number of sub-tabs, how many will depend on how many dimensions you have added to your chart (e.g., a secondary axis).
   3. In the first sub-tab, Chart, you will find the text settings.  These settings will change all text in the chart; i.e. chart title, axis labels, data labels etc.  You can set the font and colour here and then on individual sub-tabs you can change the size for each, for example having a large chart title, but smaller axis labels.
   4. Data labels are defaulted to not show, but you can add these and customize what shows (value, name, or both) under the sub-tab.  You can also set how they display, once switched on.
   5. The legend is also switched off by default, unless there are more than one value or series.  The legend settings will be shown once you switch it on.