Developer Guide
Other documentationsDemoCommunityGitHub
  • Forest Admin
  • Getting Started
    • Quick start
    • Development workflow
  • Reference Guide
    • How it works
      • Environments
      • Developing on Forest Admin
        • Using branches
        • Deploying your changes
        • Forest CLI commands
          • init
          • login
          • branch
          • switch
          • set-origin
          • push
          • environments:reset
          • environments:create
          • deploy
          • schema:diff [beta]
        • Express packages
    • Models
      • Enrich your models
      • Relationships
        • Create a Smart relationship
          • GetIdsFromRequest
        • Smart Relationship Examples
          • Smart hasMany relationship in mongoDB
    • Actions
      • Create and manage Smart Actions
        • Use a Smart Action Form
        • Use a Smart Action Intent
      • Smart Action Examples
        • Calculate the distance between two string addresses
        • Impersonate a user
        • Create a record with a multiselect through a many-to-many relationship
        • Handle enums with alias labels in a smart action
        • Dropdown with list of values in smart action form
        • Custom dynamic dropdown in a form using smart collections
        • Refresh hasMany relationship in smart action
        • Smart segment to restrict access to an action on a record details view
        • BelongsToMany edition through smart collection
        • Upload files to amazon s3
        • Upload several files with the File Picker
        • Retrieve smart field info in a smart action
        • Smart action to create several records from the input of a single smart action form
        • Add many existing records at the same time (hasMany-belongsTo relationship)
        • Call a webhook with record ids
        • Bulk update records
    • Smart Fields
      • Smart Field Examples
        • Add an HTML credit card as a smart field in a summary view
        • Display field with complex info in html format (rich text editor)
        • Generate signed urls to display S3 files in a smart field
        • Print a status object in a single line field
        • Sort by smart field
        • Sort by smart field that includes value from a belongsTo relationship
        • Add fields destined to the create form
        • Add validation to a smart field edition
        • Display smart field as progress bar using rich text editor
        • Update point geometry field using a smart field and algolia api
    • Smart Collections
      • Examples
        • Create a Smart Collection with Amazon S3
        • Smart relationship between model and stripe cards
        • Create records from a Smart collection
        • Searchable smart collection with records fetched from hubspot API
      • Serializing your records
    • Routes
      • Default routes
      • Extend a route
      • Override a route
    • Integrations
      • Stripe
      • Mixpanel
      • Intercom
      • Elasticsearch
        • Interact with your Elasticsearch data
        • Elasticsearch service/utils
        • Another example
      • Zendesk
        • Authentication, Filtering & Sorting
        • Display Zendesk tickets
        • Display Zendesk users
        • View tickets related to a user
        • Bonus: Direct link to Zendesk + change priority of a ticket
      • Dwolla
        • Display Dwolla customers
        • Display Dwolla funding sources
        • Display Dwolla transfers
        • Link users and Dwolla customers
        • Dwolla Service
      • Razorpay
      • Hubspot
        • Create a Hubspot company
        • Display Hubspot companies
      • Twilio
        • Send an SMS with Twilio and Zapier
      • Azure Table Storage
      • Slack
        • Send Smart Action notifications to Slack
      • Algolia
        • Geocode an address with Algolia
    • Smart Views
      • Create a Map view
      • Create a Calendar view
      • Create a Shipping view
      • Create a Gallery view
      • Create a custom tinder-like validation view
      • Create a dynamic calendar view for an event-booking use case
      • Create a custom moderation view
    • Smart Segments
    • Scopes
      • Create a scope more than one level away based on a Smart field
      • Scope on a smart field extracting a json's column attribute
    • Performance
    • Charts
      • Create an API-based Chart
      • Create a Smart Chart
      • Create Charts with AWS Redshift
  • Extra help
    • Setup
      • Install
      • Connecting Forest Admin to Your Database (Forest Cloud)
      • Forest Admin IP white-listing (Forest Cloud)
      • Why HTTPS is necessary even locally
      • Troubleshooting
      • Prevent permission errors at installation
      • Deploy your admin backend to AWS
      • Deploy your admin backend on Heroku
      • Deploy your admin backend to Ubuntu server
      • Deploy your admin backend to Google Cloud Platform
      • Install Forest Admin on a remote machine
      • Use Forest Admin with a read-only database
      • Configuring CORS headers
      • Running Forest Admin on multiple servers
      • Flatten nested fields (MongoDB)
    • Upgrade
      • Upgrade notes (Rails)
        • Upgrade to v9
        • Upgrade to v8
        • Upgrade to v7
        • Upgrade to v6
        • Upgrade to v5
        • Upgrade to v4
        • Upgrade to v3
      • Upgrade notes (SQL, Mongodb)
        • Upgrade to v9
        • Upgrade to v8
        • Upgrade to v7
        • Upgrade to v6
        • Upgrade to v5
        • Upgrade to v4
        • Upgrade to v3
      • Update your models' definition
      • Monitor your Forest's status
      • Manage your Forest Admin environments programmatically
      • Changing your domain name
      • Migrate to the new role system
      • Push your new version to production
    • Databases
      • Use a demo SQL database
      • Use a demo MongoDB database
      • Populate a postgreSQL database on Heroku
      • Connect to a read replica database
      • Plug multiple schemas
      • Add new databases
      • Manage SQL views
    • Settings
      • Customize your /forest folder
      • Disable automatic Forest Admin schema update
      • Include/exclude models
      • Display extensive logs
      • Laravel specific settings
    • Releases Support
    • Other documentations
