Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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:

"<attributeName>": "<value>"

Given below is a brief description of the attributes used to render the above Marimekko chart:

Attribute Name Description

type

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

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.
Similarly, xml and xmlurl are also valid values.

dataSource

It is used to specify 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 x-axis name. This attribute belongs to the chart object.

yAxisName

It is used to specify the y-axis name. This attribute belongs to the chart object.

numberPrefix

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 chart object.

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.

Top