Protobi

← All help posts

View post

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](https://help.protobi.com/how-to/create-a-new-element#Create%20an%20empty%20element-2)

2\. From the [JSON editor](https://help.protobi.com/editaccess/edit-json#%0AJSON%20editor-0), 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 [](https://www.w3schools.com/html/html_headings.asp)[HTML heading tags](https://www.w3schools.com/html/html_headings.asp), and a [](https://www.w3schools.com/html/html_paragraphs.asp)[paragraph tag](https://www.w3schools.com/html/html_paragraphs.asp).

<img src="/uploads/upload/image/5200/direct/1647462938442-1647462938442.png" alt="Element properties dialog for custom_chart displaying HTML code with heading tags (<h1>Title</h1>, <h2>Subtitle</h2>) followed by Lorem ipsum placeholder text wrapped in paragraph tags." style="width: 400px;" class="fr-fic fr-dib">

The result:

Read [Add a project intro](/how-to/add-a-project-intro) to see how a simple HTML element can enhance your project.

### Markdown

If you prefer to use [](https://simplemde.com/markdown-guide)[Markdown](https://simplemde.com/markdown-guide) 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](https://help.protobi.com/viewaccess/baseline#Press%20to%20filter-4). 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](/edit-access/element-properties) dialog.

Expand the panel below to see the code.

Notice [Embedded Javascript](/api-references/how-to-use-embedded-javascript-in-protobi) is used, lets us insert Javascript in the HTML editor.

We first define qty and qtyStr using our [JavaScript API](/api-references/protobi-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 <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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute).

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>
    </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](https://help.protobi.com/how-to/create-a-new-element#Create%20an%20empty%20element-2) 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](https://www.w3schools.com/css/css_table.asp) 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](/api-references/protobi-javascript-api)
-   [HTML tags by category](https://www.w3schools.com/tags/ref_byfunc.asp)
-   [Basic markdown vs HTML syntax](https://www.markdownguide.org/basic-syntax/)
-   [Markdown guide](https://simplemde.com/markdown-guide)
-   [Lodash documentation](https://lodash.com/docs/) 
-   [Learn Lodash](https://learn.co/lessons/javascript-lodash-templates)
-   [11 Super Handy Lodash Methods to Simplify Things in JavaScript](https://javascript.plainenglish.io/11-super-handy-lodash-methods-to-simplify-things-in-javascript-8c45cd346616)

Publishing

Date

Status

Slug edit

Content

Thumbnail

Categories Manage

Tools

AI Database

Publishing

Content

Tools

Danger zone