cancel
Showing results for 
Search instead for 
Did you mean: 

Switchable Break By Plugin/Widget/Script

liamcameron
9 - Travel Pro
9 - Travel Pro

 

I have a Bar Chart that is Revenue per past 12 months.

 

I have 5-6 different fields that my users want to view revenue over the past 12 month “Broken by” or “categoried” by

 

Meaning, lets try a stacked area chart, or a column chart etc… they want the ability to specify a the bar should be broken up by:

 

  • Ship Type
  • Work Type
  • Billing Type

 

I can build all these very easily, but nothing I’ve seen in widget scripts or blox seems to do what I need, even this… https://www.sisense.com/marketplace/switchable-dimensions/?categories=all&type=addons&publisher=all&...

https://www.binextlevel.com/post/switchable-measure-buttons

Is there a widget script that I can add to provide a dropdown somewhere to change this? or can i create these as bloX actions, but then how do i make a BloX bar chart??!

 

1 ACCEPTED SOLUTION

Benji_PaldiTeam
11 - Data Pipeline
11 - Data Pipeline

Hi @liamcameron ,

There are multiple approaches to achieve your goal:

  1. Utilizing a Widget Script: You can use the following widget script. This script introduces buttons for each dimensions. Upon clicking a button, the chart dynamically updates based on the selected category. Ensure to customize the 'dimensions' variable with jaql of the the necessary dimensions you wish to switch.

     
    
    widget.on('processresult', function(se, ev){	
    	ev.result.chart.marginTop= 60
    });
    
    widget.on("domready", function(w){
    		
    	chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
    	
    	const dimensions = {
    		"Age Range": {
    			table: "Commerce",
    			column: "Age Range",
    			dim: "[Commerce.Age Range]",
    			datatype: "text",
    			title: "Age Range"
    		},
    		"Condition": {
    			table: "Commerce",
    			column: "Condition",
    			dim: "[Commerce.Condition]",
    			datatype: "text",
    			title: "Condition"
    		},
    		"Gender": {
    			table: "Commerce",
    			column: "Gender",
    			dim: "[Commerce.Gender]",
    			datatype: "text",
    			title: "Gender"
    		}
    
    	}
    	
    	$.each(Object.keys(dimensions), function(index, value){
    		chart.renderer.button(value, 10 + (index * 95), 10)
    			.attr({
    				zIndex : 10,
    				height: 15,
    				width: 75,
    				'text-align': 'center'
    			})
    			.on('click', function() {	
    				w.metadata.panels[2].items[0].jaql = dimensions[value];
    				widget.refresh();
    			})
    			.add();
    
    	})	
    	
    });
    Benji_PaldiTeam_1-1717573496768.png

     

  2. Using Paldi's Plugin: Alternatively, Advanced Dim Switcher offers a hassle-free solution without any coding required. It simplifies the process of switching categories or break-by's across various chart types. The plugin supports column charts, bar charts, line charts, area charts, and pie charts, making it versatile for your needs.

Benji_PaldiTeam_0-1717573455427.png

 

Feel free to explore both options and choose the one that aligns best with your preferences and workflow! 

Feel free to reach out if you have further questions, we're always happy to help 🙂
[email protected] 
Paldi Solutions, Number #1 Sisense Plugins Developer

 

View solution in original post

3 REPLIES 3

Benji_PaldiTeam
11 - Data Pipeline
11 - Data Pipeline

Hi @liamcameron ,

There are multiple approaches to achieve your goal:

  1. Utilizing a Widget Script: You can use the following widget script. This script introduces buttons for each dimensions. Upon clicking a button, the chart dynamically updates based on the selected category. Ensure to customize the 'dimensions' variable with jaql of the the necessary dimensions you wish to switch.

     
    
    widget.on('processresult', function(se, ev){	
    	ev.result.chart.marginTop= 60
    });
    
    widget.on("domready", function(w){
    		
    	chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
    	
    	const dimensions = {
    		"Age Range": {
    			table: "Commerce",
    			column: "Age Range",
    			dim: "[Commerce.Age Range]",
    			datatype: "text",
    			title: "Age Range"
    		},
    		"Condition": {
    			table: "Commerce",
    			column: "Condition",
    			dim: "[Commerce.Condition]",
    			datatype: "text",
    			title: "Condition"
    		},
    		"Gender": {
    			table: "Commerce",
    			column: "Gender",
    			dim: "[Commerce.Gender]",
    			datatype: "text",
    			title: "Gender"
    		}
    
    	}
    	
    	$.each(Object.keys(dimensions), function(index, value){
    		chart.renderer.button(value, 10 + (index * 95), 10)
    			.attr({
    				zIndex : 10,
    				height: 15,
    				width: 75,
    				'text-align': 'center'
    			})
    			.on('click', function() {	
    				w.metadata.panels[2].items[0].jaql = dimensions[value];
    				widget.refresh();
    			})
    			.add();
    
    	})	
    	
    });
    Benji_PaldiTeam_1-1717573496768.png

     

  2. Using Paldi's Plugin: Alternatively, Advanced Dim Switcher offers a hassle-free solution without any coding required. It simplifies the process of switching categories or break-by's across various chart types. The plugin supports column charts, bar charts, line charts, area charts, and pie charts, making it versatile for your needs.

Benji_PaldiTeam_0-1717573455427.png

 

Feel free to explore both options and choose the one that aligns best with your preferences and workflow! 

Feel free to reach out if you have further questions, we're always happy to help 🙂
[email protected] 
Paldi Solutions, Number #1 Sisense Plugins Developer

 

jcordell
Community Team Member
Community Team Member

Hey @liamcameron.

I wanted to follow up to see if the solution offered by @Benji_PaldiTeam or @samuval worked for you.

If so, please click the 'Accept as Solution' button so other users with the same questions can find the answer faster. If not, please let us know so that we can continue to help.

Thank you.



Jacqueline Pacheco

DRay
Community Team Leader
Community Team Leader

Hey @liamcameron.

I wanted to follow up to see if the solution offered by @Benji_PaldiTeam or @samuval worked for you.

If so, please click the 'Accept as Solution' button so other users with the same questions can find the answer faster. If not, please let us know so that we can continue to help.

Thank you.

David Raynor (DRay)