416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
This is the support page for the legacy Dundas Dashboard application. For assistance with the current Dundas BI application please click here.
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
Modified on Mon, 26 May 2014 11:21 AM Categorized as Chart, KPIs, Legend, Level-Expert, Samples, Script Library, Scripting, Virtual Tables


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.


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


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



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:

    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;


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



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.