Marimekko charts are stacked column charts with columns of variable width. They are primarily used for marketing analysis.
The following three dimensions of marketing data can be represented using a marimekko chart:
Total value of a market segment
Combined share of all competitors in a particular market segment
Individual share of competitors in each of the market segments
In this section, you will be shown how you can create a Marimekko Chart.
Creating a Marimekko Chart
A simple Marimekko chart that shows the Top 3 Electronic Brands( Bose, Dell and Apple) in Top 3 revenue earning States(California, Washington and Nevada) looks like this:
The marimekko chart shown above when seen in the default mode helps you instantly figure out the following:
Bose has a total market share of approximately 45% and Bose & Dell Combined together have a total market share of approximately 75%. This is deduced from the horizontal width of the stacked columns.
Within each segment, there are three manufacturers Bose, Dell and Apple whose share in a market segment is indicated by partitions in the stacked column.
The data structure needed to create the above Marimekko chart is given below:
As you can see in the data, actual sales/quantity data has been provided. FusionCharts XT Marimekko chart automatically converts these values into percentage values based on the size of each market segment and the percentage share held by competitors in each of the segments.
The percent share of each manufacturer within a segment can be seen by hovering over the column - the values are shown as tool-tips.
The height of columns can be used to compare the TAM (Total Available Market) per market segment.
Brief Explanation of the JSON Data Structure
In the JSON data, the attributes and their corresponding values are written in the following key-value pair format:
"<attributeName>": "<value>"
Given below is a brief description of the data structure used to create the above stacked column 2D chart:
| Attribute Name | Description |
|---|---|
type |
It is used to specify the type of chart you want to render. For example, to render a stacked column 2D chart, the value for this attribute will be stackedcolumn2d. |
renderAt |
It is used to specify the container object where the chart will be rendered. |
width |
It is used to specify the width of the chart. |
height |
It is used to specify the height of the chart. |
dataFormat |
It is used to specify the type of data that will passed to the chart object. This attribute takes two values: json, where the JSON data to render the chart is passed to the dataSource attribute, and jsonurl, where the relative path to a .json file is passed to the dataSource attribute. |
dataSource |
It specifies the source from where the data will be fetched, depending on the value passed to the dataFormat attribute. |
caption |
It is used to specify the chart caption. This attribute belongs to the chart object. |
subCaption |
It is used to specify the chart sub-caption. This attribute belongs to the chart object. |
xAxisName |
It is used to specify the name for the x-axis. |
yAxisName |
It is used to specify the name for the y-axis. |
numberPrefix |
It is used to specify the character that will precede all numeric values on the chart, e.g. $ for the currency symbol. |
label |
It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the category object array, which in turn belongs to the categories object array. |
value |
It is used to specify the value for a data item. This attribute belongs to the data object array, which in turn belongs to the dataset object array. |
seriesName |
It is used to specify a name for the dataset. This name is shown in the legend box rendered below the chart. This attribute belongs to the dataset object array. |
There! You have now seen how you can create a Marimekko chart.