Create custom charts

You can use HTML and Markdown to build custom visuals in Protobi. In this tutorial we will show how to create simple custom charts, including the above graphic. 

Simple example with HTML

1. Create a new element 

2. From the JSON editor, set the chartType to "BasicElement". Each custom chart starts with steps 1 and 2. 

3. Open the HTML content editor by selecting the element and using the shortcut SHIFT + x + c . 

4. Below, we have an example with two levels of HTML heading tags, and a paragraph tag.

The result:

Read Add a project intro to see how a simple HTML element can enhance your project.

Markdown

If you prefer to use Markdown syntax, add the "markdown" attribute to JSON and set it to true

With the "markdown" attribute set to true, you can enter Markdown or HTML syntax in the content editor. 

Below we create the same boiler text as the first example, but use Markdown syntax instead. Hash symbols create headings, and new paragraphs are created using a blank line.

Square graphic with static text

You can use HTML  to create custom shapes with bold text. The custom chart below is an HTML element, with the percent and label added as static text. 

Note, this chart won't respond dynamically to changes to the data. 

Expand the panel to see the code for custom_chart1. Scroll horizontally to view the code in its entirety.

Square graphic with static text

<div class="badge" style="width: 200px ; height: 200px; background-color: #39C; margin: 20px; text-align: center">
   <div class=qty style="font-size: 96px; color: white; font-weight: bold">40%</div>
   <div class=label style="font-size: 16px; color: white;">Practice nurses</div>
</div>

Delete

Square graphic with a dynamic data point

Add data to your custom charts that will react dynamically to current filters. For the custom_chart1 example above, we can edit the HTML to make the percent frequency dynamic.

Below, we pressed on only those respondents from the Mid Atlantic Region, and the percent in custom_chart1 responds dynamically to that filter.

For the chart to reference the correct data column (i.e. S1), we first set the "field" in the Edit properties dialog.

Expand the panel below to see the code.

Notice Embedded Javascript is used, lets us insert Javascript in the HTML editor.

We first define qty and qtyStr using our JavaScript API, getting information related to the element via the "getRowPercent() and fmtPercent() functions.

More specifically, qty is defined by the function getRowPercent, which has two arguments, the first is 'current', our current filter, and the second is which value frequency we want to show, 2 (Practice Nurse). qtyStr is defined as qty but formatted as a percent, as opposed to the decimal form. 

Where 40% is referenced in the static code above, the dynamic code uses <%=qtyStr%> instead.

Dynamic data example

<%
    let qty = table.getRowPercent('current', 2)
    let qtyStr = fmtPercent(qty)
%>

<div class="badge" style="width: 200px ; height: 200px; background-color: #39C; margin: 20px; text-align: center">
   <div class=qty style="font-size: 96px; color: white; font-weight: bold"><%=qtyStr%></div>
   <div class=label style="font-size: 16px; color: white;">Practice nurses</div>
</div>

Delete

SVG charts

Another way to add shapes to a custom chart is to use

For charts that use

The code for custom_chart3 uses the

Expand the panel to see the code for custom_chart3.

Custom shapes example

<%
    let showMissing = getShowMissing() 
    let  marg = tabular.getMarginal(model.getKey(),'current')
    let colorKeys = Object.keys(model.get('format'))
    initColors(colorKeys)
%>

<% _.each(model.get('format'), function(label ,key) { %>
    <% var pct=marg.getPercent(key,showMissing) %>
    <% var pctStr = fmtPercent(pct)%>

    <svg height=200 width=200>
      <circle  cx=100 cy=100 r=<%=pct*100%> stroke="black" stroke-width="0" fill=<%=getColor(key)%> />
      <text x="50%" y="10%" text-anchor="middle" stroke="black" stroke-width="0.5px" ><%=label%></text>
      <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="0.5px" ><%=pctStr%></text>

    </svg>
    </div>
<%})%>

Delete

Static table example

The following example shows how to make a simple table and enter data manually. As always with custom charts, create a new element and set the chartType to "BasicElement". 

To enter static data in the table, we add the "data" attribute to JSON. This attribute will take an array of objects. Each object in the array represents a different row of data. Within each object, define the columns (i.e. "Term", "Definition").

Expand the panel below to see the code to create the glossary table above.

Table example

<% var rows = model.get('data') || []%>
<% var colKeys = Object.keys(rows[0] || {}) %>
<table class="pure-table">
    <thead>
         <% _.each(colKeys, function(colKey, colIdx)  { %>
                <th><%=colKey%></th>
         <% }) %>
    </thead>
    <tbody>
        <% _.each(rows, function(row, rowIdx)  { %>
             <tr>
                 <% _.each(colKeys, function(colKey, colIdx)  { %>
                    <td> <%= _.get(row, colKey)%> </td>
                 <% }) %>
            </tr>
        <% }) %>
    </tbody>
</table>

From JSON you can add some basic CSS styling to improve the look of the HTML table. See CSS Tables for more examples.

Learn more

HTML is the code that is used to structure web content, and Lodash is a JavaScript library that helps in working with arrays, strings, objects, numbers, etc. To learn more, see the links below.

Helpful articles:

• JavaScript API cheatsheet
• HTML tags by category
• Basic markdown vs HTML syntax
• Markdown guide
• Lodash documentation 
• Learn Lodash
• 11 Super Handy Lodash Methods to Simplify Things in JavaScript