PocketBlocks Docs
English
English
  • Overview
  • Installation
  • Build apps
    • Create a new app
    • App editor
    • Event handlers
    • Write JavaScript
      • Write JavaScript in {{ }}
      • JavaScript query
      • Transformers
      • Temporary state
      • Data responder
      • Built-in JavaScript functions
      • Use third-party libraries
    • Component guides
      • Option lists
      • List View
      • Drawer
      • Image
      • Charts and graphs
      • File upload
      • Custom component
      • Use Markdown
    • Module
    • Design app UI
      • Style, theme, and usability
      • Design an efficient and user-friendly form
    • Navigation
    • Keyboard shortcuts
    • Version and release management
  • Build plugins
    • Develop UI component plugins
  • Workspace management
    • Authentication
    • Members and groups
    • Permissions for resources
    • Custom branding
  • Miscellaneous
    • Where are the Data Sources/Query Library?
    • Embedding Apps
Powered by GitBook
On this page
  • UI mode
  • Data format
  • Chart type
  • X-axis
  • Chart series
  • Echarts JSON
  1. Build apps
  2. Component guides

Charts and graphs

PreviousImageNextFile upload

Last updated 11 months ago

Charts and graphs are visual representations of data that are used to simplify complex information and make it easier to understand. They can help highlight key insights and provide a quick summary of data that would otherwise be difficult to interpret. Charts and graphs come in different forms, such as bar graphs, line graphs, pie charts, scatter plots, and more, each suited for different types of data and analytical purposes.

PocketBlocks allows you to insert multiple forms of charts and graphs into your apps to satisfy your needs in different use cases.

UI mode

Data format

In UI mode, the Chart component supports presenting data stored as an array of JS objects. Each object field corresponds to a column in tabular format. The objects in the following array contain three fields: date, fruit, and count.

[
  { "date": "2022-03-01", "fruit": "apple", "count": 4 },
  { "date": "2022-03-01", "fruit": "banana", "count": 6 },
  { "date": "2022-04-01", "fruit": "grape", "count": 10 },
  { "date": "2022-04-01", "fruit": "apple", "count": 3 },
  { "date": "2022-04-01", "fruit": "banana", "count": 2 }
]

You can also use JS code in {{}} to reference data from other components or queries, or to transform data to meet specific needs.

For example, the query result of query1 is as follows.

{
  "date": [
    "2022-03-01",
    "2022-03-01",
    "2022-04-01",
    "2022-04-01",
    "2022-04-01"
  ],
  "fruit": ["apple", "banana", "grape", "apple", "banana"],
  "count": [4, 6, 10, 3, 2]
}

You can transform it using transformer transformer1 with the following JS code.

let dates = query1.data.date;
let fruits = query1.data.fruit;
let counts = query1.data.count;
let result = [];
for (let i = 0; i < dates.length; i++) {
  result.push({ date: dates[i], fruit: fruits[i], count: counts[i] });
}
return result;

Then reference the value of the transformer {{transformer1.value}} as the data for the chart.

Chart type

PocketBlocks supports four types of charts: bar chart, line chart, scatter chart, and pie chart. You can select the chart type in Properties > Data > Chart type. You can also customize the layout and style of your chart in Properties tab.

X-axis

Bar charts, line charts, and pie charts map values to categorical variables. Thus, in such charts, the X-axis usually shows non-numeric data—for example, date or department.

Chart series

In most types of charts, the Chart series (Y-axis) presents numeric values for the categories on X-axis. By default, PocketBlocks populates all numeric fields to Y-axis. You can hide unnecessary fields in Properties > Chart series.

Echarts JSON

By default, PocketBlocks automatically detects the X-axis data and its type. You can also manually select one among "Category axis", "Value axis", "Time axis", or "Log axis". For detailed information, see .

Apart from the built-in charts and graphs, you can also plot your data with , an open-source JS visualization library. You only need to complete the Configuration > Option field in JSON format. For detailed information, see and .

If you need more configuration options for charts, create a issue on .

X axis type
Apache ECharts
ECharts docs
ECharts examples
Github