Creating visualization styles

Posted on: Mon, 11/12/2018 - 10:55 By: avasiliev

Visualization styles are configuration entities that store a reference to a drawer plugin (its Id) and a set of configuration defaults. These styles are used to create drawings. As VisualN defines it, a drawing is a ready, self-contained piece of markup (or render array) with possibly styles and scripts attached. Almost anything can be a drawing: a chart, an image gallery or even a web app.

In a sense, they are similar to image styles which are applied to an original image in order to get a styled one. In the case of visualization styles, they are applied to sets of data to get a drawing as a result. Though some drawers don't even need data to create a drawing.

Visualization style to drawing

Visualization styles can be created either using Available drawers preview UI or directly using VisualN > Visualization Styles administration page. Once created, they can be used anywhere on the site to create drawings: views, fields, blocks, embedded into content via ckeditor, tokens etc. Multiple styles can be created for the same drawer.

On the screenshot below a style is created for the Linechart Basic drawer provided with VisualN module.

Visualization style configuration form

To create a visualization style, its label must be set and drawer plugin selected. If selected drawer plugin configuration form provides required fields, those must be set up too.

Every drawer plugin may provide its own custom configuration form, be it very basic with just a few settings or a complex one with multiple fields and ajaxified elements. It is also ok for a drawer to have no (or empty) configuration form either. In the example above, Linechart Basic drawer provides Number of series setting which allows to vary the number of data series and thus lines on the resultant chart. The Update series button adjusts the number of text fields used to set labels for each series. Also it serves as an example of a configuration form with ajax elements.

The Leaflet Basic drawer (shipped with VisualN module as well) would show a different form: e.g. it provides settings for map viewport width and height. Thus, developers are free to create configuration forms of any structure and complexity without worrying about how those forms are integrated into the UI - everything is seamlessly handled by VisualN module.

Having visualization styles configured you are ready to create great drawings. Enjoy it!

Series contents

  1. Getting started
  2. Using available drawers preview
  3. Creating visualization styles
  4. Creating drawing (entity) types
  5. Creating interactive content in CKEditor with VisualN Embed
  6. Configuring VisualN Embed integration with CKEditor
  7. Using VisualN Excel module for Excel files support
  8. Sharing embedded drawings across sites
  9. etc.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.