Locoia
  • Overview
  • Account and User Settings
    • User types
    • Adding Users
    • Teams
    • Access Permissions
    • 2 Factor Authentication 2FA
    • Versioning and Snapshots
    • Activity Log
  • Reset your Password
  • Invoices and Payments
  • Automation
    • Flow Builder
      • Flow Building Best Practices
      • Jinja Template Language
        • Jinja: (Custom) variables, wildcards and functions
        • Magic Code Samples
      • Connectors & APIs
        • Titles and References
        • Referencing data of objects, lists, arrays - how to pass data dynamically
        • Accessing Objects with JSONPath
        • Merging nested JSON objects
        • Parsing JSONs from String
        • Response Headers & Status Codes
        • Custom Data Fields
        • Wildcard API calls and actions
        • Response cleaning
      • Text Strings, Date & Time, Numbers and Currencies
        • Text and Strings
        • Dates & Time
        • Numbers (Thousand Separators, Currencies)
      • Email-formatting
      • Code Fields
      • Running single Flow steps
      • Flow run data retention, logging, and error notifications
      • Advanced View
      • Dynamic Title
      • Custom Error Handling
      • Error Handling Flows
      • Automatic Pagination
    • Flow Debugger
      • Automatic Retrying
      • Run Flows again
      • Troubleshooting Flows
    • Community Library
  • Connectors & Helpers
    • Connectors
      • Monday.com
      • ActiveCampaign
      • Aircall
      • Allthings
      • Amplitude
      • Animus
      • Assetti
      • Awork
      • AWS RDS Database - How to connect
      • bubble.io
      • Casavi
      • Chargebee
      • CleverReach
      • comgy
      • commercetools
      • Everreal
      • Exact Online
      • Facebook Marketing
      • Fahrländer Partner
      • FastBill
      • FILESTAGE.io
      • Freshdesk
      • Freshsales
      • Google Ads
      • Google Ads Lead Form
      • Google Analytics
      • Google Chat
      • Google Drive
      • Google Sheets
      • Gmail
      • HubSpot
      • Heyflow
      • iDWELL
      • ImmobilienScout24
      • Instagram Ads
      • Intercom
      • klaviyo
      • Kiwi Opening Doors
      • Klenty
      • Klipfolio
      • Kolibri CRM
      • konfipay
      • KUGU
      • Shopify
      • S3 AWS
      • SQS AWS
      • Lambda AWS
      • Learnster
      • lexoffice
      • LineMetrics
      • Linkedin
      • Locoia
      • Notion
      • MailGun
      • Makula
      • Microsoft Dynamics 365
      • Microsoft OneDrive
      • MixPanel
      • MongoDB
      • Odoo
      • OnFleet
      • OnOffice
      • Oracle NetSuite
      • Outbrain
      • Quickbooks
      • Trello
      • PandaDoc
      • Personio
      • Pinterest Ads
      • Pipedrive
      • Plentific
      • PriceHubble
      • relay
      • REALCUBE
      • Sage ERP
      • Salesforce
      • SAP
      • Scoro
      • Seafile
      • sevDesk
      • SharePoint
      • SharpSpring
      • Slack
      • Snapchat Marketing
      • Snowflake
      • Teamleader Focus
      • Teamwork.com
      • Tableau
      • TikTok
      • TinQwise
      • The Trade Desk
      • Twitter
      • Typeform
      • WordPress
      • Xero
      • Youtube
      • Zendesk
      • Zoho CRM
      • Zoom
    • Helpers
      • Scheduler
      • Webhook
      • Dict Helper
      • Spreadsheet Helper
      • REST Helper
      • Boolean Helper
      • Multi Case Helper
      • Looper
      • FTP Helper
      • CSV Helper
      • XLSX Helper
      • Mail Sender
      • Flow Trigger
      • File Storage Helper
      • Terminate Helper
      • Delay Helper
      • SQL Connector
      • PDF Helper
      • Zip Helper
      • Data Warehouse Helper
      • XML Helper
      • Form Helper
      • Arrow
      • Error Arrow
    • Authentication Types Available
      • Setting up authentication
      • OAuth1
      • OAuth2
      • Refreshable token
      • AWS Signature
      • Basic Auth and Other Simple Authentication Methods
      • How are API versioning and API updates handeled?
      • Custom OAuth2 clients (apps)
    • Building Connectors
      • Base Connector Setup
        • Connector Auth Validation
        • GraphQL APIs
        • Rendering with User Input
      • Building Connector Actions
        • Actions Examples
      • Search Automation
      • Pagination Automation
      • Uploading Files in Actions
      • Working with SOAP APIs
    • Super Actions
    • Webhook Trigger for Connectors
    • Data Mapping and Env Variables
  • Embed - White Label Portal
    • Embed Overview
      • 1. Embed Flow
        • 1.1 Creating Embed Flows
        • 1.2 Updating Embed Flows
        • 1.3 Embed Error Handling
        • 1.4 Setting up Callbacks for Integration activation/deactivation
        • 1.5 Setting up Remote search
        • 1.6 Setting up End User logs
      • 2. Configure Embed
        • 2.1 Embed Integration via SSO
        • 2.2 Proprietary connector setup
        • 2.3 Sharing level
        • 2.4 Consent screen
        • 2.5 Account Secrets
        • 2.7 Further settings
      • 3. Integrate Embed
        • 3.1 iframe vs native embed
        • 3.2 Customizing CSS
        • 3.3 Events emitted from iframe to parent window
      • 4. Embed for End User
        • 4.1 Embed Remote Search
        • 4.2 Embed End User Logs
      • 5. Test Embed Configuration
        • Testing example
      • 6. Embed Integrations and Connector Auths
    • Embed FAQs
  • Data and Dashboards
    • Dashboards & Insights
      • Introduction to Dashboards
      • Introduction to Insights
      • Introduction to Data Sources
      • Dashboard Filters
      • Insight Marketplace - Using Pre-Built Insights
      • Writing SQL Queries
      • Useful SQL Examples
      • Charts
        • Line Chart
        • Bar and Horizontal Bar Chart
        • Stat Card
        • Pie Chart
        • Gauge Chart
        • Donut Chart
        • Stacked Bar, Horizontal Stacked Bar, and Normalized Horizontal Stacked Bar
        • Multiple Line Chart
        • Pivot Table
        • Map Chart
  • Best Practice Guides
    • Integration Best Practices
    • Integration Check List
    • CSV Files in Excel
    • Multi-Tenant Flows
    • On-Premise Integrations
    • Database Connection Setup
    • Data and General Security
    • Using Tags
    • FAQ
  • API
    • Locoia API Authentication - Personal Access Token
    • Create Connector Authentication
  • Contact us
  • Status of Service
  • Data Privacy
  • Imprint
