Nov 12 2018
Nov 12

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.
Nov 06 2018
Nov 06

VisualN provides an interface to check "how it works" for any available drawer on the site. To see the list of drawers go to VisualN -> Available Drawers Preview menu item.

Available drawers list

Though VisualN allows you to use any resource type as data source (e.g. csv, xls files or views), for demo purposes it is enough to have some dummy data. Such data can be obtained from data generators. Data generators are simple plugins returning an array of data (which is just another resource type) of a given structure that can be used by certain drawers (e.g. Leaflet uses lat, lon and title data fields).

Available drawers list

Data generators may also provide info about drawer or drawers that can use generated data. Those drawers and data generators are considered compatible. Drawers highlighted green have compatible data generators.

There are a couple of use cases when you may want to use the Available drawers preview UI:

  • check drawer in action, examine configuration form settings
  • set configuration values to create a visualization style
  • use the preview UI to help drawer development and to test changes
  • check data format used by drawers (e.g. using table drawer)

Linechart Basic drawer preview

Choose «preview» for any of green-highlited drawers. The preview will be opened:

Linechart drawer preview

In the example presented below the graphics visualization is an interactive area with line charts. The values at the mouse-pointed areas are available, data series activating/ignoring etc. These are basic possibilities of the drawer logics, but VisualN module doesn’t narrow the set and complexity of these possibilities.

The drawer supports a set of configuration parameters in a UI for the user (drawer config).

The drawer supports a UI for configuring data generator parameters. Different drawers can use different data generators. In the VisualN module there’s used a term «resource» for an ordered set of data to make a drawing; and data generators represent one of resource providers.

To analyze drawer possibilities use different combinations of configuration parameters and press the «redraw» button.

Creating Visualization styles

When configuring is terminated use the Create style button. VisualN uses Drawing Style to keep the set of parameters of a drawer for a variety of drawings. Changing style configuration will change parameters for all the drawings with that style, wherever they are located in the project.

When style is created, name it and set its parameters:

Creating drawing style

More about styles can be seen in other articles.

Using Table Html Basic drawer to inspect data format

Sometimes you may be not sure about data format used by a drawer. It may happen when the format is not obvious by itself and no description is provided by developer. Though if you are a developer too, it still shouldn't be a problem, otherwise there should be some way to guess the format required.

In most cases, when drawer uses data in the form of plain array (plain table) and has a compatible generator provided, Table Html Basic drawer can be used to guess the format. It will output any data provided by data generator.

By default, Table Html Basic drawer uses data generator that generates random strings.

HTML Table drawer preview

On the other hand, if it doesn't work for some drawer's data generator, the generator obviously returns data of some more complex structure, e.g. trees or nested lists.

Thus, Drawer Preview functionality is useful for both content-managers and developers.

Contents of the series

  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.
Dec 14 2017
Dec 14

The information itself is useless.


Quite original start for a web-published text, isn't it? Still the confirmation is true. Solutions don't demand information, solutions demand clearly organized data. No matter what is the domain – in every situation people tend to organize data in a readable well-understandable formats.


Multiple mechanisms of collecting and storing the data are developed, and technologies continue to progress. But the key question of data presentation often remains ignored.


Whatever you analyze you need data organized. Some like it text, some like spreadsheets, also video&audio formats are used. In all cases it takes time to «upload» data in mind.


VisualN project tends to present data in optimal formats. The purpose is to minimize the time needed to «get into concept». We offer clear graphs, dashboards, schemes. We want the information become optimal for decisions. Sales, communities, statistics, geography, big data, systematization, communications – these are just few domains that VisualN covers.


Have you ever wondered about the graph of visits on the web-page you were reading? What about the map of visitors? Can we see the graph of wins and looses our government demonstrates? Can we divide Twitter into parts according to cat- and dog-persons? Marvel or DC – what's preferable worldwide? In France? Beyond boys 10 to 14 years old? Would you like to understand it in one glance?


It's a really interesting stuff. It is VisualN.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web