VisualN Highcharts Drawer basic usage (Video)

Posted on: Mon, 10/09/2017 - 17:01 By: kpv

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


    Highcharts drawer itself is just a particular case of VisualN usage. VisualN isn't tied to any library or a set of tools, even to any single approach. That idea will be demonstrated in detal in further screencasts.

    Scenario in short:

    1. Enable modules and copy js libraries
    2. Create a "highcharts demo" VisualN style based on the Highcarts drawer
    3. Create a data file in JSON format
    4. Create a custom "visualn demo" content type with a "visualn file" field of VisualN file type
    5. Configure "visualn file" field formatter
    6. Create a content of "visualn" content type, upload data file and apply "highcharts demo" VisualN style
    7. View result
    8. Copy link path to the uploaded data file
    9. Create and configure a VisualN block that points to the file
    10. View result
    11. Click the "Share" link and copy the embed html code
    12. Create a generic "Basic page" content and insert embed code into the content
    13. View result

    VisualN installation and Highcharts set-up

    Download and extract module archive as usual or use console toos (such as drush or drupalconsole). Note that you need the latest dev version at the moment since development is in progress.

    1. Enable the submodules from the package
    2. Download d3js library and extract to libraries/d3/d3.min.js (base js requirement for the VisualN module to work)
    3. Download highcharts.js library and extract to libraries/highcharts/js/highcharts.js (required for Highcharts drawer)

    Create a VisualN style

    VisualN style is the point which connects your data and the drawer to make a drawing. To create a VisualN style follow to Configuration > Media > Visualization > Visualization styles > Add VisualN style. Choose a drawer (Highcharts in our case), copy script setup into "Highcharts setup" field and save. The setup itself is specific for the library in use --- highcharts.js in the given example. There may be more user-friendly drawers that provide some generic fields for input like "title", "color" etc. for the user. Those can be easily created, see Highcharts Bar drawer for example. But here our goal is too show how flexible and generic drawers can be.

    Now you will have that style available whenever you create a new drawing.

    Create a data file

    The data structure depends on the drawer in use. Data format can be json, csv, xml or any other for which a VisualN adapter exists. In most cases though you should use json since it is specifically intended for structured data for js scripts.

    Create a content type with a VisualN file field

    Now to upload a file you need to create a content type (or use an existing one) and add a VisualN Field to it.

    Configure field formatter

    In field formatter settings you should select default style and set default configration for the field. The style and configuration are used if user doesn't select a style in the field widget settings after uploading a file.

    Create content and upload the data file

    Now you can upload your data file. When the file is uploaded you will see a configuration form with style select and resource format. Choose json for resource format and the VisualN Style you've created earlier.

    After you save the node, you should see the visualization rendered.

    Create a VisualN block

    Got to Structure > Block layout and create a block of "VisualN Block" type and add it to the "Content" region. Copy url for the file uploaded into the node field from the previous step (right-click on the link and select "Copy link location" from the pop-up menu) and copy it into the block configuration resource url field. Select the style from the select box and save. Now you should see the visualization rendered as a block.

    Copy embed code and create a generic content

    If you have enabled "Enable share link" in the VisualN block configuration settings then you will see a "Share" link under the visualization. On click there will appear a text box with html embed code - you can use it to embed the visualization into any site content.

    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.