Powered by GitBook
On this page

Was this helpful?

  1. Reference Guide
  2. Charts

Create a Smart Chart

PreviousCreate an API-based ChartNextCreate Charts with AWS Redshift

Last updated 1 year ago

Was this helpful?

Please be sure of your agent type and version and pick the right documentation accordingly.

This is the documentation of the forest-express-sequelize and forest-express-mongoose Node.js agents that will soon reach end-of-support.

forest-express-sequelize v9 and forest-express-mongoose v9 are replaced by v1.

Please check your agent type and version and read on or switch to the right documentation.

This is still the latest Ruby on Rails documentation of the forest_liana agent, you’re at the right place, please read on.

This is the documentation of the django-forestadmin Django agent that will soon reach end-of-support.

If you’re using a Django agent, notice that django-forestadmin v1 is replaced by v1.

If you’re using a Flask agent, go to the v1 documentation.

Please check your agent type and version and read on or switch to the right documentation.

This is the documentation of the forestadmin/laravel-forestadmin Laravel agent that will soon reach end-of-support.

If you’re using a Laravel agent, notice that forestadmin/laravel-forestadmin v1 is replaced by v3.

If you’re using a Symfony agent, go to the v1 documentation.

Please check your agent type and version and read on or switch to the right documentation.

Create a Smart Chart

On the previous page, we learned how API-based charts allow you to fetch any dataset from a custom endpoint. But using the finite list of predefined charts (Single, Distribution, Time-based, etc.), you are still constrained by how that data is displayed. With Smart Charts, you can code exactly what data you want and how you want it displayed!

You need a Starter plan or above to create Smart charts

Creating a Smart Chart

To create a chart and access the Smart Chart Editor, click on the Edit Smart Chart button:

Next, use the Template, Component, and Style tabs to create your customized chart. At any point, you can render your chart by clicking on the Run code button.

Don't forget to click on Create Chart (or Save if the chart is already created) once you're done!

If you are creating a record-specific smart chart (in the record Analytics tab), the record object is directly accessible (either through this.args.record in the component or @record in the template).

Creating a Table Chart

Our first Smart Chart example will be a simple table: however you may choose to make it as complex and customized as you wish.

<BetaTable
  @columns={{array 'Username' 'Points'}}
  @rows={{this.users}}
  @alignColumnLeft={{true}}
  as |RowColumn user|
>
  <RowColumn>
    <span>{{user.username}}</span>
  </RowColumn>
  <RowColumn>
    <span>{{user.points}}</span>
  </RowColumn>
</BetaTable>

Using a trivial set of hardcoded data for example's sake:

Component tab
import Component from '@glimmer/component';
import {
  loadExternalStyle,
  loadExternalJavascript,
} from 'client/utils/smart-view-utils';

export default class extends Component {
  users = [
    {
      username: 'Darth Vador',
      points: 1500000,
    },
    {
      username: 'Luke Skywalker',
      points: 2,
    },
  ];
}

