@domoinc/image-svg v1.1.0

ImageSVG

Configuration Options

chartName

Type: string
Default: "Image"

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.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showErrorMessage

Type: boolean
Default: true

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

ImageURL

Type: string

Default validate:

function (d) { return true; }

Default accessor:

function (line) { return String(line[1]); }

Name

Type: string

Default validate:

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

Default accessor:

function (line) { return String(line[0]); }

Events

Dispatch Events

External Events

Example

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

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

//Setup some fake data
var data = [
  ['Moe Rogerson', 'data:image/jpeg;base64,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'],
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '500px'
  })
  .append('g')
  .attr('transform', 'translate(150, 150)')
  .chart('ImageSVG')
  .c({
    width: 200,
    height: 500
  });

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