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 tr...
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

     

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

	})	
	
});