How To Add Custom Buckets to A Chart Histogram – Maximizer

How To Add Custom Buckets To a Chart Program

Any widget script customization and can be perform by Professional Services only. Customized widget scrips are not supported by Maximizer Customer Service.

The Dynamic Buckets add-on supports aggregating a column chart’s results into buckets. This enables you to dynamically or manually segment the result population into groups while still retaining the filtering functionality.

Clicking on a column in the chart selects the specific members that make up the bucket.

Step by step how to:

Create a column chart widget. The position of the fields in this chart is counter-intuitive; so please pay attention and follow the instructions below:
1. Choose only one category. Pick the same field that you want to apply aggregation to (Y-axis values). In this example; we use 'Identification' from 'Company/Individuals'.
2. As a first value; pick the measure by which the bucket will be grouped. The most common one is SUM(Revenue). In the example below; I've used a User-Define Field '# Licensed Users'.
3. As a second value; define the aggregation values for the buckets; for example count(identification) / sum(revenue) / avg(revenue).

Widget designer for the example above should look like this:

Add a custom script. Click on Options; the triple dots on the top right corner; and pick Edit Script.

In the Widget Editor; enter the script that defines your bucket ranges. There are 2 type of bucket ranges you can define:
A) Manual Ranges: Allow you to manually define the buckets ranges.
To create buckets for the example above you should add following bucket ranges:

1-5 greater equal 1 and less than 6

6-10 greater equal 6 and less than 11

11-25 greater equal 11 and less than 26

26-50 greater equal 26 and less than 51

51-100 greater equal 51 and less than 101

101-250greater equal 101 and less than 251

251-500greater equal 251 and less than 501

501+ greater equal 501

Pay attention to the end values of each bucket. Put some thought before you customize the script. When ready; copy/paste the script below in the widget script and customize bucket labels and ranges for your scenario.

Copy Code

Code

var options = {    
  type: "manual";           // (required) Can be 'auto' or 'manual'    
  separator: " - ";         // (optional)    
  clickBucketOption: 2;     // (optional) Can be 1 (default; sets column categories as filters) 
  // or 2 (exports column categories to CSV file).     
  ranges: [                             
  // Manually define the buckets you want to use
  // This will group any values less than 5        
  {   
    name: "1-5";      // Label for the bucket           
    color: "#3471AD"; // Color can be text or a hex code            
    min: 0;           // The lower limit for the bucket; put null for no lower limit
    max: 6            // The upper limit for the bucket; put null for no upper limit        
  };        
  
  // This will group any values between 6 & 10        
  {            
    name: "6-10";            
    color: "#fcba03";            
    min: 6;            
    max: 11        
  };        
  
  // This will group any values between 11 & 25        
  {            
    name: "11-25";            
    color: "#F66500";            
    min: 11;            
    max: 26        
  };        
  
  // This will group any values between 26 & 50        
  {            
    name: "26-50";            
    color: "#2ba6cb";            
    min: 26;            
    max: 51        
  };        
  
  // This will group any values between 51 & 100        
  {            
    name: "51-100";            
    color: "#FFC400";            
    min: 51;            
    max: 101        
  };        
  
  // This will group any values between 101 & 250        
  {            
    name: "101-250";            
    color: "#FFC400";            
    min: 101;            
    max: 251        
  };        
  
  // This will group any values between 251 & 500        
  {            
    name: "251-500";            
    color: "#FFC400";            
    min: 251;            
    max: 501        
  };        
  
  // This will group any values greater than 501        
  {            
    name: "501+";            
    color: "#42BC39";            
    min: 501;            
    max: null        
  }    
  ]
};

prism.dynamicBuckets(widget; options);

B) Dynamic Ranges: Allow you to define the number of buckets. Ranges will be calculated automatically by the Min and Max of the widget values.

Click here to learn more about this scenario.

Add the following code to the end of the script to create the buckets:

prism.dynamicBuckets(widget; options )

Save the script; click Apply and refresh the page. The widget now displays the data divided into buckets you defined.

Because we use 'Dynamic Buckets' plugin to build this widget; sometimes; for buckets to appear; you need to reload the page.

img_qhxsue4t.cfc.png
20 KB Download

Step by step how to:

Related articles