IN THIS ARTICLE

    IN THIS ARTICLE

      Gauge

      This comprehensive guide will cover everything that needs to be known about the Gauge element in Mokkup.

      When to Use?

      Gauges are useful for displaying progress or status information. Here are a few pointers on when to use a gauge element in a dashboard:

      • When you need to show a single value that is changing over time. For example, you could use a gauge to show the download progress of a file or the battery level of a device.
      • When you need to compare a value to a target or threshold. For example, you could use a gauge to show how close a user is to completing a goal, such as reaching a certain level in a game or saving enough money for a down payment on a house.
      • When you need to show a value that is difficult to understand in numerical form. For example, you could use a gauge to show the severity of a weather event or the risk of a credit card being declined.

      How to Create?

      There are two ways to use the gauge in Mokkup.

      Creating a New Project:

      • Click on ‘Create new’ from the home page
      • Setup the project by filling in the name and choosing the frame size
      • Drag & Drop the gauge on to the canvas or click on it to add from the left menu
      • Resize it on the canvas and place in the desired location
      • Edit it from the customize element menu which opens on element selection

      Using a Mokkup Template:

      • Choose a template from the template library and click ‘Use Template’
      • Select the gauge element that needs modification
      • Resize it on the canvas and place in the desired location
      • Edit it from the customize element menu which opens on element selection

      Tip: Mokkup elements have multiple variations that can be accessed by double-clicking on the element or clicking Variation in the customize element menu.

      How to Customize?

      Mokkup provides customization options for every element. These customization options are accessible via the left-hand navigation menu. 

      Customize: 

      This is the section that opens by default when an element is selected. In this tab, all element customizations can be made. Each sub-section is explained in detail below.

      1. Details

      Edit the basic chart details here.

      Title:

      • Change the title of the chart here. Toggle off if not needed.

      Alignment:

      • Adjust the title alignment to either the left, center, or right of the element.

      2. Values:

      Edit the values of the gauge here

      • Change the minimum, maximum, target and needle values
      • Edit the value and units as well
      • Adjust their alignment either to left or right
      • Toggle on or off to add or remove target in the chart. 

      3. Properties: 

      Contains all the settings that play a role in the aesthetics of the chart.

      Labels:

      • Add or remove labels from the chart by toggling on or off.

      Data Labels:

      • Add or remove data labels from the chart by toggling on or off.

      4. Add-Ons: 

      Contains additional elements that can be added to the chart.

      Buttons: 

      • Switch on or off to add or remove buttons from the chart. 
      • Add multiple buttons by clicking ‘Add Button’. 
      • Adjust their alignment to either the left, center, or right of the element using ‘Alignment’. 
      • Edit the button's content by clicking on the ‘Title 1’ text in this menu. 
      • Delete any button by clicking the ‘trash’ icon near the name of the button. 

      Dropdowns: 

      • Toggle on or off to add or remove dropdowns in the chart. 
      • Adjust their alignment to either the left, center, or right of the element using ‘Alignment’. 
      • Add dropdowns by clicking the ‘+’ icon
      • Reorder them by clicking the ‘Settings’ icon
      • Delete them by clicking the ‘Trash’ icon. 
      • The title can be edited in the ‘Edit Text’ field, and values can be added by entering values in the ‘Add Values’ field. 

      KPIs: 

      • Toggle on or off to add or remove KPIs from the chart. 
      • Add KPIs by clicking the ‘+’ icon
      • Reorder them by clicking the ‘Arrow’ icon
      • Delete them by clicking the ‘Trash’ icon. 
      • Adjust their alignment to either the left, center, or right of the element using ‘Alignment’. 
      • The title can be edited in the ‘Edit Text’ field, and values can be edited in the ‘Measured Value’ and ‘Percentage Change’ fields. 

      Text: 

      • Toggle on or off to add or remove text boxes in the chart. Enter any information that needs to be included for the chart by editing the ‘Text’ field. 
      • Adjust the alignment to either the left, center, or right of the element using ‘Alignment’. 
      • Change the font weight to normal, medium, or bold from ‘Font weight’. 

      Tip: Some add-ons cannot be used together in an element. For example, turning on the buttons toggle will automatically switch off dropdowns, and vice versa.

      5. Variations:

      • This button opens the 'Choose Style' pop-up. 
      • Choose an alternative design for the element. 
      • Can also access the pop-up by double-clicking on any selected element.
      • Using the above-described customization methods, it is also possible to create various element variants.

      6. Design Customizations

      • This will access the 'Design Customizations' menu when clicked. 
      • Use this to change your active theme and utilize customization options to adjust the canvas accordingly.
      • For more information, please refer to this article.

      This was an in-depth introduction to using and editing a Mokkup Gauge element. For additional inquiries, please ask our Chatbot or contact support.

      Similar articles