Skip to main content

Annotation widget Hover

  • This document contains the information of how to use annotations from the widget hover icon. from the annotation icon user can annotate using lines, add a custom text, add image, and download these changes in various output formats.

Objective​

  • Use Annotation from the Widget Hover Icon

Prerequisite​

Download zip file from link given Click Here.

  • After downloading the zip file, open Preview-Edit_Dashboard folder inside it & upload Sales.cds into Master data --> Dataset Section of the OPNBI. To add it into OPNBI follow this Click Here.

Decimal values in chart tooltip : This video contains how to create annotation in a chart widget in OPNBI.

Steps to use Annotation for Widget Hover​

  1. Login to OPNBI using valid credentials.

  2. Create a new dashboard and prepare any widget by following this link.

  3. For this example; we are explaining it using pie chart named test1.

  4. Use link to download dependency files for this example.

  5. Go to th eedit mode of test1 Dashboard by following this process, it will open dashboard as shown below:

    Docusaurus Slash Introduction

  6. In order to use annotation icon in preview mode, click on setting icon of widget > go to widget icon properties > uncheck the Hide icon in preview & make sure show annotation icon checkbox is selected by default.

    Docusaurus Slash Introduction

  7. Click on save and exit button to save it and go to dashboard preview. (Click here to see the steps to go to preview mode)

  8. When you hover on widget you will see annotation icon as shown below:

    Docusaurus Slash Introduction

  9. when you click on annotation icon, you will see various options listed as;

  • Annotate
  • Text
  • Image
  • Download
  • Reset
  • Cancel

  1. Just hover on these icons and you will see tooltip for every options.

    Docusaurus Slash Introduction

Annotate​

  1. By Default, annotate option is selected, by using this you can highlight specific portion of widget just by drawing over it. To annotate over country USA, press left click of mouse and just draw as you want.

Docusaurus Slash Introduction

Text​

  1. To write custom text, click on Text icon from annotation list and sample text field will be added on widget area as shown in below screen.

Docusaurus Slash Introduction

  1. Just select that text and you will see a cursor blinking in that text box, just write down any text you want as shown in below image. Also you can drag and drop this text box at any location.

Docusaurus Slash Introduction

Image​

  1. Next icon is image, when you click on image icon, gallery window will open, in that window you will see 2 options, one is to select any image from symbol library available in OPNBI and the other one is images already uploaded in OPNBI.

    Docusaurus Slash Introduction

    Docusaurus Slash Introduction

  2. User can search and add required image here, just select one image and click on Add button and image is added in widget area as shown in below image:

  3. User can also move this image using drag and drop at the required place.

    Docusaurus Slash Introduction

Download​

  1. Next is download icon, using this feature, user can download image and data used in this widget. There are many options to export these changes with widget in image and export underlying data as full and in aggregated form in csv and excel format as shown in below image.

    Docusaurus Slash Introduction

Note
  • Export data options depends upon type of widget used.

Reset​

  1. Next is reset button, when clicked, all the changes applied using annotation options will be removed as shown in below image:

    Docusaurus Slash Introduction

Cancel​

  1. And if you want to close this annotation options from preview, just click on cancel button as shown in above image and annotation list will be closed.