Forum Discussion

liamcameron's avatar
liamcameron
Cloud Apps
06-04-2024
Solved

Switchable Break By Plugin/Widget/Script

 

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&cost=all&sort=A-Z&searchString=switch

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??!

 

Blox
Dashboards & Reporting
  • Benji_PaldiTeam's avatar
    Benji_PaldiTeam
    06-05-2024

    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();

	})	
	
});

       

    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.

     

    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

     

4 Replies

  • Benji_PaldiTeam's avatar
    Benji_PaldiTeam
    Data Pipeline
    06-05-2024

    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();

	})	
	
});

       

    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.

     

    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

     

  • jpacheco's avatar
    jpacheco
    Admin
    06-10-2024

    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.



  • DRay's avatar
    DRay
    Admin
    06-28-2024

    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.

  • Astroraf's avatar
    Astroraf
    Data Pipeline
    03-05-2025

    Hey Benji_PaldiTeam / Liliia_DevX / DRay ,

     

    I am tryin gto use this code to switch betweent the values of a Line chart. I believe my code is somewhat correct. Is it just the panels that I need to change for it to affect the values?

    My code:

     

     

    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 = {
        "Average Price": {
            table: "GMV_ORDERS_DASH_UNION",
            column: "PRICE",
            dim: "[GMV_ORDERS_DASH_UNION.PRICE]",
            datatype: "numeric",
			agg: "avg",
            title: "Average PRICE"
        },
        "Count of Orders": {
            table: "GMV_ORDERS_DASH_UNION",
            column: "ORDER ID_TEXT",
            dim: "[GMV_ORDERS_DASH_UNION.ORDER ID_TEXT]",
            datatype: "text",
			agg: "count",
            title: "# of unique ORDER ID_TEXT"
        },
        "Total Amount": {
            table: "GMV_ORDERS_DASH_UNION",
            column: "AMOUNT",
            dim: "[GMV_ORDERS_DASH_UNION.AMOUNT]",
            datatype: "text",
			agg: "sum",
            title: "Total AMOUNT"
        }
    };

  $.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[1].items[0].jaql = dimensions[value];
				widget.refresh();
			})
			.add();

	})	
	
});