To query a custom route of your Forest server as your datasource, you may use this syntax instead:

Component tab
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @service lianaServerFetch;

  @tracked users;

  constructor(...args) {
    super(...args);
    this.fetchData();
  }

  async fetchData() {
    const response = await this.lianaServerFetch.fetch(
      '/forest/custom-data',
      {}
    );
    this.users = await response.json();
  }
}

Creating a Bar Chart

This second example shows how you can achieve any format of charts, as you can benefit from external libraries like D3js.

Template tab
<div class="c-smart-view">
    {{this.chart}}
</div>
Component tab
import Component from '@glimmer/component';
import {
  loadExternalStyle,
  loadExternalJavascript,
} from 'client/utils/smart-view-utils';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  constructor(...args) {
    super(...args);

    this.loadPlugin();
  }

  @tracked chart;
  @tracked loaded = false;

  async loadPlugin() {
    await loadExternalJavascript('https://d3js.org/d3.v6.min.js');

    this.loaded = true;
    this.renderChart();
  }

  async fetchData() {
    const response = await this.lianaServerFetch.fetch(
      '/forest/custom-data',
      {}
    );
    const data = await response.json();
    return data;
  }

  @action
  async renderChart() {
    if (!this.loaded) {
      return;
    }

    const color = 'steelblue';

    // Don't comment the lines below if you want to fetch data from your Forest server
    // const usersData = await this.fetchData()
    // const data = Object.assign(usersData.sort((a, b) => d3.descending(a.points, b.points)), {format: "%", y: "↑ Frequency"})

    // To remove if you're using data from your Forest server
    const alphabet = await d3.csv(
      'https://static.observableusercontent.com/files/09f63bb9ff086fef80717e2ea8c974f918a996d2bfa3d8773d3ae12753942c002d0dfab833d7bee1e0c9cd358cd3578c1cd0f9435595e76901508adc3964bbdc?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27alphabet.csv',
      function (d) {
        return {
          name: d.letter,
          value: +d.frequency,
        };
      }
    );
    const data = Object.assign(
      alphabet.sort((a, b) => d3.descending(a.value, b.value)),
      { format: '%', y: '↑ Frequency' }
    );

    const height = 500;
    const width = 800;
    const margin = { top: 30, right: 0, bottom: 30, left: 40 };

    const x = d3
      .scaleBand()
      .domain(d3.range(data.length))
      .range([margin.left, width - margin.right])
      .padding(0.1);
    const y = d3
      .scaleLinear()
      .domain([0, d3.max(data, (d) => d.value)])
      .nice()
      .range([height - margin.bottom, margin.top]);

    const xAxis = (g) =>
      g.attr('transform', `translate(0,${height - margin.bottom})`).call(
        d3
          .axisBottom(x)
          .tickFormat((i) => data[i].username)
          .tickSizeOuter(0)
      );

    const yAxis = (g) =>
      g
        .attr('transform', `translate(${margin.left},0)`)
        .call(d3.axisLeft(y).ticks(null, data.format))
        .call((g) => g.select('.domain').remove())
        .call((g) =>
          g
            .append('text')
            .attr('x', -margin.left)
            .attr('y', 10)
            .attr('fill', 'currentColor')
            .attr('text-anchor', 'start')
            .text(data.y)
        );

    const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);

    svg
      .append('g')
      .attr('fill', color)
      .selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', (d, i) => x(i))
      .attr('y', (d) => y(d.value))
      .attr('height', (d) => y(0) - y(d.value))
      .attr('width', x.bandwidth());

    svg.append('g').call(xAxis);

    svg.append('g').call(yAxis);

    this.chart = svg.node();
  }
}

In the above snippet, notice how we import the D3js library. Of course, you can choose to use any other library of your choice.

The resulting chart can be resized to fit your use:

Creating a density map

This last example shows how you can achieve virtually anything, since you are basically coding in a sandbox. There's no limit to what you can do with Smart charts.

Template tab
<div class="c-smart-view">
    {{this.chart}}
