📊Charts and graphs

Charts and graphs serve as visual depictions of data, aiming to simplify intricate information and enhance comprehension. They facilitate the identification of significant patterns and offer concise summaries of data that may otherwise pose challenges for interpretation. These visual aids manifest in various formats, including bar graphs, line graphs, pie charts, scatter plots, and others, tailored to accommodate diverse data types and analytical requirements.

QuickDEV offers the capability to integrate various types of charts and graphs into your applications, catering to a wide range of requirements across different use cases.

Data format

In UI mode, the Chart component facilitates the presentation of data stored as an array of JavaScript objects. Each field within an object corresponds to a column in tabular format. The objects within the provided array consist of three fields: date, fruit, and count.

[
  { "date": "2022-05-01", "fruit": "orange", "count": 8 },
  { "date": "2022-05-01", "fruit": "apple", "count": 5 },
  { "date": "2022-06-01", "fruit": "banana", "count": 7 },
  { "date": "2022-06-01", "fruit": "grape", "count": 9 },
  { "date": "2022-07-01", "fruit": "apple", "count": 6 }
]

Within {{}}, you have the flexibility to utilize JavaScript code to reference data from other components or queries, as well as to manipulate data to fulfill specific requirements.

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

{
  "date": [
    "2022-05-01",
    "2022-05-01",
    "2022-06-01",
    "2022-06-01",
    "2022-07-01"
  ],
  "fruit": ["orange", "apple", "banana", "grape", "apple"],
  "count": [8, 5, 7, 9, 6]
}

To complete the transformation, execute the JavaScript code supplied by transformer1transformer.

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

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

Chart type

QuickDEV offers support four distinct types of charts: bar charts, line charts, scatter charts, and pie charts. You can specify the desired chart type within Properties > Data > Chart type. Additionally, you have the flexibility to customize the layout and style of your chart through the Properties tab.

X-axis

Bar charts, line charts, and pie charts typically associate values with categorical variables. Therefore, in these chart types, the X-axis typically displays non-numeric data, such as dates or department names.

By default, QuickDEV automatically identifies the X-axis data and its type. However, you also have the option to manually select one of the following: "Category axis", "Value axis", "Time axis", or "Log axis". For more detailed information, refer to the X axis type documentation.

Chart series

In most chart types, the Chart series (Y-axis) represents numeric values corresponding to the categories on the X-axis. By default, QuickDEV assigns all numeric fields to the Y-axis. However, you can hide any unnecessary fields within Properties > Chart series.

Echarts JSON

In addition to the built-in charts and graphs, you have the option to plot your data using Apache ECharts, an open-source JavaScript visualization library. Simply fill out the Configuration > Option field in JSON format. For further details, refer to the ECharts documentation and ECharts examples.

For styling your charts, the Theme Editor of ECharts serves as a valuable tool. It allows you to export a JSON file, which can be utilized in the Workspace Themes section to style both native chart types and ECharts.