Communicate with your audience, make your content visual and interactive

For content managers as well as developers Drupal provides a lot of tools and approaches to create content of different types and flavours, from simple text to structured layouts with much of graphics and media. Though still there is enough uncertainty and complexities with authoring experience. Some tasks are even hardly accomplishable without coding or require a sensible effort to. Here to the rescue comes VisualN. The VisualN module brings a generic approach to carry out many of those "painful" and daunting tasks with ease and fun. What is important, it hides the complexities from user to make interaction intuitive and joyful.

The drawing above as any other drawing in the article is fully created and configured via UI with no single line of code or extra modules. To embed drawings into content VisualN provides a rich set of approaches and their combinations so that user wouldn't be limited in his content structuring strategies and could stick to the preferred ones. For the examples in the article we've chosen to use visualn token functionality to embed drawings via simple tokens of [visualn:embed:drawing:id] format. Though you can choose to use Paragraphs or even embed drawings via iframes (which generally is more suitable to embed drawings into third-party sites content).

The information itself is useless

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.

Strategies of creating VisualN Drawers

The listed below are some major approaches to creating VisualN drawers. Some of them need coding, some don't, some need just a couple of lines of code. Choose the ones that fit you and your case best. You may even find a drawer ready for you when the package registry at is ready.

Base drawers

Base drawers are the basis of the whole system. They are those very mechanisms that draw visualizations. Everything else is build around base drawers.

VisualN Highcharts Drawer basic usage (Video)

The article and the screencast are not finished, revisit for updates.

The screencast demonstrates basic usage example of the Highcharts drawer provided with the VisualN module. Highcarts drawer allows to render any type of chart that highcharts.js library allows. Here we just show three use cases:

  • Create a visualization based on data file
  • Create a visualization based on external data resource
  • Sharing visualization, embedding into third-party site content