</div>
Component tab
import Component from '@glimmer/component';
import {
  loadExternalStyle,
  loadExternalJavascript,
} from 'client/utils/smart-view-utils';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  constructor(...args) {
    super(...args);

    this.loadPlugin();
  }

  @tracked chart;
  @tracked loaded = false;

  async loadPlugin() {
    await loadExternalJavascript('https://d3js.org/d3.v6.min.js');
    await loadExternalJavascript('https://unpkg.com/topojson-client@3');

    this.loaded = true;
    this.renderChart();
  }

  @action
  async renderChart() {
    if (!this.loaded) {
      return;
    }

    const height = 610;
    const width = 975;
    const format = d3.format(',.0f');
    const path = d3.geoPath();

    // This is the JSON for drawing the contours of the map
    // Ref.: https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#json
    const us = await d3.json(
      'https://static.observableusercontent.com/files/6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27counties-albers-10m.json'
    );
    const features = new Map(
      topojson.feature(us, us.objects.counties).features.map((d) => [d.id, d])
    );
    // Population should contain data about the density
    const population = await d3.json(
      'https://static.observableusercontent.com/files/beb56a2d9534662123fa352ffff2db8472e481776fcc1608ee4adbd532ea9ccf2f1decc004d57adc76735478ee68c0fd18931ba01fc859ee4901deb1bee2ed1b?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27population.json'
    );

    const data = population.slice(1).map(([population, state, county]) => {
      const id = state + county;
      const feature = features.get(id);
      return {
        id,
        position: feature && path.centroid(feature),
        title: feature && feature.properties.name,
        value: +population,
      };
    });

    const radius = d3.scaleSqrt([0, d3.max(data, (d) => d.value)], [0, 40]);

    const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);

    svg
      .append('path')
      .datum(topojson.feature(us, us.objects.nation))
      .attr('fill', '#ddd')
      .attr('d', path);

    svg
      .append('path')
      .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
      .attr('fill', 'none')
      .attr('stroke', 'white')
      .attr('stroke-linejoin', 'round')
      .attr('d', path);

    const legend = svg
      .append('g')
      .attr('fill', '#777')
      .attr('transform', 'translate(915,608)')
      .attr('text-anchor', 'middle')
      .style('font', '10px sans-serif')
      .selectAll('g')
      .data(radius.ticks(4).slice(1))
      .join('g');

    legend
      .append('circle')
      .attr('fill', 'none')
      .attr('stroke', '#ccc')
      .attr('cy', (d) => -radius(d))
      .attr('r', radius);

    legend
      .append('text')
      .attr('y', (d) => -2 * radius(d))
      .attr('dy', '1.3em')
      .text(radius.tickFormat(4, 's'));

    svg
      .append('g')
      .attr('fill', 'brown')
      .attr('fill-opacity', 0.5)
      .attr('stroke', '#fff')
      .attr('stroke-width', 0.5)
      .selectAll('circle')
      .data(
        data
          .filter((d) => d.position)
          .sort((a, b) => d3.descending(a.value, b.value))
      )
      .join('circle')
      .attr('transform', (d) => `translate(${d.position})`)
      .attr('r', (d) => radius(d.value))
      .append('title')
      .text((d) => `${d.title} ${format(d.value)}`);

    this.chart = svg.node();
  }
}

In the above snippet, notice how we import the D3js library. Of course, you can choose to use any other library of your choice.

The resulting chart can be resized to fit your use:

Creating a Cohort Chart

This is another example to help you build a Cohort Chart.

Template tab
<div class="c-smart-chart">
  <div id="demo"></div>
