Creating a Marimekko Chart
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 market segment
-
Individual share of competitors in a market segment
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 the top 3 revenue earning states (California, Washington, and Nevada) looks like this:
{
"chart": {
"caption": "Top 3 Electronic Brands in Top 3 Stores",
"subcaption": "Last month",
"aligncaptiontocanvas": "0",
"yaxisname": "Statewise Sales (in %)",
"xaxisname": "Brand",
"numberprefix": "$",
"showPlotBorder": "1",
"plotBorderThickness": "0.25",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Bose"
},
{
"label": "Dell"
},
{
"label": "Apple"
}
]
}
],
"dataset": [
{
"seriesname": "California",
"data": [
{
"value": "335000"
},
{
"value": "225100"
},
{
"value": "164200"
}
]
},
{
"seriesname": "Washington",
"data": [
{
"value": "215000"
},
{
"value": "198000"
},
{
"value": "120000"
}
]
},
{
"seriesname": "Nevada",
"data": [
{
"value": "298000"
},
{
"value": "109300"
},
{
"value": "153600"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'marimekko',
renderAt: 'chart-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Top 3 Electronic Brands in Top 3 Stores",
"subcaption": "Last month",
"aligncaptiontocanvas": "0",
"yaxisname": "Statewise Sales (in %)",
"xaxisname": "Brand",
"numberprefix": "$",
"showPlotBorder": "1",
"plotBorderThickness": "0.25",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Bose"
}, {
"label": "Dell"
}, {
"label": "Apple"
}]
}],
"dataset": [{
"seriesname": "California",
"data": [{
"value": "335000"
}, {
"value": "225100"
}, {
"value": "164200"
}]
}, {
"seriesname": "Washington",
"data": [{
"value": "215000"
}, {
"value": "198000"
}, {
"value": "120000"
}]
}, {
"seriesname": "Nevada",
"data": [{
"value": "298000"
}, {
"value": "109300"
}, {
"value": "153600"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The Marimekko chart shown above, when seen in the default mode, helps you instantly figure out the following:
-
The top three manufactures within each state (Bose, Dell, and Apple) and the individual sales of each manufacturer within a state, indicated by the partitions in the stacked column.
-
The total sales by manufacturers across all three states for the given duration (a month, in this case), shown on top of the stacked column for each manufacturer. For example, the total sales for Bose, $848K, is shown above the first column.
-
The percentage market share for each manufacturer, shown as a percentage label between the stacked columns. For example, Bose has a total market share of approximately 46%, as shown by the label between the data plots for Bose and Dell.
As you can see in the chart data, the actual sales data has been provided. The Marimekko chart automatically converts these values into percentage values based on the size of a market segment and the percentage share held by competitors in each segment.
The percentage share of each manufacturer within a segment is shown in the tooltip text for that partition. For example, the percentage share for Bose in Washington is approximately 25%; it can be seen in the tooltip text shown when the mouse pointer is hovered over the partition for Washington in the first column.
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:
Given below is a brief description of the attributes used to render the above Marimekko chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify the type of chart you want to render. To render a Marimekko chart, the value for this attribute will be |
|
It is used to specify the container object where the chart will be rendered. |
|
It is used to specify the width of the chart. |
|
It is used to specify the height of the chart. |
|
It is used to specify the type of data that will passed to the |
|
It is used to specify the source from where the data will be fetched, depending on the value passed to the |
|
It is used to specify the chart caption. This attribute belongs to the |
|
It is used to specify the chart sub-caption. This attribute belongs to the |
|
It is used to specify the x-axis name. This attribute belongs to the |
|
It is used to specify the y-axis name. This attribute belongs to the |
|
It is used to specify the character that will precede all numeric values on the chart, for example, the $ symbol for the currency symbol. This attribute belongs to the |
|
It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the |
|
It is used to specify the value for a data item. This attribute belongs to the |
|
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 |