jQuery/JS Common - Utils - viz
An object that serves as a namespace for DevExtreme Data Visualization Components.
currentPalette()
Gets the current palette's name.
currentPalette(paletteName)
Only the UI components created after calling this method use the new palette. Refresh the styling settings in other UI components using the DevExpress.viz.refreshTheme() method.
See Also
currentTheme()
Gets the current theme's name.
currentTheme(platform, colorScheme)
Changes the current theme for all data visualization UI components on the page. The color scheme is defined separately.
Only the UI components created after calling this method use the new theme. Refresh the styling settings in other UI components using the DevExpress.viz.refreshTheme() method.
See Also
currentTheme(theme)
Only the UI components created after calling this method use the new theme. Use the DevExpress.viz.refreshTheme() method to refresh the styling settings in other UI components.
See Also
exportFromMarkup(markup, options)
Name | Type | Description |
---|---|---|
backgroundColor |
The color that fills transparent regions. |
|
fileName |
The name of the file to be saved. |
|
format |
The file's format. One of 'PNG', 'PDF', 'JPEG', 'SVG' and 'GIF'. |
|
height |
The SVG block's height in pixels. This field is required. |
|
margin |
An empty space to be added around the exported SVG block; measured in pixels. |
|
onExported |
Allows you to notify a user when exporting completes. |
|
onExporting |
Allows you to request exporting details and prevent exporting.
|
|
onFileSaving |
Allows you to access exported data and/or prevent it from being saved to a file on the user's local storage.
|
|
svgToCanvas |
A function that renders SVG markup on the HTML canvas. Refer to the svgToCanvas description for details. |
|
width |
The SVG block's width in pixels. This field is required. |
See Also
exportWidgets(widgetInstances)
Array<Array<dxChart | PieChart | Funnel | Sankey | TreeMap | VectorMap | Sparkline | Bullet | dxBarGauge>>
An array with the following format:
[ [ widgetInstance0_1, widgetInstance0_2, ..., widgetInstance0_N ], [ widgetInstance1_1, widgetInstance1_2, ..., widgetInstance1_M ], ... [ widgetInstanceP_1, widgetInstanceP_2, ..., widgetInstanceP_R ] ]
Each nested array contains UI component instances that should be in the same row in the exported document.
exportWidgets(widgetInstances, options)
Array<Array<dxChart | PieChart | Funnel | Sankey | TreeMap | VectorMap | Sparkline | Bullet | dxBarGauge>>
An array with the following format:
[ [ widgetInstance0_1, widgetInstance0_2, ..., widgetInstance0_N ], [ widgetInstance1_1, widgetInstance1_2, ..., widgetInstance1_M ], ... [ widgetInstanceP_1, widgetInstanceP_2, ..., widgetInstanceP_R ] ]
Each nested array contains UI component instances that should be in the same row in the exported document.
Name | Type | Description |
---|---|---|
backgroundColor |
The background color. |
|
fileName |
The name of the file to be saved. |
|
format | 'GIF' | 'JPEG' | 'PDF' | 'PNG' | 'SVG' |
The file's format. PNG is used if the browser cannot export the file in the specified format. |
gridLayout |
If true, UI components are arranged in columns with equal widths (the width of the widest UI component). |
|
horizontalAlignment | 'center' | 'left' | 'right' |
Horizontally aligns UI components in their columns. Applies only when gridLayout is true. |
margin |
Margins to be added to each side of the document; measured in pixels. |
|
onExported |
Allows you to notify a user when the export is completed. |
|
onExporting |
Allows you to request export details and prevent export.
|
|
onFileSaving |
Allows you to access exported data and/or prevent it from being saved to a file in the user's local storage.
|
|
svgToCanvas |
A function that renders SVG markup on the HTML canvas. Refer to the svgToCanvas description for details. |
|
verticalAlignment | 'bottom' | 'center' | 'top' |
Vertically aligns UI components in their rows. |
generateColors(palette, count, options)
A palette name or an array of colors. See palette for more information.
Name | Type | Description |
---|---|---|
baseColorSet | 'simpleSet' | 'indicatingSet' | 'gradientSet' |
The color set that provides the colors. The default value is "simpleSet". |
paletteExtensionMode | 'alternate' | 'blend' | 'extrapolate' |
The mode in which the palette should be extended when it contains less colors than specified in the count parameter. The default value is "blend". |
The following code generates ten colors from the Material palette's gradient color set:
var colors = DevExpress.viz.generateColors('Material', 10, { baseColorSet: 'gradientSet' }); // ===== or when using modules ===== import { generateColors } from 'devextreme/viz/palette'; let colors = generateColors('Material', 10, { baseColorSet: 'gradientSet' });
Use the generated colors to paint elements of different UI components in identical colors. For instance, you can assign the same colors to series in two different charts to indicate the visualized information is connected.
getMarkup(widgetInstances)
The UI components' SVG markup. Pass it to the exportFromMarkup(markup, options) method to export the UI components.
getPalette(paletteName)
The returned value is an object of the following structure:
{ // Applies in the BarGauge, Chart, Funnel, PieChart, PolarChart, Sankey, and TreeMap with a discrete colorizer simpleSet: ['#60a69f', '#78b6d9', '#6682bb', '#a37182', '#eeba69'], // Applies in the CircularGauge and LinearGauge indicatingSet: ['#90ba58', '#eeba69', '#a37182'], // Applies in the VectorMap and TreeMap with a gradient or range colorizer gradientSet: ['#78b6d9', '#eeba69'] }
The built-in palettes are listed in the Appearance Customization topic.
getTheme(theme)
Gets a predefined or registered theme's settings.
refreshPaths()
The method to be called every time the active entry in the browser history is modified without reloading the current page.
Each data visualization UI component addresses its inner elements by their URLs. Those URLs break when the active history entry is modified without reloading the current page (see Adding and modifying history entries). As a result, some UI component elements may get mixed up or disappear completely. To fix the URLs, call the refreshPaths() method right after the history entry modification, and in the onpopstate event handler or, if you use a routing library, in its counterpart.
window.history.pushState({ foo: "bar" }, "title", "?foo=bar"); DevExpress.viz.refreshPaths(); window.onpopstate = function(event) { DevExpress.viz.refreshPaths(); }
The problem with broken URLs may also emerge if the page uses a path modifying HTML tag; for example, <base>
or <iframe>
. To resolve it, set the pathModified property of the UI component to true.
registerPalette(paletteName, palette)
The palette settings is an object of the following structure:
{ // Applies in the BarGauge, Chart, Funnel, PieChart, PolarChart, Sankey, and TreeMap with a discrete colorizer simpleSet: ['#60a69f', '#78b6d9', '#6682bb', '#a37182', '#eeba69'], // Applies in the CircularGauge and LinearGauge indicatingSet: ['#90ba58', '#eeba69', '#a37182'], // Applies in the VectorMap and TreeMap with a gradient or range colorizer gradientSet: ['#78b6d9', '#eeba69'] }
registerTheme(customTheme, baseTheme)
For details on how to customize a theme, refer to the Themes article.
If you have technical questions, please create a support ticket in the DevExpress Support Center.