Widget Scripts: Add Textual Elements

Here are a few ready-to-use widget scripts to add textual elements in your widgets.

Replace the variables highlighted in bold with the appropriate values for your use case.

• Add description to charts
• Add a subtitle to a chart
• Add a modal popup in a dashboard
• Add additional information in tooltips in charts

Add description to charts

The description will appear at the bottom of the chart.

descriptionSpace = 80    //specify the space added below the widget
widget.on('processresult',function(se,ev){
ev.result.chart.spacingBottom = descriptionSpace
})
widget.on('domready', function(w, args){
    //specify text:
text = 'This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description.'
chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
chart.renderer.text(text, 15,    //specify the space on the left
chart.chartHeight - descriptionSpace+20)    //specify the space above the text
.css({
width: chart.chartWidth-15,    //specify the space on the right
color: '#a0a0a0',    //specify the font colour
'font-size': '12px',    //specify the font size
'font-style': 'italic'    //specify the font style
})
.add();
});

Add a subtitle to a chart

The subtitle will appear between the title and the chart.

widget.on('processresult',function(se,ev){
ev.result.subtitle = {
//specify the text
text: 'This is a sample subtitle. This is a sample subtitle. This is a sample subtitle.',
align: 'left',    //specify the alignment
style: {
color: '#787878',    //specify the colour
fontSize:'13px',    //specify the font size
fontWeight:'bold'    //specify the font weight
}
}
ev.result.chart.marginTop = 75    //specify the space added below the title
})

Add a modal popup in a dashboard

Add this script at dashboard-level (not widget-level).
The process is the same as for widgets:

1. In your dashboard, click the ellipsis icon (⋮) in the top right.
2. Select Edit Script.
3. Paste your JavaScript code and click Save.
4. Refresh the dashboard page to see the changes.

dashboard.on('initialized', function (se, ev) {
    const modalScope = prism.$ngscope;
    const modalDom = prism.$injector.get('ux-controls.services.$dom');
        const options = {
        scope: {
            in: modalScope,
        },
//specify the text to be displayed in the modal
        template: `Welcome to this Dashboard<br>
                (Description about the dashboard...)`,
    };
        const ui = {};
    modalDom.modal(options, ui);
    if (!modalScope.$$phase) {
        modalScope.$apply();
    }
        $('.md-ai-modal').css({'z-index':'999', 'position':'absolute', 'left': '0', 'right': '0', 'top':'30%'})
    $('.md-content').css({'z-index':'999', 'position':'absolute', 'left': '0', 'right': '0', 'top':'30%', 'width':'500px', 'text-align': 'center' })
    $('.md-overlay').css({'z-index':'998', 'position':'absolute'})
    })

Add additional information in tooltips in charts

The result of disabled Values in the left panel will display as additional information in the tooltip. So create and disable Values in the left panel as required. Make sure there is only one Category enabled.

widget.on("beforequery", function (se, ev) {
   $.each(ev.widget.metadata.panels[1].items, function(index, value){
       if(value.disabled == true)
       {
           var newJaql = {
               jaql  : JSON.parse(JSON.stringify(value.jaql))
           }
           ev.query.metadata.push(newJaql)
           lastIndex = ev.query.metadata.length - 1
           ev.query.metadata[lastIndex].disabled = false    
       }
   })
})
widget.on("beforedatapointtooltip", function (se, args){
   var valueSet, breakbyExist = false, categoryExist = false
   if(args.widget.metadata.panels[2].items.length > 0)
       breakbyExist = true
       if(args.widget.metadata.panels[0].items.length > 0)
           categoryExist = true
           category = args.context.category
           seriesName = args.context.points[0].seriesName
           if(categoryExist)
           {
               categoryTitle = args.widget.metadata.panels[0].items[0].jaql.title
               categoryIndex = args.widget.rawQueryResult.headers.indexOf(categoryTitle)
           }
   if(breakbyExist)
   {
       breakbyTitle = args.widget.metadata.panels[2].items[0].jaql.title
       breakByIndex = args.widget.rawQueryResult.headers.indexOf(breakbyTitle)
   }
   $.each(se.rawQueryResult.values, function(key, value)
          {
       if(!categoryExist)
       {
           if(value[breakByIndex].text == seriesName)
           {
               valueSet = value
           }
       }else if(!breakbyExist)
       {
           if(value[categoryIndex].text == category)
           {
               valueSet = value
           }
       }else
       {
           if(value[breakByIndex].text == seriesName && value[categoryIndex].text == category)
           {
               valueSet = value
           }
       }
   })
   $.each(args.widget.metadata.panels[1].items, function(index, value){
       if(value.disabled == true)
       {
           resultIndex = args.widget.rawQueryResult.headers.indexOf(value.jaql.title)
           args.context.points[args.context.points.length]= {
               seriesName: value.jaql.title,
               showPercentage: false,
               value: valueSet[resultIndex].text,
               valueColor: args.context.points[0].valueColor
           }
       }
   })
})

Rendering example:

Related articles

• How to Customize Advanced Analytics Reports with Widget Scripts
• Reorder or Remove Elements
• Customize Visual Styles
• Remove Elements