Powered by GitBook
On this page
  • Introduction
  • Expected Data and Graph Designer

Was this helpful?

  1. Data and Dashboards
  2. Dashboards & Insights
  3. Charts

Stacked Bar, Horizontal Stacked Bar, and Normalized Horizontal Stacked Bar

PreviousDonut ChartNextMultiple Line Chart

Last updated 3 years ago

Was this helpful?

Introduction

The Stacked Bar Chart displays data of one series, separated into different categories ("stacks") as stacked bars:

Stacked Bar Chart

When selecting Horizontal stacked Bar the same is displayed horizontally:

The Normalized horizontal stacked Bar Chart (also known as 100% stacked bar) shows the stacks' size as the proportioned amount of the total amount, i.e. the percentage of the stack's value based on the total value of all the stacks in the corresponding bar:

Expected Data and Graph Designer

All the variations of the Stacked Bar Charts expect data in a three column format, with the x-axis (for the (Normalized) Horizontal stacked Bar Chart: y-axis; the following mentions of x-axis are analogous for the y-axis for the (Normalized) Horizontal stacked Bar Chart) value as the first column, the stack name as the second column, and the value of the stack as the third column:

Date

Type

Amount

2020-10-01

none

20

2020-10-01

correct

12

2020-10-01

wrong

5

2020-10-02

none

24

2020-10-02

wrong

4

2020-10-03

none

1

So there needs to be a row for every x-axis value and corresponding stack. If a stack does not have a value for a certain x-axis value it can be left out as shown in the example above (stack correct for x-axis value 2020-10-02).

Therefore, new stacks can simply be added by adding a new row with the stack's data for the corresponding x-axis value.

This required format can be achieved in SQL with a GROUP BY statement which groups by the x-axis value and the stack name and forms the sum of the stack value.

The selection of the x-axis in the Graph Designer does not have an effect.

Please make sure that all amounts are numbers and not strings. If your chart does not look as you expected, please cast the amount as integer as shown in this SQL query example:

SELECT Date, Type, CAST(amount as INT) as Amount FROM yourtable;
Horizontal stacked Bar Chart
Normalized horizontal stacked Bar Chart