Create an analytic block with a chart

Prerequisites

• Create a new model

Procedure

1. Create a new page and add an Analytics block to it.
   1. On the Admin home page, select Pages, and then select NEW PAGE. Type in the title for your page and select .
   2. Select ADD CONTENT and in the Content dialog box, select the Analytics block.
   3. Scroll down and type in a Title for your chart and select SAVE.
2. Choose the data that you want to use in your chart.
   1. Select the type of chart that you want to add, for example, area, bar, or line chart, and select CONTINUE
   2. From the Model list, choose the model whose data you want to use.
   3. Optionally, to restrict the data that the user can view, select the Filter data items option. The options vary, depending on the property that you have chosen.

      Warning

      DO NOT use this for access control because users can still access data through other means, for example, APIs.

      Hide data item on this page if the selected data meets these filter criteria.

      If you want to hide the selected data when it meets every condition you add, add a condition under the Meet ALL of the following conditions (and) section. Otherwise, if you want to hide the selected data when it meets just one of several conditions, add your conditions under the Meet ANY of the following conditions (or) section.

      1. Under the relevant section, select .
      2. From the Property list, select the model's property.

         Tip

         To pass is the Object ID so that the data is relevant, you can choose the settings:

         • Property: "Id"
         • Criteria: "is any of"
         • Value: "objected"

         For example, you choose the "Id" Property "is any of" the Value "objectId" to only view data based on the signed-in user, or change to "is not any of" to prevent the user from viewing data based on the signed-in user.

      3. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.
      4. In the Value box, enter the property's value you want the condition to meet for the block to be hidden.

         Tip

         • For lookup properties, you can select a lookup option entered when you added the property to the model.
         • For foreign key properties, you can select any values against the default label property of the linked model. However, if there is nothing to select, there might not be any values for the property.
   4. From the Properties list, select the properties that you want to show on your chart.

      Alternatively, select to show an aggregation of one of your properties:

      • Count: For the selected property, this counts the number of values with the same value.

        Select Count and then select the property for which you want to show a count. For example, if you have a model called Users with a Job property, you would select Count and then Job. A pie chart shows the segment with the property value as the label, and if you place your mouse cursor over the segment, you can see the count of values with the same value.
      • A number property name - sum: For the selected property with the same values, this adds all the number property values.

        Select the property that you want to group by, for example, Job, and then select the number property to show the sum of all values. This shows in the Properties list as your number property name with - sum attached to it. For example, if you selected Job and Salary - sum, you would see the total of all salaries for each Job.
      • A number property name - minimum: For the selected property with the same values, this shows only the number property's lowest value.

        Select the property that you want to group by, for example, Job, and then select the number property to show the lowest value. This shows in the Properties list as your number property name with - minimum attached to it. For example, if you selected Job and Salary - minimum, you would only see the lowest value for each job's salary property.
      • A number property name - maximum: For the selected property with the same values, this shows only the number property's highest value.

        Select the property that you want to group by, for example, Job, and then select the number property to show the highest value. This shows in the Properties list as your number property name with - maximum attached to it. For example, if you selected Job and Salary - maximum, you would only see the highest value for each job's Salary property.
      • A number property name - average: For the selected property with the same values, this shows the number property's average value.

        Select the property that you want to group by, for example, Job, and then select the number property to show the average value. This shows in the Properties list as your number property name with - average attached to it. For example, if you selected Job and Salary - average, you would only see the calculated average for the Salary property for each Job.
   5. Select CONTINUE.
