Skip to content

Graphic

Jump to bottom Edit New page
William Lachance edited this page May 25, 2018 · 51 revisions

Home ▸ List of Options ▸ Graphic

Graphic Options

# aggregate_rollover

Links the lines in a multi-line graphic, thereby triggering the points in all of the lines that share the same x-axis value.

Possible values: {false, true}

# animate_on_load

Determines whether or not the line chart, or set of line charts in a multi-line chart, are animated on first load. If set to true, each line is animated from a flat line that is drawn at a line's median value to the line's final shape.

Possible values: {false, true}

# area

Determines whether to fill the area below the line. Note: does not work on multi-line charts.

Possible values: {true, false}

# baselines

Specifies whether to add any baselines to the chart. Baselines are horizontal lines that may specify, say, a goal or target to be reached. The option takes an array of objects, for instance:

var adi_baselines = [{value:160000000, label:'a baseline'}];
MG.data_graphic({
    ...
    baselines: adi_baselines
})

# chart_type

Specifies the graphic type. When a graphic is of type missing-data it display a message indicating that its data is currently unavailable. If you would like the graphic to show a placeholder background image as well, you may wish to use the one in the examples. We will be replacing the image with a SVG placeholder soon that will be part of the library (see issue #284).

Possible values: {'line', 'histogram', 'point', 'bar', 'missing-data'}

# color / colors

Specifies a color corresponding to the data array. You can use color or colors interchangeably. Takes in the usual color strings used in browsers - hex, rgba, etc. If you provide an array of strings, the position of the string corresponds to the position of the data array.

MG.data_graphic({
  data: [[{y:...}...],[{y:...}]],
  color: ['tomato', '#CCFFFF']
})

Possible values: {string, array of strings}

# custom_line_color_map

Allows an arbitrary mapping of lines to colors, which can be useful when updating a particular graphic's container with new data, where the new data removes one or more line series and you need to maintain the existing mapping of lines to colors. For instance, setting this option to [2,3] will map line 1 to color 2 and line 2 to color 3, rather than applying the default behavior, which is to map line 1 to color 1 and line 2 to color 2.

To avoid zombie lines, make sure you also set max_data_size to the number of possible lines.

# decimals

The number of decimals to show in a rollover.

Possible values: {2, number}

# error

If set, the graphic will show an error icon and log the error to the console.

Possible values: {string}

# format

Sets the format of the data object, which is to say, counts or percentages.

Possible values: {'count', 'percentage'}

# full_height

Sets the graphic's height to that of the parent element's and then resizes the graphic dynamically as the window size changes.

Possible values: {false, true}

# full_width

Sets the graphic's width to that of the parent element's and then resizes the graphic dynamically as the window size changes.

Possible values: {false, true}

# interpolate

The interpolation function to use when rendering lines. See here. When missing_is_hidden is set to true, the interpolate value is ignored.

Possible values (v2.9 and earlier): {'cardinal', 'linear', 'linear-closed', 'step', 'step-before', 'step-after', 'basis', 'basis-open', 'basis-closed', 'bundle', 'cardinal-open', 'cardinal-closed', 'monotone'}

Possible values (v2.10 and later): {d3.curveCatmullRom.alpha(0), d3.curveLinearClosed, d3.curveStep, d3.curveStepBefore, d3.curveStepAfter, d3.curveBasis, d3.curveBasisOpen, d3.curveBasisClosed, d3.curveBundle, d3.curveCardinal, d3.curveCardinalOpen, d3.curveCardinalClosed, d3.curveMonotoneX, d3.curveCatmullRomClosed, d3.curveCatmullRomOpen}

As of v2.10, which depends on D3 4.x, this option takes a function rather than a string. See this.

# interpolate_tension

Modifying the interpolator's tension allows you to fix lines that exhibit artifacts due to your data being irregular. See the D3 documentation for more. The default tension is 0.7.

This option is available in v2.3+.

This option has been deprecated as of v2.10. You should now pass this value as an argument to interpolate as described here.

Possible values: {0.7, [0, 1]}

# legend

An array of labels to associate with the passed-in data. If legend_target is set, the specified element is populated with the legend. Otherwise, each line will show the label beside it. The latter feature is available from v2.4 onwards.

# legend_target

When set, the specified container will be populated with the generated legend. For example

MG.data_graphic({
    legend: ['Line 3','Line 2','Line 1'],
    legend_target: '.legend'
});

# linked

Links together all other graphs whose linked option is set to true. When one graphic in that set is rolled over, the corresponding values in the other graphics are also rolled over.

Possible values: {false, true}

# linked_format

When the linked option is set to true, the rollovers in a time-series graphics are set to roll_%Y-%m-%d by default. This option allows one to override the format so that graphics that have finer granularity, e.g. minutes, can also be linked.

Possible values: {'%Y-%m-%d', string}

# list

When set to true, the first element in each object in the data file is set as the x-accessor and the second one is set as the y-accessor.

Possible values: {false, true}

# markers

Sets the marker lines, which are vertical lines that identify, say, events or dates worth annotating. The option takes an array of objects, for instance:

var release_markers = [
    {'date': new Date('2014-02-01'), 'label': '1st Milestone'},
    {'date': new Date('2014-03-15'), 'label': '2nd Milestone'}
];

MG.data_graphic({
    ...
    markers: release_markers
})

As of v2.7, markers take an optional click property, for instance:

var clickity = function() {
    window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank');
};

var markers = [
    {'date': new Date('2014-02-01'), 'label': 'Expedition begins'},
    {'date': new Date('2014-03-15'), 'label': 'Loch Ness Monster spotted!', 'click': clickity}
];

# max_data_size

Explicitly specify the maximum number of possible line series in the graphic, for use with custom_line_color_map. Say you're plotting two lines, and you set your custom color map to [1,4]. Make sure you specify that as follows:

MG.data_graphic({
    ...
    custom_line_color_map: [1,4],
    max_data_size: 4
});

Possible values: {null, number}

# missing_text

The text to display for missing graphics. By default, the text reads: Data currently missing or unavailable.

# show_missing_background

If set to true, a mock line chart is generated and set as the background of missing graphics.

Possible values: {true, false}

# mouseover

An optional function, called whenever a rollover is triggered. The function might perform custom formatting on the rollover text, for instance:

MG.data_graphic({
    ...
    mouseover: function(d, i) {
        //custom format the rollover text, show days
        var prefix = d3.formatPrefix(d.value);
        $('div#custom-rollover svg .mg-active-datapoint')
            .html('Day ' + (i+1) + '   '
                + prefix.scale(d.value).toFixed(2) + prefix.symbol);
    }
})

# mousemove

An optional function, called whenever a rollover is triggered on mousemove.

# mouseout

An optional function, called whenever a rollover is triggered on mouseout.

# point_size

The radius of the dot that appears when the mouse hovers on a data point.

Possible values: {2.5, number}

# rollover_callback

Deprecated as of v2.0. Please refer to mouseover, mousemove and mouseout.

# rollover_time_format

Custom time format to use in rollovers (using the same format as strftime), overriding the auto-detected interval. For instance:

MG.data_graphic({
    ...
    rollover_time_format: "%b %e, %Y  %H:%M:%S" // e.g. May 21, 2018 12:43:00
})

# show_confidence_band

When enabled, each line in a line chart shows an optional confidence band around it. The option takes an array of two elements that specify the names of the the lower and upper elements in the data file, for instance:

MG.data_graphic({
    ...
    show_confidence_band: ['lower', 'upper']
})

# show_rollover_text

Determines whether or not to show any text when a data point is rolled over.

Possible values: {true, false}

# show_tooltips

Determines whether or not to show a chart's [description], as set in description, in a tooltip. Note (v2.3+): If you do not wish to use jQuery, set this to false. Only tooltips and the button layout depend on jQuery.

Possible values: {true, false}

# target

The ID or class name of the DOM element in which the graphic will be added, for instance #the-chart.

Possible values: {'#viz', string}

# transition_on_update

When enabled, the set of lines in a graphic are animated from their old positions to the new ones, whenever their data is updated due to user-action.

Possible values: {true, false}

# x_rollover_format

A string or function that formats the x-accessor's rollover text. Strings are formatted according to D3's number or time format, depending on the object's type. See these examples.

# x_rug

When enabled, a rug plot will be displayed along the x axis.

Possible values: {false, true}

# y_rollover_format

A string or function that formats the y-accessor's rollover text. Strings are formatted according to D3's number or time format, depending on the object's type. See these examples.

# y_rug

When enabled, a rug plot will be displayed along the y axis.

Possible values: {false, true}

# brush

Add brushing function for this chart. Could be set as 'xy', 'x', 'y' to restrict axis.

Possible values: {null, 'xy', 'x', 'y'}

# zoom_target

Zooming target of brushing function. If not set the default is to zoom the current chart.

Possible values: {null, object}

Add a custom footer
Add a custom sidebar
Clone this wiki locally