Mixed Chart

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Mixed Chart element (4) under the “Chart” (3) category from the “Elements” (2) panel on the left edge.

Located in the Properties panel:

Options: Used to specify general properties. You can connect an action to the chart with the Actions drop-down menu in Options. In addition, data matching should be done according to the action added in this field. Data is displayed on the chart with the connected action. In general, after the action connection is made, the following fields are displayed in the Options field:

1. Actions: It is the feature where SQL actions are called in order to display the data desired to be presented in the chart.
2. X Axis Field: X axis is the horizontal axis in the chart. It usually allows you to specify the data set to be displayed on the x-axis. It is used to determine how different chart types are positioned on the x-axis, especially in mixed charts. For example, you can use this property to control how a line chart and a bar chart are displayed on the same x-axis.

Axis Value Field: It allows you to specify the data set to be displayed on the vertical axis in the chart. It is the property where the value is specified

1. Options:

• Action: This is the field where the data action is called to display which data will be displayed from the database in the form of points in the mixed chart.
• X Axis Field: This is the field where point values are entered.
• Axis Value Field: It is the field where the description and values are specified in the point.

2. Color: It is the field where the point color is determined in the mixed chart.

1. Options:
   • Actions: This is the field where SQL actions are called to display the data to be presented in the graph.
   • X axis Value Field: This is the field where line values are entered.
   • Axis Value Field: It is the field where line values are specified.
2. Color: Determines the color of the line graph. Color is usually used to distinguish the line distinctly from other elements.
3. Label: Adds a label that represents the line chart. It is typically used to identify or describe a specific line in the chart.
4. Dash Spacing: Determines the amount of space between dashed lines. Used to customize the appearance of the line chart using dashed lines.
5. Dash Length: Determines the length of the dashed lines. Can be used to highlight a particular trend or pattern by showing the line chart with a dashed pattern.
6. Line Width: Determines the line thickness of the line chart. It is used to increase or decrease the prominence and emphasis of the line chart.

You can customize user access with “Anonymous Access” and “All Roles Access” authorization options on the screens and elements of your application. While “Anonymous Access” enables access without any account information query, “All Roles Access” provides access by verifying user account information.

For element level authorization, you can manage the security and user experience of your application by selecting the relevant element and editing the “Authorization” settings from the Properties panel.

It allows you to adjust the visibility of screens or elements. Visibility in Elements allows you to regulate visibility based on a specific state or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.

1. Click on the element on the screen.
2. Open the “Properties” panel on the right side.
3. Click on the “Visibility” field and make one of the following selections according to the needs of your application. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.

• Always Visible: Ensures that the screens in your app are always visible. ‍
• Hidden: Allows hiding screens in your application. ‍
• Sometimes Visible: Makes screens in your application conditionally visible.

Allows you to make elements editable.

• Enabled: Selecting this option makes the element editable.
• Disabled: In this case, the element cannot be edited.
• Sometimes Enabled: This option means that the element is sometimes editable and sometimes not, depending on certain conditions.

By customizing your elements with the Styling Panel, you can create unique and impressive user interfaces in your web and mobile applications.

The sections defined below vary depending on the element.

• Layout‍: Here you can make visual adjustments such as sizing, alignment and padding of elements. These settings also affect the layout of other elements within the element. Properties include Size, Min Size and Align; however, some elements may not support the Display property.
• Text: The element's text properties can be edited here through font family, style, color, size, spacing and other options. This section supports all Text related adjustments.
• Fill: You can use the Fill setting to customize the element's background with color or images.
• Border: You can give your elements a more aesthetic look by adding borders and adjusting the corner radii.
• Shadow: You can add a shadow effect to elements used in web applications to give a sense of depth. However, the shadow feature may not be supported as some elements are not suitable for mobile applications.