Icon

Radar Chart with Echarts example

There has been no title set for this workflow's metadata.

This workflow showcases different ways to utilize the "Generic Echarts View" node. The "Generic Echarts View" node can be found in the node repository under the KNIME Views category.

You can easily download and run the workflow directly in your KNIME installation. We recommend that you use the latest version of the KNIME Analytics Platform for optimal performance. It can also be deployed as a Data App in KNIME Business Hub.

The "Generic Echarts View" node is a particular view node because it allows the creation of a custom visualization from scratch using Apache ECharts and JavaScript by configuring the option object.

The configuration dialogue of the node includes an AI prompt, which allows even those without coding experience to modify base code from the Apache Echarts examples gallery. Using prompts such as "Add a tooltip to my chart," users can easily make modifications to the code.

To create this Radar Chart, we copied and pasted an example from the Apache Echarts gallery and made adjustments using the AI's recommended changes to the original code. Find the link to an example in the "External resources" section.

We used the "FIFA 22 complete player dataset" as our input data. To make it easier to visualize, we've created a smaller dataset that includes the Top 50 female football players. If you're interested in exploring more datasets, you can find the complete dataset by following the link in the "External resources" section.

Also, we have included a data app example in the workflow using Widgets nodes. You can view it on your Local Machine or execute it in the KNIME Business Hub.

URL: Data Source: "FIFA 22 complete player dataset" https://www.kaggle.com/datasets/stefanoleone992/fifa-22-complete-player-dataset?select=female_players_22.csv
URL: Basic Radar Chart example https://echarts.apache.org/examples/en/editor.html?c=radar
URL: Apache Echarts Examples Gallery https://echarts.apache.org/examples/en/index.html

Radar Chart Visualization

  • This workflow demonstrates how to use the Generic Echarts View node to create a customized Radar Chart. 

  • To illustrate the Radar Chart, we will use the "FIFA 22 complete player dataset" with CC0 license as the data source.

  • To learn more about the workflow, click the left bar and check the description section.

Standard Configuration

  1. To access the configuration window, hover over the node and click on the gear icon.

  2. To create this basic version, we copied the code from the 'Basic Radar Chart' from the Echarts example page.

  3. You can access the full gallery of Echarts examples by clicking the three dots menu in the top-right corner and selecting "Apache Echarts Examples".

Enriched Configuration

Code changes:

We have added the following to our base code:

  1. Chart title: "Players Skills".

  2. Tooltip available.

  3. Legend data from the "Player name" column.

  4. Radar Chart indicators from numerical input columns (e.g. pace, shooting).

  5. Input table data is used to define series values.

Useful prompts:

  • Create a new related title.

  • Add a tooltip.

  • Use the "Player name column to build the legend.

  • Use the Input Table 1 to create the radar chart.

Click on the node and check its description section for more info on prompts.

Flow Variable Version

To replace a chart field with a flow variable it is possible to do it directly in the code, in our example :

"title: {

text: flowVariables["chart_title"]

}"

Data App

  • To open the view, hover over the component and click the lens icon.

  • To access the component, right-click and select "Component", then choose "Open Component".

  • With the Table View node, we are dynamically
    changing the players displayed in the Radar Chart.


Enriched Configuration
Generic ECharts View
Top five footballers by "Overall Score" and filtered columns for cleaner table.
Pre-processing
Standard Configuration
Generic ECharts View
Top 50 Female PlayersRatings 2022
Table Reader
Radar Chart in a Data App
Flow Variable Version
Generic ECharts View
Overwrite title
Variable Creator

Nodes

Extensions

Links

Download

To use this workflow in KNIME, download it from the below URL and open it in KNIME:

Download Workflow
Created by: diego.rodriguez
Created at: 2023-11-27
On NodePit since: 2023-12-06
Last update: 2026-11-10
Created with KNIME version: v5.2.0
Tags: Release 5.2KNIME ViewsDynamic VisualizationRadar ChartECharts

Deploy, schedule, execute, and monitor your KNIME workflows locally, in the cloud or on-premises – with our brand new NodePit Runner.

Try NodePit Runner!