mode helix
NOW LIVEEmpower your end users with Explorations in Mode.Try it now

How to implement gallery examples using the HTML editor

​The Mode example gallery features a variety of customizations you can apply to Mode charts, tables, and reports by editing the HTML. While you can customize the entirety of a Mode report—just like coding a web page—these examples provide quick wins for common modifications. We hope these examples provide inspiration for what's possible using the HTML editor. ​

Step 1: Navigate to the HTML editor

​Once you've run your SQL queries, click into the Report Builder and select “Edit HTML” to open the HTML editor. Go to HTML editor

Step 2: Add the stylesheet and script tag

​Mode hosts the lion's share of the custom HTML, CSS, and Javascript code need for these examples in a Github repository. Using it isn't required (leverage whichever Javascript libraries you like!), but it makes the specific modifications featured in the gallery faster to implement.

Start by adding this code to the very top:​

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://mode.github.io/alamode/alamode.min.js"></script>

Add style tag

Step 3: Add the customizable snippet

​The next step is to drop in the customizable snippet. This is the block of code that allows you to indicate specific preferences for colors, font styles, dimensions, etc. It's also where you'll make a few tweaks to point the code to your dataset. ​

Customizable snippet:​

<script>

alamode.bulletChart(
  {
    chart_width: 800,
    left_pad: 150,
    query_name: "2014 GSW Free Throw Percentage",
    title: "Free throw shooting percentage",
    title_column: "name",
    subtitle_column: "position",
    bar_column: "Free Throw Percentage",
    marker_column: "career_mean",
    scale_columns: ["career_min","career_max","max_possible"]
  }
)

</script>

Add customizable snippet

Step 4: Update the report

​Click Update as you go to preview your work.

Share new customization ideas and your projects with the Mode community by emailing hi@modeanalytics.com or submit a pull request to the alamode.js repo on Github.

decorative particle

Get our weekly data newsletter

Work-related distractions for every data enthusiast.