Skip to content

How to connect charts to Dashboard

This guide explains how to see your accounting system's data on a dashboard in just a few steps: sign up, connect a data source, and add charts. The most common data source is a reporting HTTP service of an accounting system; any service that returns data in JSON format is connected the same way.

1. Sign up and sign in

  1. Open the sign-up page and enter your name, email, and password. If the page has a Sign in with Google button, you can use it instead.
  2. After signing up with a password, confirm your email using the link in the message you receive: the app is not available until your email is confirmed.
  3. If you are already registered, use the sign-in page.

2. Organization, workspace, and dashboard

  1. In the app, click "Create organization" and enter your company name. You will become the owner of the organization and will be able to invite administrators to it.
  2. In the side menu, select "New workspace" — a workspace groups dashboards by topic, for example "Sales" or "Finance".
  3. Next to the workspace name, click "+" or select "New dashboard" and enter a name for the dashboard.

3. Data source

A data source is the address of the service the dashboard reads data from. Data sources belong to the organization: a single data source can be used on any dashboard.

  1. In the side menu, open "Data sources" and click "Add source".
  2. Enter the "Source name", select the "Accounting system" type, and fill in the fields:
    • Reporting HTTP service address — for example, https://erp.example.com:8443/base/hs/dashboard/. Ports 80, 443, and 1024–65535 are supported.
    • Login and Password — the account the HTTP service runs under. The password is stored encrypted and is never displayed again.
    • Timeout — how many seconds to wait for a response, from 5 to 30.
    • "Allow unencrypted HTTP" — check this only if the service does not support HTTPS: the login, password, and data are then transmitted in plain text.
  3. Click "Save source".

For other systems, select the "Web service (JSON)" type: it accepts any JSON array of records and supports authentication with a Bearer token, a login and password, or an access key in a header. You can also connect a Google spreadsheet shared via link.

4. Query

A query is a specific request to a data source, for example a sales report. A single data source can have many queries.

  1. In the data source card, click "Add query" and enter a name.
  2. The method is POST (the standard for a reporting HTTP service). You can leave the path empty if the service address is already complete.
  3. In the "Request body (JSON)" field, specify the request parameters, for example {"Метод": "Продажі", "Дата1": "20250601000000", "Дата2": "20250831235959"}.
  4. Save the query and click "Check data" — the received records will appear below the query.
  5. If needed, open "Column mapping": in the "Value" field, select the main metric, and below it up to seven additional metrics, as well as the label, time, and category. For a reporting HTTP service, the mapping is set up automatically: the first numeric metric without gaps becomes the main one, and the other numeric ones become additional.

5. Charts on the dashboard

  1. Open the dashboard and click "Edit", then "Add widget".
  2. Enter a name and units, select "Data query", and choose a display type. The default is "As in the source": the chart type is taken from the service response. Colors, scale limits, and thresholds from the response apply to any display type. You can also choose a display type manually: number, line chart, area chart, bar chart, table, pie or donut chart, or gauge. For a gauge, you can set a "Gauge maximum", for example a sales plan; it takes precedence over the maximum from the response.
  3. Drag widgets by their header and resize them by their edges. The layout is saved automatically.
  4. In the dashboard actions menu, the "Name and description" item sets automatic data refresh, and the "Access" item sets viewers and the view link.

6. Test reporting HTTP service

To try it without your own service, connect the test reporting service:

  • Data source type: "Accounting system".
  • Address: http://194.62.137.215/ibms-dashboard-test-chart/hs/ibms/dashboard, check "Allow unencrypted HTTP".
  • Login: ДашбордIBMS, password: 753.
  • Query 1: POST method, body {"Метод": "ТестовийГрафік1"}.
  • Query 2 (with a period): body {"Метод": "ТестовийГрафік2", "Дата1": "20250601000000", "Дата2": "20250831235959"}.

Both queries return two metrics each for several months. You can check that the service is working in a browser: the service address will ask for a login and password and display the line {"Sucsess": true, "TextError": "", "Result": "http-сервіс (GET) працює!"} (the service spells the Sucsess field exactly this way; the Dashboard service also accepts the spelling Success).

7. Your own reporting HTTP service

  1. Download the test accounting database with a sample HTTP service (Designer login: Адміністратор, password 753) and deploy it.
  2. Publish the database's HTTP service on a web server so that it is accessible from the internet. The address will look like http[s]://<server address[:port]>/<database name>/hs/ibms/dashboard. The Dashboard service does not read internal network addresses (192.168.x.x, 10.x.x.x, etc.).
  3. In the "Accounting system" data source, enter this address and the test database's HTTP service account: login ДашбордIBMS, password 753. The queries are the same as for the test service.
  4. The service must respond with a JSON object: {"Sucsess": true, "TextError": "", "Result": {"Status": "OK", "TextError": "", "Result": {"type": "chart", "data": {"columns": [["Продажі", 100, 120]]}, "axis": {"x": {"categories": ["Січень", "Лютий"]}}}}}. The nested Result can also be a string containing JSON; the encoding can be UTF-8, UTF-16, or Windows-1251.
  5. The type field next to the data says what is being sent: chart — a chart configuration (the data, axis and other fields, as in the example); html — ready-made markup in the html field and styles in the css field (HTML display in widgets will be supported later; the service can already return this format). A response without a type field is read as a chart, so existing services keep working unchanged. Limits: html up to 200 KB, css up to 50 KB. New services are advised to set type explicitly.
  6. The following data is taken from the response: metrics from data.columns or data.rows, axis categories from axis.x.categories or data.x, and metric names from data.names. The chart type from the response is applied in a widget with the "As in the source" display type, while colors, scale limits, and color thresholds apply to any display type; formatting functions from the response are not executed.
  7. If the service returns "Sucsess": false (or "Success": false) or a "Status" other than OK, the TextError text is shown to the organization's team when the query is checked.

8. If the chart does not appear

  • In "Data sources", click "Source response" next to the query: you will see the request address, status, type, and text of the service response, including any error message.
  • Status 401 — check the login and password; address error — check the port and the HTTP checkbox; "The source did not respond in time" — increase the timeout or check the server.
  • If data has been received but the chart is empty, check the "Column mapping" and the widget's display type.