3. Optionally, customize how you want your chart to look:
   • Under the General display section, in the Title and Sub Title boxes, type a title and subtitle for your chart.
   • If you want to show aggregated data in your chart, select the Use Aggregations option. Then from the Aggregate value Properties list, select the values you want to show in your chart.
   • If you're using a pie chart from the Category Property list, make sure the properties you want to appear in your pie chart are selected.
   • In the Value Properties list, review the selected properties and clear any properties you don't want to include in your chart.
   • If you don't want a legend to appear on your chart, clear the Enable legend option.
   • If you want to change your legend to appear vertically, from the Legend item layout list, select "Vertical." "Horizontal" is the default. Clearing the Enable legend option hides this option.
   • To remove the tooltip that appears when you place your cursor over a data item on the chart, clear the Enable Tooltip option.

   Note

   For pie charts, you can ignore these steps.

   • To hide the x-axis title, clear the Show title option.
   • To change the x-axis title from the default property name, in the X axis title box, type the title that you want to appear.
   • To hide the x-axis label, clear the Show X axis label option.
   • From the Type list, select what you want to appear on the x-axis:
     • Linear - Number values.
     • Date time - Date and time values.
     • Category - Text values.
   • If you want to show the x-axis on the opposite side of normal, select the Opposite option.
   • If you want to reverse the x-axis. So the highest number is closest to the origin, select the Reversed direction option.

   Note

   For pie charts, you can ignore these steps.

   • To hide the y-axis title, clear the Show title option.
   • To change the y-axis title from the default property name, in the Y axis title box, type the title that you want to appear.
   • To hide the y-axis label, clear the Show Y axis label option.
   • From the Type list, select what you want to appear on the y-axis:
     • Linear - Numerical values.
     • Date time - Date and time values.
     • Category - Text values.
   • If you want to show the y-axis on the opposite side of normal, select the Opposite option.
   • If you want to reverse the y-axis. So the highest number is closest to the origin, select the Reversed direction option.

   You can add another series to your chart for either the same property or another property in your model. For example, you can add a line chart to a column chart for the same property to show the trend or another column chart for a second property to show a comparison.

   1. To add another chart to this block, under the Additional Series section next to Series, select .
   2. From the Type list, select the new chart that you want to add, and you can optionally customize how you want this new chart series to appear:
      • The default style for a line chart is a solid line. You can choose another style from the Dash style list, choose the style that you want to appear.
      • The new series shows a circle marker for each of the values. If you want to change this default from the Marker symbol list, select the shape you want to use.
      • The default marker symbol is black. If you want each marker to be multi-colored, select the Color by point option.
      • To use the theme's assertive color for negative values, select the Negative color option.
   3. The additional series' selects the original charts property by default. To choose another property to compare to your first property, select the property you want to use from the Value property list.
   4. To remove the additional chart, select .
   5. Optionally, add a button that opens one of the pages in your tenant or an external URL:
   1. Under General content settings, next to Action buttons* select, .
   2. In the Title box, type in the text that you want to appear on your button.
   3. Under the Type of action section, from the Opens in: list, select what and how you want the button to open.
      • Open page - Loads the Target list with pages from your Applaud tenant.
      • URL - You need to type in the full website address in the Target box.
      • Regular / Same tab - Takes the user away from the current page to the new page.
      • Modal - Keeps the user on the page but opens a dialog box with the new page contained in it.
      • New tab - Opens a new tab in the user's browser with the new external website.
   4. From the Target list, select a page from the list of available pages in your Applaud tenant or type the full URL address, for example, https://www.google.com.
   5. From the Icon list, select an icon for your button and from the Color picker, select a color for your button.
   6. From the Weight list, select how you want your button to appear:
      • Normal - The button appears with a colored rectangle background with black text.
      • Light - The button doesn't have a background, and the text is the color you selected.
   7. From the Hide/show based on a model property list, select a property, and then from the Condition list, select either the Hide if true option or the Show if true option.
   6. If you don't want a title on your block, clear the Show the title and header bar option.

      Caution

      Hiding the title and header bar also hides any action buttons you may have included.

   7. To configure how wide you want your block, from the Preferred width list, select an option:

      Note

      These options are affected by your Page layout options, which you configure in the Page settings dialog. See our knowledge base article, Configure your page settings.

      • Automatic - Spans the width of the column on the page depending on what page layout option you have selected.
      • Full-width - Spans the width of all columns but doesn't go beyond the margins on either side of the page unless you select the Edge-to-edge option.
      • Two-third - If you have a three-column page layout, this spans across two of the columns. If you have a two-column page layout set, this spans just beyond the first column, but further blocks won't appear above the advert in the second column, only below it.
      • Half-width - If you have the three-column page layout, this spans across a column and a half. If you have a two-column page layout, this spans one column.
   8. To set the Background color of your block, select the color of your choice. The color picker shows a list of preconfigured colors with 100% opacity or fully opaque.

      Tip

      You can select a pre-configured color nearest to the one you want and then tweak it to what you want using the sliders.

      	1. Color palette	A chart of preconfigured colors.
      	2. Color gradient panel	The color gradient panel shows a mixture of two linear color gradients, your chosen color, and black. The color you choose reflects in the color gradient panel instantly showing where your selected color appears on the panel. You can choose a lighter or darker version of the chosen color from the panel.
      	3. Sample color	Shows the color you've chosen, and that will be applied.
      	4. Hue slider	This slider has a linear gradient of colors. You can choose the main hue you want.
      	5. Opacity slider	Controls the transparency of the color.
      	6. Color mode	This switches between the color value modes: HEX - Sets the color based on a Hexadecimal code value. RGBA - Sets the color based on RBGA (red, green, blue, alpha) decimal values. HSLA - Sets the color based on HSLA (hue, saturation, lightness, alpha) values.

   9. If you want to prevent this block from being displayed on specific devices from the Hide on list, select those conditions where you want to hide this block.
   10. Restrict or allow viewing further by adding custom filters to your block. You can base these filters on anything such as role type, department, or location. Select the Hide or show this block using filters option and set your Conditions.

       If you want to hide this block when the selected data meets every condition you add, add a condition under the Hide when ALL of the following conditions are met (and) section. Otherwise, if you want to hide the block when the selected data meets just one of several conditions, add your conditions under the Hide when ANY of the following conditions are met (or) section.

       1. Under the relevant section, select .
       2. From the Property list, select the model's property.
       3. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.
       4. In the Value box, enter the property's value you want the condition to meet for the block to be hidden.

          Tip

          • For lookup properties, you can select a lookup option entered when you added the property to the model.
          • For foreign key properties, you can select any values against the default label property of the linked model. However, if there is nothing to select, there might not be any values for the property.

See more:

• About the analytics block

Reference:

• Content dialog box
• Chart Content page (Analytics)