Graphs

In this tutorial you will learn to use all the options available in RUAL. RUAL currently uses Apexcharts it's graphs.


Test Data

The graphs needs some data, for this you can use a Storage you already created. When you don't have your own storage, we created a random data generator on every refresh. You can rebuild it or just copy and paste it from our Demo: Blueprint

Fake data
Loop create fake data

Bar/Line Chart

None of the graphs available in RUAL can be used directly after the Page action when you want to use storage/custom data. Hard coded data can always be used in the graphs, but in this tutorial we will be using custom data and creating the graph using the Update Dynamic content. If you don't know how to use the dynamic content needed for this tutorial you can read the following tutorial: Use dynamic content

The basics of the bar/line chart is very simple. The data inpin expects an array of objects. These objects needs to look something like this:


    {
      'X': (The X-axis field),
      'Y': (You can have multiple Y axis for multiple data lines/bars)
    }
                  

When you still don't understand how the array witht objects need to look like we have made a demo blueprint where you can look at the data we used: Blueprint

After creating your first data set for your graph you can connect it to the Data in-pin. And select the fields for the X-axis and Y-axis using the X Axis & Y Axis in-pins. You can use the fields: Get Multiple for the Y Axis in-pin, That way there will be multiple data lines/bars in your graph.

1 Field used

Fake data

Multiple Field used

Fake data

When you have created the graph, you can use the other options to style it. Most of the options are easy to uderstand. The options of the bar and line chart are alot alike, but there are some differences. Here is the list with a short description of all the options:


Universal options

Row Colors
The background color for every row in the graph.
Used: #bbb, #eee

Row colors

Data Colors
The colors of the data bars/lines.
Used: #E23A8B, #276DF6, #8B44C2

Data colors

Title Align
Align the title along the top: left, center, right
Used: ceter

Title align

Theme
The theme of the graph: light, dark
Used: dark

Theme

Color palette
Changes the color palette: palette1 through 10
Used: palette8

Color palette

Height
Gives the chart a custom height in px
┬žUsed: 500

Height

Show Data Labels
Shows the data on the bar/line
Used: True

Data Labels

Zoom
Zoom in oon the data
Used: True

Zoom

Bar exclusive options

Horizontal
Rotates the graph horizontally
Used: True

Horizontal

Stacked
Stackes multiple bars on top of each other
Used: True

Stacked

Bar width
Sets the width of the bars in PX or %
Used: 80px

Bar Width

Label position
Positions the label on the bar. Top, Center, Bottom
Used: Top

Label Postion

Label Offset X/Y
Positions the label using PX
Used: X: 0, Y: -10

Offset

Label Fontsize
Size of the labels
Used: 20px

Font-size

Line exclusive options

Curve
Changes the line. Straight, smooth, Stepline

Used: Straight

Curve

Line Width
Width of the lines
Used: 10

Line Width

Marker Size
Shows a circle on the point of data
Used: 10

Line Width

Label Color
Changes the color of the labels
Used: #E23A8B

Line Width

Combo chart

Besides the Line and bar chart there is an combined chart of the 2, the Apexcharts: Combo Chart. Just like the other 2 charts you can use the fields: Get Multiple. The options used in the combo chart are also used in the other two charts. The main difference are the 2 Fielddefinitions in-pins: Y Axis Line and Y Axis Bar.