Create custom charts

Updated at July 25th, 2022

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


Use dynamic data points

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 EJS syntax is used, this is a templating language that lets us insert Javascript in the HTML editor.

There are two variables we define in Javascript. qty has two arguments, the first is 'current' (S1), 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 <svg> HTML tags. 

For charts that use <svg> tags set chartType to "SVGChart".


The code for custom_chart3 uses the <svg> tag to create a circle shape. Within the <circle> tag there are specified attributes. For example, r defines the radius of the circle and fill defines the circle color. More on SVG attributes.  


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:

Was this article helpful?