[Guide] Using the charts component

Guides
1

Guide on Charts Component :art::bar_chart:

Charts are powerful tools for visualizing data, and with the Chart Component and Chart Data 2D Component, you can create dynamic and visually engaging charts effortlessly. Here’s a step-by-step guide to get you started!

Getting Started :rocket:

  1. Drag and Drop:
    Add the Chart Component to your workspace to create a chart.
    Then, drag the Chart Data 2D Component — this will handle adding data to your chart.
    image

Understanding the Blocks :jigsaw:

Let’s break down the blocks of both components and explain their purpose with examples.

Chart Component Blocks

  1. Entry Clicked (Event Block):
    • Purpose: Triggered when a user clicks on a data point in the chart.
    • Returns:
      • Series (which dataset was clicked)
      • X and Y coordinates of the clicked point.
    • Use Case: Interactive charts where users need detailed data.
    • component_event
      component_event422×170 9.41 KB
  1. Extend Domain to Include (Function Call):
  1. Reset Axes (Function Call):
    • Purpose: Resets the X and Y axes to their default ranges.
    • Use Case: Useful for resetting zoomed or customized views.
      component_method (2)
  1. Set Domains (Function Call):
  1. Set Ranges (Function Call):
  1. Grid Enabled (Property Block):
    • Purpose: Toggles the grid display (Boolean).
    • Use Case: Improves readability by adding gridlines.
      component_set_get
  1. Labels (Property Block):
    • Purpose: Sets labels for the X-axis.
    • Use Case: Add meaningful names to represent the data points clearly.
      component_set_get (1)
  1. Legend Enabled (Property Block):
    • Purpose: Toggles the chart legend (Boolean).
    • Use Case: Helps users identify different series in the chart.
      component_set_get (2)
  1. Type (Property Block):
    • Purpose: Defines the chart type (e.g., Line, Bar, Pie, etc.).
    • Use Case: Switch between different visualization styles.
      image
      component_set_get (3)
      image
      image221×227 3.9 KB
  1. X from Zero & Y from Zero (Property Block):
  • Purpose: Ensures that axes start from zero for better data representation.
    component_set_get (5)
    component_set_get (4)

Chart Data 2D Component Blocks

  1. Add Entry (Function Call):
  1. Import Data (Function Call):
    • Purpose: Import data directly from external sources like:
  1. Remove Entry (Function Call):

Sample Charts and Blocks :art::books:

Here’s a sample chart setup with the relevant blocks:

1732278577231
17322785772311080×1091 75 KB

1732278577235
17322785772351080×1090 91.7 KB

1732278577239
17322785772391080×1075 91.1 KB

1732278577244
17322785772441080×1076 86.5 KB

1732278577248
17322785772481080×1071 91.7 KB

  1. Interactive Line Chart:
    Showcases dynamic data with entry-click interactivity, allowing users to explore specific points on the graph.

  2. Bar Chart with Legends:
    Helps differentiate between datasets using a legend, ideal for comparing categorical data.

  3. Scatter Plot with Labels:
    Displays data points and gridlines for better analysis, perfect for showing relationships between two variables.

  4. Area Chart:
    Highlights trends with the area beneath the line filled, suitable for cumulative values or part-to-whole comparisons.

  5. Pie Chart:
    Represents data as slices of a circle, ideal for visualizing percentages and proportions.

Conclusion

With the Chart Component and Chart Data 2D Component, you can create highly interactive and customizable charts to fit your project needs. Experiment with different chart types, data sources, and configurations to bring your data to life! :star2:

Have questions or ideas? Drop them below! :point_down:

5 Likes
2

An informative guide :clap:

I believe you may have forgotten to include the example of blocks.

1 Like
3

you just need to use this block and just select the chart type

1 Like
4

Good guide, thanks.

1 Like
5

Being a developer of Niotron for a long time I didn’t even had the knowledge that these chart components are this much powerful, but this guide really revealed the power of what we can performs with the charts, Thank you for this great guide​:call_me_hand::call_me_hand:

1 Like
6

Thanks @Joejsanz

1 Like
7

:heart:

Yes these are really helpfull, i made a guide as these are least used because user don’t know aboit these.

1 Like