</div>
Component tab
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import {
  loadExternalStyle,
  loadExternalJavascript,
} from 'client/utils/smart-view-utils';
function isValidHex(color) {
  return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
}
function shadeColor(color, percent) {
  //#
  color = isValidHex(color) ? color : '#3f83a3'; //handling null color;
  percent = 1.0 - Math.ceil(percent / 10) / 10;
  var f = parseInt(color.slice(1), 16),
    t = percent < 0 ? 0 : 255,
    p = percent < 0 ? percent * -1 : percent,
    R = f >> 16,
    G = (f >> 8) & 0x00ff,
    B = f & 0x0000ff;
  return (
    '#' +
    (
      0x1000000 +
      (Math.round((t - R) * p) + R) * 0x10000 +
      (Math.round((t - G) * p) + G) * 0x100 +
      (Math.round((t - B) * p) + B)
    )
      .toString(16)
      .slice(1)
  );
}
export default class extends Component {
  @service lianaServerFetch;
  @tracked loaging = true;
  constructor(...args) {
    super(...args);
    this.loadPlugin();
  }
  async loadPlugin() {
    await loadExternalJavascript('https://d3js.org/d3.v6.min.js');
    this.loaging = false;
    this.renderChart();
  }
  getRows(data) {
    var rows = [];
    var keys = Object.keys(data);
    var days = [];
    var percentDays = [];
    for (var key in keys) {
      if (data.hasOwnProperty(keys[key])) {
        days = data[keys[key]];
        percentDays.push(keys[key]);
        for (var i = 0; i < days.length; i++) {
          percentDays.push(
            i > 0 ? Math.round((days[i] / days[0]) * 100 * 100) / 100 : days[i]
          );
        }
        rows.push(percentDays);
        percentDays = [];
      }
    }
    return rows;
  }
  @action
  async renderChart() {
    // To fetch data from the backend
    // const data = await this.lianaServerFetch.fetch('/forest/custom-route', {});
    const options = {
      data: {
        // You can use any data format, just change the getRows logic
        'May 3, 2021': [79, 18, 16, 12, 16, 11, 7, 5],
        'May 10, 2021': [168, 35, 28, 30, 24, 12, 10],
        'May 17, 2021': [188, 42, 32, 34, 25, 18],
        'May 24, 2021': [191, 42, 32, 28, 12],
        'May 31, 2021': [191, 45, 34, 30],
        'June 7, 2021': [184, 42, 32],
        'June 14, 2021': [182, 44],
      },
      title: 'Retention rates by weeks after sign-up',
    };
    var graphTitle = options.title || 'Retention Graph';
    var data = options.data || null;
    const container = d3.select('#demo').append('div').attr('class', 'box');
    var header = container
      .append('div')
      .attr('class', 'box-header with-border');
    var title = header.append('p').attr('class', 'box-title').text(graphTitle);
    var body = container.append('div').attr('class', 'box-body');
    var table = body
      .append('table')
      .attr('class', 'table table-bordered text-center');
    var headData = ['Cohort', 'New users', '1', '2', '3', '4', '5', '6', '7'];
    var tHead = table
      .append('thead')
      .append('tr')
      .attr('class', 'retention-thead')
      .selectAll('td')
      .data(headData)
      .enter()
      .append('td')
      .attr('class', function (d, i) {
        if (i == 0) return 'retention-date';
        else return 'days';
      })
      .text(function (d) {
        return d;
      });
    var rowsData = this.getRows(data);
    var tBody = table.append('tbody');
    var rows = tBody.selectAll('tr').data(rowsData).enter().append('tr');
    var cells = rows
      .selectAll('td')
      .data(function (row, i) {
        return row;
      })
      .enter()
      .append('td')
      .attr('class', function (d, i) {
        if (i == 0) return 'retention-date';
        else return 'days';
      })
      .attr('style', function (d, i) {
        if (i > 1) return 'background-color :' + shadeColor('#00c4b4', d);
      })
      .append('div')
      .attr('data-toggle', 'tooltip')
      .text(function (d, i) {
        return d + (i > 1 ? '%' : '');
      });
  }
}

In the above snippet, notice how we import the D3js library. Of course, you can choose to use any other library of your choice.

Style tab
.c-smart-chart {
  display: flex;
  white-space: normal;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-color: var(--color-beta-surface);
}
.box {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  width: 100%;
}
.box-body {
  max-height: 500px;
  overflow: auto;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.box-header {
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.box-header .box-title {
  display: inline-block;
  font-size: 18px;
  margin: 0;
  line-height: 1;
}
.box-title {
  display: inline-block;
  font-size: 18px;
  margin: 0;
  line-height: 1;
}
.retention-thead,
.retention-date {
  background-color: #cfcfcf;
  font-weight: 700;
  padding: 8px;
}
.days {
  cursor: pointer;
  padding: 8px;
  text-align: center;
}

The resulting chart can be resized to fit your use:

This bar chart is inspired by .

This density map chart is inspired from .

this one
this one
@forestadmin/agent
forestadmin-agent-django
forestadmin-agent-flask
forestadmin/laravel-forestadmin
forestadmin/symfony-forestadmin