Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Used to show our progress towards reaching the goal.
Default Chart Image:
Bullet in Design mode
The properties of Bullet:
Background: User can enable the shadow, change the shadow color and transparency of the chart.
General: User can change the height, width, top, left. If initial visibility is unchecked, then the chart won’t be visible at the first preview. If markers are enabled then user can see the x axis markers if it is a horizontal bullet or y axis markers if it is a vertical bullet. Also, Actual value and target value can be enabled to see the final value and target respectively. User can give title name. Bullet type can be changed between horizontal and vertical. Orientation can be changed between Normal and reverse. The value user type in the “Click Value” field is passed to the backend.
Indicators: User can specify the range in Range properties and change its color. Also provide the current progress as Actual value, and total progress in Target Value.
Style: User can change the border color, measure color, target color, marker color, marker font color and font color in this section. Also, user can change the actual and target meter size.
General Properties:
Style Properties:
Indicator Properties:
Following Variants of Bullet Chart is obtained after changing its properties:-
Horizontal Bullet
Horizontal Bullet with Orientation Reverse
Vertical Bullet
Vertical Bullet with Orientation Reverse
Check out the given illustration on Filter Chips component.
The Filter Chips component provides two-way communication between the filter chips component and all associated filters.
Filters that can be associated with Filter chips component: Combo-filter, List Filter, Radio Button, and Hierarchical Filter.
Please Note: The Filter Chips component supports only Single select and multi-select types with Combo-filter.
The user can get the reflection of the chart by enabling the shadow option.
The user can also change the color and increase or decrease the transparency of the shadow.
The user can change the height, width, top, and left.
If initial visibility is not enabled, then the chart won’t be available for the first preview.
If Show Additional Filter is enabled, then the additional button will render the display of extra filter values in the drop-down.
First, the user needs to make the connection between the filters and the Filter Chips component by connecting them in the Associate Chart section.
The user can change the background color, and remove the button color, text color, and component background color.
The user can change the filter chips title, additional button title, and drop-down pop title in this section.
The user can set the gradient Rotation, opacity, Gradient color, Border, Border Color, Border Radius, Shadow, Shadow Color, and Shadow Transparency using this section.
The user can set the font size, font color as well as font style-weight-family and text decoration using this section.
Drag the Filter chips component in a dashboard such that filters are available.
Click on the Associate Filter option from the General Properties.
The Associate Filter dialog box opens.
Select the filters to be associated with the filter chips.
Click the Save option.
Add the required script in the filter chips script pane.
Drag the label component for updating the filter chip components with selected filters.
Add the sdk.updateFilterChips('filterchips_ID') in label script pane with required connections reload.
Preview the dashboard.
Select the filters and click on the label component for triggering the filter chips component.
Check out a demo video on the Filter Chips component as given below.
The Export option is used to export the dashboard in PDF/PPT/Excel/PNG/Print formats.
Check out the given illustration on how to use the Export component.
Default Chart Image:
Background: The user can enable the shadow, change the shadow color, and transparency of that shadow.
Export Options: The user can enable excel/PDF/PPT/PNG/print format in this section. If the Export Options is not enabled, then the various options won’t come in the preview section.
General: The user can set the height, width, top, left values. The chart will not be visible at the first preview if initial visibility is unchecked. The user can choose between different modes like screenshot/BVZX/PPT/PDF/excel in order to select the mode for automatic download. The user can also specify the PDR format.
PDF Settings: The user can choose PDF Type out of Tabular or screenshot, table types out of Striped/Grid/Plain, Table Orientation out of Landscape or Portrait, PDF pages out of Single or multiple. This section is specifically for report downloads in PDF format.
PDF Style: The user can download reports in PDF format with headings and sub-headings. The headings and sub-headings can be further customized by the PDF Style section.
Style: The user can change the background color, border-radius, font color, font size, font-weight, and font family under this section.
The following variants are possible by modifying properties:
The Box component can be used as a background for several other components.
The user can enable shadow, change the shadow color of the chart, and adjust its transparency.
User can change the height, width, top, left. If initial visibility is unchecked, then the chart won’t be visible at the first preview. The user can type in the 'Click Value' to see something when they click it.
The user can provide two colors in the Gradient section for the gradient rotation. Now, the selected two colors can be moved from top to bottom (initially, they could be moved only from left to right) if the user selects an angle of 90 degrees. It is possible for the user to change the opacity, border thickness-radius, and color.
The user can configure the following Style Properties:
Gradient Rotation: Set a value for the gradient rotation
Gradient: It prompts a menu with colors to choose from.
Opacity: Set opacity for the component.
Border Thickness: Set border thickness for the component.
Border Radius: Set radius for the component border.
Border Color: Select a color from the menu for the component border.
The modified Box appearance gets changed after changing its properties as displayed in the below-given image:
The gauge component is used to show the progress towards a goal. The set Target gets marked and the pointer displays our progress.
Default Chart Image:
Background:
The user can enable border, change the border color, and border-radius.
The user can enable the shadow, change the shadow color, and transparency of the shadow.
If the user gives 2 or more colors in the gradient its position can be adjusted by Gradient Rotation.
General:
The user can change the height, width, top, left values.
Put a checkmark in given box to select Initial Visibility option. If this option is enabled, then the chart appears in the first preview of the dashboard.
If the user enables the ticks, then the user can see marker lines on the gauge.
Use a checkmark in the given box to show the Range.
If the user enables the show title option and gives some units in the Title section it will get displayed inside the gauge at the top position.
Please Note: The chart will not be visible at the first preview if the initial visibility is unchecked.
Indicators:
Colors for the range can be specified under the range section.
Also, what is the current value of the gauge and the target can be specified under the Value Variable and Target Value.
Also, the minimum and maximum range can be set.
Style:
The Bezel color can be changed to adjust the gauge border color.
The selected Face color will be the Gauge Fill color.
The Tick Color changes the color of ticks/markers between ranges.
The Pointer Color is changed for adjusting the tick pointer color.
Also, the user can change the label font color, title font color, font family, and font size under this section.
Formatter:
This properties section helps to provide format for the monetary data.
Modified Gauge by changing the properties:
The Graphics component is used to show different icons/shapes.
Default Chart Image:
Background:
The user can enable the shadow, change the shadow color, and transparency of the shadow.
General:
The user can change the height, width, top, and left values.
Put a checkmark in given box to select Initial Visibility option.
If this option is enabled, then the chart appears in the first preview of the dashboard.
The user can select the Category and the corresponding symbol, to give a symbol to the graphics icon.
If the user has kept the Category as None, then we need to specify the icon inside the SVG Path String. Also, we can choose the Cursor Style.
By clicking the SVG Path String icon, the SVG Path String window opens.
The user can provide an icon name from the library to use it.
The Glymph icons from bootstrap can be also used.
Please Note: The chart will not be visible at the first preview if the initial visibility is unchecked
Modified Graphics after changing its Properties:
The Guided Tour is used to provide a dashboard tour and informs the user about what each component shows. We can navigate from one component to another, and whenever we want to stop the tour, we can stop it by clicking on the ‘End Tour’ option.
Default Chart Image:
Properties of the Guided Tour:
Background: The user can enable the shadow, change the shadow color, and transparency of that shadow.
General: The user can change the height, width, top, and left values. If initial visibility is unchecked, then the chart won’t be visible at the first preview.
The user can connect the tour component with the report components by using the ‘Associate Tour’ section.
The user needs to search for the available components, give title, content for the guided tour steps, tour position, and duration.
Click the ‘Add to List’ option and save the changes.
Tour type can be either text or image. If the user has selected the image option, then instead of the text box, one image box will come. The user needs to upload an image to display it in the position. Once the image gets uploaded the guided tour will begin by clicking on the uploaded image.
Style: The user can style the text box by changing its font and color properties.
General Properties:
Style Properties:
Report after enabling the Guided Tour:
A date picker component is valuable to a dashboard when users select dates or date ranges for various purposes, such as filtering data, scheduling events, or analyzing trends.
Filtering Data by Date: To view specific time-bound data, such as sales, user activity, or system logs.
Date Range Analysis: For comparing metrics over different periods (e.g., month-over-month or year-over-year comparisons).
Scheduling: For selecting dates to schedule meetings, tasks, or reminders.
Report Generation: To generate reports for a specific date or range.
Dynamic Chart Updates: To dynamically refresh dashboard charts and graphs based on the selected date range.
Component Name: Unique identifier for the date picker component.
Left, Top: Specifies the component's position on the interface.
Width, Height: Determines the size dimensions of the date picker.
Initial Visibility: Sets whether the date picker is visible on load.
Enable Month Navigation: Allows users to navigate between months.
Enable Year Navigation: Allows users to navigate between years.
Year Range: Defines the range of years available for selection.
Associate Date: Links date selection to another component.
Date Type: Specifies the format of the date displayed.
Start Range Color: Color for the start of a date range selection.
End Range Color: Color for the end of a date range selection.
Enable Date Range: Allows selection between two dates.
Date From, Date Upto: Specifies the start and end limits for date selection.
Default Date: Sets a predefined date to be selected initially.
Date Format: Format in which the date is displayed to the user.
Output Format: Date output format in which the date is looked for data handling.
Click Value: Action value triggered on date selection.
Date picker with Date range Property
Shadow: Put a checkmark in the given box to enable the Shadow for the component.
Shadow Color: It prompts a color menu to choose a color for the shadow.
Background Color: Define the background color for the date picker component, enhancing visual appeal or coherence with the overall theme.
Font Color: Set the color of the dates' text to ensure readability and match design specifications.
Font Size: Adjust the text size for better readability or to maintain stylistic consistency.
Font Style: Choose from different styles such as normal or italic to add emphasis or style to the text.
Font Weight: Control the thickness of the font, ranging from normal to bold or 300/600/900, to make text stand out or blend in.
Font Family: Select from various font families to apply a consistent typeface.
Text Decoration: Apply decoration such as underline for additional styling effects.
Users can get a drop-down context menu displaying the Year and Month ranges in the Date Picker Preview mode.
Navigate to the Properties tab of a Date Picker component.
Access the Enable Month Navigation and Enable Year Navigation options from the General Properties. Use the checkboxes to enable these properties.
The user can set the year range to be displayed using the Year Range field to be displayed.
Access the Date Picker component in the preview mode, it will display the drop-down menu for Years and Months.
Check out the illustration to enable Monthly and Yearly navigation in the Date Picker component.
Navigate to the General Properties for a Date Picker component.
Select colors using the Start Range Color and End Range Color pallets. The user may choose separate Date Picker components to set the Start Range Color and End Range Color.
Navigate to the Preview mode, the start and end dates will be displayed in the selected colors.
Check out the illustration on how to set colors for start and end Dates.
The user will be notified for the instances when the selected Start date is greater than the set End Date for a dashboard containing the Date Pickers components.
A warning message will notify the user when the selected End Date is lesser than the set Start Date for a dashboard containing the Date Pickers components.
Check out the illustration with instances when a warning notification appears for the Date Picker component.
The Date picker helps the users define ranges for the customized display while choosing a preview for a specific period. The component will restrict the scrolling up to the selected customized range.
Check out the illustration to understand the Data Picker preview with range and without a defined range.
Please Note: The user must disable the Year and Month navigation to reflect the customized date range in the preview mode.
Check out the illustration on applying various Style Properties to the Date Picker component.
The Horizontal Slider (H-Slider) component can be used to show the progress towards the goal in the horizontal direction.
Default Chart Image:
Properties of the H-slider:
Background: The user can enable the shadow, change the shadow color and transparency of that shadow. Also, by changing the gradient color user can change the background color of the h-slider.
General: The user can change the height, width, top, and left values. If initial visibility is unchecked, then the chart won’t be visible at the first preview.
The user can change the Unit value from Auto to Percent. Set the Maximum and Minimum limit for the H-slider. By default, the interval will be 1; if the user changes it to 2 then the increment happens in the multiples of 2. Change chrome color to change the color of the slider body. Also, the user can alter the circle color, radius, and thickness.
Label: The user can change the font size, style, and font family of the Label.
General Properties:
Background Properties:
Label Properties:
Modified H-slider after changing its properties:
The image component is used to show different images or it is used to perform the action(s) on associated components. By clicking the component an action will be triggered affecting the associated components.
Default Chart Image:
The properties of Image:
Background: The user can enable the shadow, change the shadow color and transparency of that shadow.
General: The user can change the height, width, top, and left values. If initial visibility is unchecked, then the chart won’t be visible at the first preview. If the user is enabling the roll-over glow and providing color as ‘Glow Color’ then when the user hovers over that image it will recede with this color as a border. From the ‘Browse image’ option the user can select the image they want to add to the report. The user can either paste URL or directly select from our computer folders.
General Properties:
Background Properties:
Image Chart after adding image:
Shadow Transparency: Set transparency for the component shadow.
The Textbox component is used to display Text. The text formatting can be customized for this component.
Default Component Image:
Properties of the Text Box:
General Properties:
The user can change the height, width, top, left. If initial visibility is not enabled, then the chart won’t be available for the first preview.
The Input type can be selected using the drop-down option, the supported Input types are: Text, Number, Email, Password.
Background Properties:
The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
Style Properties:
The user can set the background color and font color as well as font style-weight-family etc. in this section.
Modified Input Box after changing its properties:
The Legend component is used along with other charts if the user needs a checkbox legend.
Default Component Image:
Properties of the Legend:
Background: The user can change the background color and adjust its transparency. Also, the border can be provided and the user can adjust its color and radius. The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
General: The user can change the height, width, top, left.
If initial visibility is not enabled, then the chart won’t be available for the first preview.
If ‘Show Checkbox’ is enabled, then a check box can be seen along with the legend values.
First, the user needs to make the connection between the legend and the Chart by connecting them in the ‘Associate Chart’ section. The user can adjust legend orientation and shape.
Style: The user can set the background color and font color as well as font style-weight-family etc in this section.
General Properties:
Style Properties:
Modified Legend after changing its properties:
Horizontal Legend:
Vertical Legend:
The Info-Button component displays text or an image when clicked. This component can also be used to perform the action(s) when clicked using Java Script.
Default Chart Image:
Properties of the Info-button:
Background: The user can enable the shadow, change the shadow color and transparency of that shadow.
General: The user can change the height, width, top, and left values. If initial visibility is unchecked, then the chart won’t be visible at the first preview.
The user can give a letter or number or symbol to show what they want to see in that icon in the ‘Label’ section.
The tooltip displays the information when they hover over that icon. When the user clicks on that icon one window will pop up.
In the ‘Display Text’ section, the user can give whatever text they want to see in that window. The title of that window is given in the ‘Title’ section.
The width and height of that window can be adjusted from the ‘Window Width’ and ‘Window Height’ sections.
Style: The user can change the background color of the icon using the ‘Light color’ section. Title Font Color, Title Font Size, Font Style, Font Weight, and Font Family can be modified by Style properties. Adjust the Window Font Color, Window Font Size, etc.
General Properties:
Style Properties:
Modified Image of the Info Button
The Semi Gauge component is used to show the progress towards a goal. Target will be marked and the pointer shows our progress.
Default Chart Image:
Properties of the Semi Gauge:
Background: The user can enable border, change the border color, and border-radius. Also, can enable the shadow, change the shadow color and transparency of that shadow. If the user is giving 2 or more colors in the gradient its position can be adjusted by Gradient Rotation.
General: The user can change the height, width, top, and left. If initial visibility is unchecked, then the chart won’t be visible at the first preview. If the user enables the ticks, then the user can see marker lines on the semi-gauge. If the user enables the ‘show title’ option and gives some units in the ‘Title’ section it will get displayed inside the gauge at the top position.
Indicators: Colors for the range can be specified under the range section. Also, what is the current value of the gauge and the target can be specified under ‘Value Variable’ and ‘Target Value’. Also, Minimum and maximum range can be given.
Style: The user can set the speedometer width and needle within this section. ‘Needle color’ can be changed to adjust the semi-gauge needle color. ‘Center color’ for semi-gauge center circle color. Also, the user can change the label font color, title font color, font family size, etc. under this section.
General Properties:
Formatter Properties:
Background Properties:
Indicator Properties:
The Semi Gauge after changing its properties:
The Progress Pie is used to show the progress towards reaching the goal.
Default Chart Image:
Properties of the Progress Pie:
Background: The user can enable the shadow, change the shadow color, and transparency of that shadow. Also, the user can change the background color and adjust its transparency.
General: The user can change the height, width, top, left. If initial visibility is unchecked, then the chart won’t be visible at the first preview. The user can set the ‘Base Color’ as the component color and ‘Value color’ for the value. The transparency can be controlled. Chart type can be either Circle or Horizontal Bar or Vertical Bar.
Label: The user can adjust the font properties.
Subtitle: The user can adjust the font properties of the subtitle in this section.
Title: The user can adjust the font properties of the title in this section.
Tooltip: The user can change the Tooltip properties. Adjust the tooltip box size, font size, etc.
General Properties:
Title Properties:
Tooltip Properties:
Label Properties:
Modified Progress Pie after changing its properties:
Chart type: Round
Chart Type: Horizontal Bar
Chart Type: Vertical Bar
The Label component displays text or an image. This component can also be used to perform the action(s) when clicked using Java Script.
The user can enable the shadow, change the shadow color and transparency of that shadow.
The user can change the height, width, top, and left. If initial visibility is unchecked, then the chart won’t be visible at the first preview.
If Dynamic is enabled then the Label value can be dynamically changed based on the outputs from other components like filters.
The user can write what they want to see in the label in the Text section.
In this section, the user can change the font color-style-weight properties.
Please Note: Enable Hover, Hover Color, Border Thickness, Border Color, and Cursor Style fields are added under the Style properties for a Label.
The Filter Saver functionality helps the user to save a filter condition.Default Component Image:
General: The user can change the height, width, top, left. If initial visibility is not enabled, then the chart will not be available for the first preview. Under the label, the user can specify the text which has to appear on the component. If some value is given in the ‘Click Value’ section, then that value goes to the backend.
Background: The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
Style: The user can set the background color and font color as well as font style-weight-family etc in this section.
Drag a filter component together with the Filter Saver component on the canvas and navigate to the preview screen.
Click on the Filter Saver component from the preview page.
The Add Criteria tab opens under the Filter Saver component.
One year appears in the panel below.
Give some name to that year and save it. E.g., Initial Year.
Click the Save option to save the newly created Criteria.
Open the Criteria List tab.
The saved Criteria appear under this tab.
Select any listed Criteria by using the checkmark icon.
Select another year from the Filter.
Navigate to the Add Criteria tab again.
Give a name for a new Criteria.
Add value for it and save a new Criteria. E.g., Second Year is another saved Criteria.
The user can open the Criteria List tab to check whether the newly created Criteria is listed there.
Please Note: The user can readily use these criteria whenever a need arises for the same.
The V-Slider component is used to show the progress in the vertical direction.
Default Chart Image:
Properties of the V-slider:
Background: The user can enable the shadow, change the shadow color, and transparency of that shadow. Also, by changing the gradient color user can change the background color of the V-slider.
General: The user can change the height, width, top, and left values. If initial visibility is unchecked, then the chart won’t be visible at the first preview. The user can change the unit from Auto to Percent, also set the maximum and minimum limit. By default, the interval will be 1, if we change it to 2 then the increment happens in the multiples of 2. Chrome color is changed to change the color of the slider body. Also, we can alter the circle color, radius, and thickness.
Label: The user can change the font size, style, family, etc. of the Label.
General Properties:
Background Properties:
Label Properties:
The modified chart after changing the properties:
The SVG component is used for inserting images in the SVG (Scalable Vector Graphics) Format
Default Component Image:
Properties of the SVG Component:
Background: The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
General: The user can change the height, width, top, left. If initial visibility is not enabled, then the chart won’t be available for the first preview. The user can insert the SVG image through the ‘Browse SVG’ option.
General Properties:
Background Properties:
Modified SVG after changing its properties:
Users can embed a URL into this component. The end-users will be redirected to the given URL page by clicking the URL component.
Default Component Image:
Properties of the URL:
Background: The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
General: The user can change the height, width, top, left. If initial visibility is not enabled, then the chart won’t be available for the first preview. The user can type value in the Tooltip section based on what the user wants to see when the cursor is placed near the URL. Also, the user can provide the link to the desired site in the ‘URL Link’ section.
Style: The user can set the background color and font color as well as font style-weight-family etc in this section.
General Properties:
Style Properties:
Modified URL after changing its properties:
The Trend components used to display trends based on the given data. An up or down arrow will be displayed in the colors configured by the user.
Default Component Image:
Properties of the Trend:
Background: The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
General: The user can change the height, width, top, and left values. If initial visibility is not enabled, then the chart won’t be available for the first preview. The user can change the ‘Value' filed and ‘Base Range’ and based on that the trend color will get updated.
General Properties:
Background Properties:
Modified URL after changing its properties:
Positive
Zero
Negative
The Stepper component performs the action(s) on associated components. Data in associated components will change based on the selected value (which can be increased or decreased by using the up/down arrow).
Default Component Image:
Properties of the Stepper:
Background: The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
General: The user can change the height, width, top, and left values. If initial visibility is not enabled, then the chart won’t be available for the first preview. The maximum value and minimum value of the stepper can be adjusted in this section. Also, the user can provide the step size. The bigger the step size, the faster the stepper reaches the maximum.
Style: The user can set the background color and font color as well as font style-weight-family etc in this section.
General Properties:
Style Properties:
Modified Stepper after changing its properties:
The Textbox component is used to display Text. The text formatting can be customized for this component.
Default Component Image:
Properties of the Text Box:
General Properties:
The user can change the height, width, top, left. If initial visibility is not enabled, then the chart won’t be available for the first preview. If we enabled the ‘Dynamic’ option, then we can directly change the text box content dynamically, i.e. Bypassing values from filters and all. Otherwise, we can display the text box contents by typing those contents in the ‘Display Content’ section.
Background Properties:
The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
Style Properties:
The user can set the background color and font color as well as font style-weight-family etc. in this section.
Modified Text Box after changing its properties:
Input Box component will support different types of input. User can set input types like text, password, number, email type based on requirements.
Check out the given demonstration on the Input box functionality for better understanding of the component.
User can change the height, width, top, left. If initial visibility is unchecked, then the chart won’t be visible at the first preview. User can manage the Text editable & default text message and also different type of input.
Input Type - User can set input types like text, password, number, email and type of input type based on the requirements.
Shadow – Enable shadow.
Shadow Colour – Set the shadow color.
Shadow Transparency – Set the opacity.
User can set the background color and font color as well as font styling properties in this section. Background Opacity for the component can be also det using this property.
Background Color – Set the spacing between the buttons.
Background Opacity – Set the opacity.
Border – Enable border.
Border Radius – Set border radius.
Border Thickness – Set border thickness.
Border colour – Set border color.
Font Style – Select the font style.
Font Weight – Select the font weight.
Font Family - Select the font family.
Font Colour – Set the font color.
Tab component has an option to create multiple buttons that can be associated to the group for displaying the show & hide visibility for the group components.
Check out the given demonstration on the Tab component.
User can change the height, width, top, left. If initial visibility is unchecked, then the chart won’t be visible at the first preview. User can mange the tab & associate the group. The Tab Alignment properties field has been provided to set Vertical or Horizontal alignment for a Tab component.
The user can add multiple tabs and change the tab names.
The Manage Tabs provides option to show the icons as per requirement.
E.g., bd-diamond will display the normal icon.
The user can select the default tab as displayed in the following image.
Please Note: The Manage Tabs option is provided inside the General Properties.
The Associate Groups option is used to associate groups with charting components to each tab using the drop down as shown in the below given image:
Please Note: The Associate Groups option is provided inside the General Properties.
User can set the background colour and font colour as well as font styling properties in this section. Background Opacity for Tabs is added as well as spacing to provide space between tabs. Selection colour also added as used if required.
Font Size - Set the font size.
Button Radius – Set the Button radius.
Button Width - Button width can be control.
Spacing – Set the spacing between the buttons.
Background Opacity – Set the opacity.
Font Style – Select the font style.
Font Weight – Select the font weight.
Font Family - Select the font family.
Font Color – Set the font color.
Background Color – Set the background color.
Selection Color – Set the selection color.
Border on selection - Enable border on selection
Border color - Set the border color - while click on button buttom will show the line & updated color.
Border width - Set the border width
Content alignment - Set the alignment as center /left/right.
Before using the Tab Component, the user has to create groups with components that can be associated to the tabs later.
Click on the Manage Dashboard Components option provided in the right side panel of the Dashboard canvas.
Click the Add Group option.
Add each component to its respective group.
Open the Manage Tabs from the General Properties.
The Manage Tabs window opens.
Select a Tab from the by default selected tabs using the given check box.
Change Tab names (if required) and reference image/icon names as per requirement.
Click the Save option.
Open the Associate Tabs from the General Properties.
The Associate Groups window opens.
Select a Tab from the drop-down menu.
Associate a group for each Tab by using the checkbox.
Click the Save option.
Open the Preview mode for the dashboard.
Click on the Tab, it will display the associated group of component.
Button components can be used in the charting applications to enable users to interact with the charts and customize the chart display.
Check out the given walk-through on how to use the Button component inside the Designer module.
Buttons can be used to perform the following actions:
Toggle different chart types
Zoom in and out
Apply filters to the data being displayed
User can change the height, width, top, left. If initial visibility is unchecked, then the component won’t be visible at the first preview. User can manage the label text & click value to drill.
User can enable Shadow, Shadow Color, and Shadow Transparency by using the Background properties.
Shadow – Enable shadow.
Shadow Colour – Set the shadow colour.
Shadow Transparency – Set the opacity.
User can set the Button category as primary, secondary etc. & background color and font color as well as font styling properties in this section. Also use can customize the font colour, background color & Hover color.
Font size – Set the font size.
Button Radius – Set the border radius.
Font Style – Select the font style.
Font Weight – Select the font weight.
Font family – Select the font family.
Set Button Category - User can set the button category as Primary ,Secondary, Success, Warning, Danger, light, Info and Dark.
Based on the selected category the button component will have the default display as displayed below for the Secondary and Success Categories:
Use Outlined Button- Outlined Button will display the button with the outline color.
E.g., Button Category is set as Secondary in the below given image:
Use Custom Color- User can customize the font color, Background color, and Hover color.
Output - Some of the possible previews of the button components are displayed in the below given image:
