Using available drawers preview

Posted on: Tue, 11/06/2018 - 13:40 By: avasiliev

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.

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.