416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Create a Mekko Chart

Hide navigation
RSS
Modified on Mon, 26 May 2014 11:21 AM Categorized as Chart, KPIs, Legend, Level-Expert, Samples, Script Library, Scripting, Virtual Tables

Overview

This article will show the steps on how to create a bar mekko chart. A Mekko chart (sometimes also called marimekko chart) is a two-dimensional bar chart that has varying column widths in addition to the varying heights of a regular bar chart.

Steps

Virtual Table

Setup the virtual table as shown below. Use the sample script here and create a manual virtual table:

SELECT 'Department A' Department Name, 1000 Budget, 500 Expense UNION ALL SELECT 'Department B' Department Name, 2000 Budget, 1000 Expense UNION ALL SELECT 'Department C' Department Name, 3000 Budget, 500 Expense

Virtual Table

Virtual Table


KPI

Create a KPI from the virtual table and set the following:

Measure: Budget
Axis: Expense
Splitter: Department Name


Define Axis and Splitter

Define Axis and Splitter



KPI

KPI



Create the chart

From the toolbox, drag an Area Chart control onto the canvas and drop the KPI on it. Drop a Legend control and point the area chart to this legend using its Legend property.

Place the following script on the Load Interaction of the dashboard that calculates the width of the bars based on the data:

  1. UNSUPPORTED UNLIMITED
    double insertLocation = 0;
    foreach (DashboardDataSeries series in AreaChart1.Series)
    {
    // Assumption: Each series contains one data point
    // the one datapoint has the height as its Y-Value and width as its X-Value
    double height = series.Points0.YValues0;
    double width = (double)series.Points0.XValue;

    series.Points.Clear();

    DashboardDataPoint dp = new DashboardDataPoint(insertLocation, height);
    insertLocation = insertLocation + width;
    DashboardDataPoint dp2 = new DashboardDataPoint(insertLocation, height);

    series.Points.Add(dp);
    series.Points.Add(dp2);
    }


Result

The resulting chart should look like this:

Mekko Chart

Mekko Chart



Related Topics


About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.