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.

   
40%
   
Practice nurses

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.

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



   
<%=qtyStr%>
   
Practice nurses

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.

<%
    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)%>