Creating Dynamic Infographics With BloX

[intapiuser]

Challenge

When developing a web page or a BloX widget designers face the same challenge. Accurately placing text and other design elements in the design space are difficult and arduous processes. Furthermore, advanced knowledge of CSS is required to accurately style your elements.

Solution

We will overcome this challenge by leveraging SVG!

SVG 101 What is SVG?

In this example, we will use Adobe Illustrator, a vector design program that allows designers to easily create illustrations. Adobe Illustrator, along with other vector design programs, allows designers to export their artwork as SVG files for use online. SVG elements are HTML DOM elements that we can hook into and manipulate just like any other BloX element.

The infographic can be designed so that all the figures are dynamic just like standard widgets.

Process

Initial Setup

1. Design your visualization in Illustrator with default values (the values will show if the dash metric is NULL)
2. Export as SVG

3. Open the file in notepad++ or another text editor and replace all double quotes with single quotes

4. Identify the text elements that you want to be dynamic and give them unique id’s

1. This is an example of a text element that we will want to change

<text id='num1'transform='translate(507.51195 142.23719)' style='font-size: 60.48307800292969px;fill: #323f4f;font-family: Calibri-Bold, Calibri;font-weight: 700'>0</text>

5. Copy the text into a website that will convert the multiline text format into a single line

6. Copy the output into a document for use later

7. Create a blank BloX and use this simple structure

{
   "style": "",
   "script": "",
   "title": "",
   "showCarousel": false,
   "body": [
       {
           "type": "Container",
           "style": {
               "padding": "40px"
           },
           "items": [
               {
                   "type": "TextBlock",
                   "id": "",
                   "class": "",
                   "text": ""
               }
           ]
       }
   ],
   "actions": []
}

8. Add the measurements you want into values and name the values with simple no space names.

Tying It All Together And Making Things Dynamic!

In my example, the IDs I assigned to my dynamic text elements are num1, num2, num3, num4, and num5.

We’re going to be mapping the values from our values panel to each of the dynamic text elements we set up in step 4.

WRITING THE JQUERY SCRIPT

We tie the panel values to the id’s by using a little JQuery.

The following script sets the text of ID “num1” to the value of the panel E&S.

The pink hashtag means “id” and the blue is the id name. The green is the command that gets the E&S value.

$('#num1').text({panel:E&S});
$('#num2').text({panel:EC});
$('#num3').text({panel:PQ&C});
$('#num4').text({panel:PO});
$('#num5').text({panel:MC});

We will put these scripts into the text body inside a couple of script tags so the computer knows to run the javascript.

{
   "type": "TextBlock",
   "id": "",
   "class": "",
   "text": "<script>$('#num1').text({panel:E&S});$('#num2').text({panel:EC});...</script>"
}

ADDING THE SVG

It’s time to put that script we put aside into action!

Paste the entire SVG script right after the closing script tag so it looks like this

"text": "<script>javascript code</script><svg>svg code</svg>”

Question: does it work with "Items" and "Values" the same way?

Solution: An additional line of code needs to be added ahead of the script content.

<script>additional content; $(#num1).text(...</script>

This content will allow us to access the pane's text by putting it into an easy to access variable.

The following line will grab the current panels and their content:

var dims = Object.entries(prism.activeWidget.queryResult[0]).map((e) => ( e[1] ));

Once the variable dim is available, we can query the BloX panels and extract the dimension text. We can do this inside the text() function as usual.

$('#someSelector').text(dims.find(w=>w.Panel == 'Category').Text)

To select your panel by name, replace Category with your own panel's name.