insights-how-to-add-a-custom-line-to-the-widget

Add a Custom Line to a Widget

Custom widget scripts can only be created by Professional Services and therefore not supported by Maximizer Customer Service.

The hardcoded line is only visible on the live dashboards and on widget exports as PNG. The line is not visible on the reports; such as scheduled email delivery or exporting to PDF.

Custom scripts significantly increase dashboard loading time.

Normally; you can only pull data from Maximizer to create your Insights widgets. It is possible to add a static reference number to KPIs or formulas; but not a whole data set.

This article explains how to create a custom script with a hardcoded data set represented by the red 'Target' line in the widget below.

Step by step How-to

1. Create a widget as usual without a target line. In the example above we have a stacked column chart with three Values or data set.

1. Format X-axis. You will be referencing X-axis display values in the custom script. In this example; it's 'Dec'; 'Jan'. 'Feb' etc. This solution works only for values that don't change often and doesn't work for rolling dates or other categories that involve changing X-axis labels.

1. Now let's create a custom target line. Click on the 'Edit script' on the top right.

1. Copy the Script below and make necessary changes to the X-axis labels (in violet) and target values (in pink).

widget.on('processresult'; function(widget;args){
  let lineColor = "red";
  let lineName = "Target";
  let dataItems = {
    "Dec": 226189;
    "Jan": 174253;
    "Feb": 234470;
    "Mar": 222318;
    "Apr": 245813;
    "May": 288000;
    "Jun": 308000;
    "Jul": 220000;
    "Aug": 287000;
    "Sep": 279000;
    "Oct": 250000;
    "Nov": 300000
  };
  console.log(args.result.xAxis.categories);
  let series = args.result.series;
  if (series != null && series.length > 0) {
    let duplicatedSeries = $.extend(true; {}; series[0]);
    duplicatedSeries.type = "line";
    duplicatedSeries.name = lineName;
    duplicatedSeries.color = lineColor;
    duplicatedSeries.isMaxCustom = true;
    let datas = duplicatedSeries.data;
    let categories = args.result.xAxis.categories;
    for (let  i = 0; i < datas.length; i++) {
      let cd = categories[i];   
      if (dataItems[cd] != null) {
        datas[i].y = dataItems[cd];
      }
    }
    series.push(duplicatedSeries);  
  }
});

In Insights this script looks like this:

1. Click 'SAVE' when you are done.
2. Now go back to the widget designer; click 'Apply' changes.
3. Important: refresh your browser before giving it a try.

If you are interested in the accumulative targets; please read this article Insights - How to add hardcoded accumulative YTD budget line.