Change visualization with Level filter change

#1

I need to create a Dashboard with charts where the chart visualization changes as per the Hierarchy Level. The chart has Date hierarchy with 3 levels - Monthly, Quarterly & Yearly. If the Monthly/Quarterly level is selected in the Level filter, Line Chart should be presented. If Yearly level is selected, the Bar Chart should be displayed.

Is there a way to achieve this?

1 Like
#2

Hello,

I think this will work if I understand correctly:

var x= parameterCalendar1.control.parameterValue.value.levelDepth; //filter for end user inside dashboard
var viewParameter = this.control.getViewParameterByName(“viewParameter2”); //value filter connected to the same charts as the first filter

if(x==0) //0 for year, 1 for quarter, 2 for month
{
chart1.hidden=true;
chart2.hidden=false;
// viewParameter.parameterValue.detailsLevelDepth = 2;
}

#3

Ravi,

You can achieve this by using a custom script on Value change action of the level filter. Place the year visualization on one layer and Month/Quarter visualization on the other. On changing the level filter value, you can hide/show the layer you want. You can do something like this

var canvasService = this.getService("CanvasService");

var viewParameter = this.parentView.control.getViewParameterByName("viewParameter1");

//alert (viewParameter.parameterValue.detailsLevelDepth);

//if level is year then show year layer and hide month and day layers

if(viewParameter.parameterValue.detailsLevelDepth == 0)

{

canvasService.hideLayers(["Layer4", "Layer3"]);

canvasService.showLayers(["Layer2"]);

}

else if(viewParameter.parameterValue.detailsLevelDepth == 1)

{

canvasService.hideLayers(["Layer4", "Layer2"]);

canvasService.showLayers(["Layer3"]);

}

else if(viewParameter.parameterValue.detailsLevelDepth == 2)

{

canvasService.hideLayers(["Layer2", "Layer3"]);

canvasService.showLayers(["Layer4"]);

}

1 Like
#4

Thanks a lot, Ankita!

#5

Hi @ankita,

Instead of switching the layers, is it possible to switch the chart visualization from Line to Bar and vice-versa depending on the Level Filter Value through script?

#6

@ravi.bansal,
I believe you can change the chart type of a visualization via script. Has already a documentation for that here: https://www.dundas.com/support/developer/script-library/controls/chart/changing-a-chart-type.

#7

Hi @renzi.mendoza, I am trying to achieve that but the script is not working for me.

// Get the series to change
var seriesSelected = chart1.control.series.toEnumerable().first(
    function(seriesItem) { return seriesItem.legendText === seriesList.value }
    );

var viewParameter = this.parentView.control.getViewParameterByName("viewParameter1");

var chartType;

//alert (viewParameter.parameterValue.detailsLevelDepth);
//if level is Year then show BAR Chart and if level is Quarter or Month then show as LINE Chart
if(viewParameter.parameterValue.detailsLevelDepth == 0)

{
chartType = dundas.controls.ChartType.BAR;
}

else if(viewParameter.parameterValue.detailsLevelDepth == 1)

{
chartType = dundas.controls.ChartType.LINE;
}

else if(viewParameter.parameterValue.detailsLevelDepth == 2)

{
chartType = dundas.controls.ChartType.LINE;
}

// Set the chart type 
seriesSelected.chartType = chartType
#8

Hi Ravi,

Can you please check if you are getting any errors in the browser development console (If using Chrome you can access the browser console by pressing F12)?
image

Besides, can you please verify if you are getting the desired series in the “seriesSelected” variable. You can do a console.log (seriesSelected) to check the value of this variable in the browser development console. Can you also confirm if the value of “seriesList.value” on line 3 of your script is the legend text of your series?

#9

Thanks a lot, @pankaj. The seriesSelected had the wrong value.