# Heat Map Chart ## Description: Heat Map Chart The Heat map chart component that uses colors to represent data values in a table. Add color range component to it to define the colors. You can plot data like employee attendance records, a periodic table, tracking investments in the stock market, comparing the performance of different companies, etc ### Allowed Parent Components: 1. Card Body 2. Col 3. Grid Child 4. Horizontal Section 5. Vertical Section ### Allowed Child Components: 1. Color Range 2. Popover 3. Pulse 4. Trigger Before Render 5. Trigger On Click ### Properties ### ➤ Caption Provide a title for the Chart. Allowed Values: An expression which should return string after evaluation ### ➤ Sub Caption Provide a sub title for the chart. Allowed Values: An expression which should return string after evaluation ### ➤ X Axis Name Provide a name that you would want to display on the X-axis. Allowed Values: Free text field ### ➤ Y Axis Name Provide a name that you would want to display on the Y-axis. Allowed Values: Free text field ### ➤ Height Provide numerical values to set heigth in pixels. Allowed Values: Any number value ### ➤ Width Provide numerical values to set width in pixels. Allowed Values: Any number value ### ➤ Min Value Provide a minimum value that can be plotted on the chart Allowed Values: Any number value ### ➤ On Click Allowed Values: Controller Function ### ➤ Use Existing Data Source Choose this prop if you want to reuse a Data Source that was defined on some other component on this page or any of the parent abstract pages. Allowed Values: Yes/No ### ➤ Data Source Select a datasource from the list. Allowed Values: Select a datasource from the list. ### ➤ Data Source Alias Allowed Values: Free text field ### ➤ Default Where Clause Allowed Values: Free text field ### ➤ Max Rows Allowed Values: Any number value ### ➤ Order By Clause e.g. #firstAttr#, #secondAttr# DESC Allowed Values: Free text field ### ➤ Auto Query Check this property to query the selected datasource on component render. Allowed Values: Yes/No ### ➤ Execute Count SQL Check this to execute count SQL to get the total number of rows in the database on a query. You can get this value by using the expression: #{DataStore.totalLength} Allowed Values: Yes/No ### ➤ Execute Distinct SQL Check this to execute distinct SQL to get the total number of distinct rows in the database on a query. Allowed Values: Yes/No ### ➤ X Axis Value Attribute It is a column through which you can get the data from DataSource to display along X-axis. Allowed Values: It is a column through which you can get the data from DataSource to display along X-axis. ### ➤ Y Axis Value Attribute It is a column through which you can get the data from DataSource to display along Y-axis. Allowed Values: It is a column through which you can get the data from DataSource to display along Y-axis. ### ➤ Value Attribute The attribute that contains the value to fill in the chart Allowed Values: The attribute that contains the value to fill in the chart ### ➤ Function Select a function to do arithmetic operations on data. Allowed Values: 1. SUM 2. COUNT 3. AVG 4. MAX 5. MIN 6. COUNT(DISTINCT) ### ➤ Auto Refresh Interval Specify this property in seconds to refresh the component to specified interval. Allowed Values: Any number value ### ➤ Show Plot Border Check this property to show border to the plots. Allowed Values: Yes/No ### ➤ Show Values Check this property to show values on the chart. Allowed Values: Yes/No ### ➤ Show Border Check this property to show border to the chart. Allowed Values: Yes/No ### ➤ Show Shadow Check this property to show shadow to the chart. Allowed Values: Yes/No ### ➤ Gradient Check this property to display gradient legend. Allowed Values: Yes/No ### ➤ Color Code Provide a hex code to avoid default colors and when color range is not provided. Allowed Values: Free text field ### ➤ Hide No Data Placeholder Check this to hide the data displayed when no data found. Allowed Values: Yes/No ### ➤ No Data Icon Select an icon to display when no data found. Allowed Values: Icon List ### ➤ No Data Text1 Provide a text to display as title when no data found. Allowed Values: Free text field ### ➤ No Data Text2 Provide a text to display as sub title when no data found. Allowed Values: Free text field --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.cloudio.io/ui-components/widgets/heatmapchart.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.