Code charts and Code elements

Draw a chart’s rows any way you like with HTML and Halo’s code, put code on a report that reads several charts, and lay out a whole report page as code.

When no chart type draws what you have in mind, write it. A Code chart draws its rows with HTML and CSS, using Halo’s code in double braces for the values. It’s the same code the CMS uses for websites, in the same editor.

Nothing in code ever runs: scripts, onclick and other event attributes, frames and forms are left out, and nothing loads from elsewhere, so the rows a reader sees stay on the page.

Make a Code chart

In the chart editor, choose Code as the type, then add fields as you would for a table. The code is under Style, and it starts by listing the rows.

<div class="cards">
  {{#each (sort rows "visitors" desc=true) as |row|}}
    <div class="card">
      {{field row "Region"}}
      <b>{{field row "Visitors" compact=true}}</b>
      <div class="bar" style="width: {{pct (raw row "Visitors") (max ../rows "visitors")}}%"></div>
    </div>
  {{/each}}
</div>

• rows is every row, row the first, rowCount how many, and columns describes them.

• {{field row "Visitors"}} is a value formatted as the field is everywhere in Halo: money in its currency, months as months. {{raw row "Visitors"}} is the value itself, for working out with, and {{label "visitors"}} the field’s label.

• Helpers such as sum, groupBy, pct and formatDate do the rest. Helpers and values under the editor lists them.

• A field can be named by its name or its label wherever code names one: in field, raw and label, and in list helpers such as sort, sum, max and groupBy, so sort rows "Visitors" and sort rows "visitors" order the rows alike.

A Code chart goes anywhere a chart does: reports, dashboards, embeds and websites.

Put code on a report

In the report editor, Add, then Code. Under Reads, choose the charts its code reads: each has a name, and the code reads its answer as data.name, with the same rows, columns and helpers as a Code chart. Every chart it reads follows the report’s filters.

Lay out a page as code

With nothing selected, a page’s settings have Draw this page as code. The page becomes HTML that places each element with {{element "id"}}, and the elements still draw, filter and update as they do anywhere. Use the report’s layout again goes back.