Marimekko

Configuration Options

axesFontColor

Type: color
Default: "#8A8D8E"

Font color for the axes labels

axesFontFamily

Type: string
Default: "Open Sans"

Font type for the axes labels

axesFontSize

Type: undefined
Default: undefined

undefined

chartName

Type: string
Default: "Marimekko"

Name of chart for Reporting.

height

Type: number
Default: 250
Units: px

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

labelTextColor

Type: color
Default: "#333333"

Font color for the labels

labelTextSize

Type: number
Default: 14
Units: px

Font size for the labels

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: "Open Sans"

titleTextColor

Type: color
Default: "#333333"

Font color for the titles

titleTextSize

Type: number
Default: 18
Units: px

Font size for the titles

tooltipBackgroundColor

Type: color
Default: "#555555"

Fill color for the tooltip

tooltipTextColor

Type: color
Default: "#FFFFFF"

Font color for the tooltip text

tooltipTextSize

Type: number
Default: 14
Units: px

undefined

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 250
Units: px

Data Definition

Category

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

function (line) { return line[0] === undefined ? undefined : String(line[0]); }

Series

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

function (line) { return line[1] === undefined ? undefined : String(line[1]); }

Value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

function (line) { return Number(line[2]); }

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  //Category, Series, Value
  ['North', 'Jan', 10000],
  ['North', 'Feb', 8000],
  ['North', 'Mar', 6000],
  ['North', 'Apr', 4000],

  ['South', 'Jan', 8000,],
  ['South', 'Feb', 7000,],
  ['South', 'Mar', 6000,],
  ['South', 'Apr', 3000,],

  ['East', 'Jan', 8000],
  ['East', 'Feb', 6000],
  ['East', 'Mar', 6000],
  ['East', 'Apr', 7000],

  ['West', 'Jan', 3000],
  ['West', 'Feb', 4000],
  ['West', 'Mar', 3000],
  ['West', 'Apr', 2000],
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '500px'
  })
  .append('g')
  .attr('transform', 'translate(56,96)')
  .chart('Marimekko')
  .c({
    width: 400,
    height: 300,
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);