Change Axis labels on Line Chart

[jfarmer]

I have a couple dashboards with month numbers instead of month names as the x-axis labels, and I modify the numbers to month names with the following script. It works when I am editing the widget, but in my dashboard it works very briefly then goes back to showing numbers. 

widget.on('domready', function(widget,args){
 var monthDict = {
  1: 'Jan',
  2: 'Feb',
  3: 'Mar',
  4: 'Apr',
  5: 'May',
  6: 'Jun',
  7: 'Jul',
  8: 'Aug',
  9: 'Sep',
  10: 'Oct',
  11: 'Nov',
  12: 'Dec'
 }
 widget.queryResult.xAxis = {
     categories: widget.queryResult.xAxis.categories,
     //Runs every value in the category through this function 
     labels: {
         formatter: function () {
          return monthDict[this.value]
         }
     }
 }
})

 I suspect it could be tied to our tabber widget we use as each of these charts are on a different tab. The tabber widget uses the following script. 

Is what is causing this issue that they both use 'on render' actions and how could I get around it? Thanks!

/*
Welcome to your Widget's Script.

To learn how you can access the Widget and Dashboard objects, see the online documentation at https://sisense.dev/guides/js/extensions
*/

let awarenessDict = {
	header: "6320975ac5f4330037f5e20e",
	vis_per_week: "6320967dc5f4330037f5e205",
	avg_usr_top: "63330ec1c5f4330037f5f5cf",
	tot_pg_views: "63346af4c5f4330037f5f759",
	pg_views_by_usr_type: "63346ac3c5f4330037f5f757",
	home_pg_views: "63497108c5f4330037f608b1",
	lesson_pg_views: "6349710fc5f4330037f608b3"
	};

let acquisitionDict = {
	header: "63209795c5f4330037f5e210",
	new_regs: "63209d90c5f4330037f5e220",
	new_prem_subs: "6320bf31c5f4330037f5e23e",
	anon_to_reg_to_sub_conv: "63333ba7c5f4330037f5f637",
	tot_reg_by_ref: "63333763c5f4330037f5f5eb",
	tot_regs: "63333794c5f4330037f5f5ed"
	};

let engagementDict = {
	header: "632097a1c5f4330037f5e212",
	trials_w_prem_act: "63224911c5f4330037f5eaf7",
	perc_prem_usr_act_cont: "632a3794c5f4330037f5f1a7",
	trial_usr_sched_adop: "63348834c5f4330037f5f79c",
	perc_trial_w_sched: "6334886cc5f4330037f5f79e",
	perc_prem_act_notes_and_vid: "633ef370c5f4330037f5ff81",
	perc_prem_act_notes_and_vid_and_other: "634495f3c5f4330037f60480",
	perc_prem_act_combined: "63449704c5f4330037f604a5"
	};

let valueDict = {
	header: "632097a5c5f4330037f5e214",
	upsell_subscribers: "633f3fecc5f4330037f6016b",
	upsell_subscribers_perc: "633f4015c5f4330037f6016f",
	avg_sub_val: "6345c90ac5f4330037f605ee"
	};

let retentionDict = {
	header: "632097a9c5f4330037f5e216",
	new_trials_by_ret_status: "63209dc1c5f4330037f5e222",
	sub_net_churn_monthly: "63458007c5f4330037f604ae",
	sub_net_churn_ytd: "634581f0c5f4330037f604b2",
	avg_sub_len_trial_vs_non: "633ef4c8c5f4330037f5ff8d",
	churn_monthly: "634ee562c5f4330037f60c13",
	churn_perc_monthly: "634ee5a4c5f4330037f60c17"
	};

let awarenessDictArray = Object.values(awarenessDict);
let acquisitionDictArray = Object.values(acquisitionDict);
let engagementDictArray = Object.values(engagementDict);
let valueDictArray = Object.values(valueDict);
let retentionDictArray = Object.values(retentionDict);

let awarenessDictHideArray = acquisitionDictArray.concat(engagementDictArray, valueDictArray, retentionDictArray);
let acquisitionDictHideArray = awarenessDictArray.concat(engagementDictArray, valueDictArray, retentionDictArray);
let engagementDictHideArray = awarenessDictArray.concat(acquisitionDictArray, valueDictArray, retentionDictArray);
let valueDictHideArray = awarenessDictArray.concat(acquisitionDictArray, engagementDictArray, retentionDictArray);
let retentionDictHideArray = awarenessDictArray.concat(acquisitionDictArray, engagementDictArray, valueDictArray);

widget.on('render',function(w, e){e.prefixText = '';
			e.suffixText = '';
			e.selectedColor = '#0074e6'; /*The color of the chosen title*/
			e.fontColor = '#7f8d9a'; /*The color of the unchosen titles*/
			e.elementWidth = '103%';
			e.descColor = '#a5a5a5';
			e.parentMarginLeft = '-15px';
			e.height = 32; /* affects the tabber widget default high*/
			});
widget.tabs = [{title: "Awareness", displayWidgetIds : awarenessDictArray,
			hideWidgetIds : awarenessDictHideArray},
			{title: "Conversion", displayWidgetIds : acquisitionDictArray,
			hideWidgetIds : acquisitionDictHideArray},
			{title: "Engagement", displayWidgetIds : engagementDictArray,
			hideWidgetIds : engagementDictHideArray},
			{title: "Value", displayWidgetIds : valueDictArray,
			hideWidgetIds : valueDictHideArray},
			{title: "Retention", displayWidgetIds : retentionDictArray,
			hideWidgetIds : retentionDictHideArray}
		];

[Harry · Accepted solution]

Hello @jfarmer ,

I think this is because the script you added in 'domready' event. Hope below script works here.

newItemMapping = { '1':'Jan',
				  '2':'Feb',
				  '3':'Mar',
				  '4':'Apr',
				  '5':'May'
				}

widget.on("queryend", function(se, ev){
	
	var panelName = 'Day Number' //Items in this panel will be replaced with new items
	
	panelIndex = ev.rawResult.headers.indexOf(panelName)
	$.each(ev.rawResult.values, function(index, value){

		
		if(newItemMapping[value[panelIndex].text] != undefined)
		{
			value[panelIndex].data = newItemMapping[value[panelIndex].data]
			value[panelIndex].text = newItemMapping[value[panelIndex].text]
		}
	})	
})

Always here to help,
Harry from QBeeQ
[email protected]
www.qbeeq.pl

[jfarmer]

Easy fix! Thanks a ton, this worked like a charm. 

[Harry]

Very happy to know that the issue has been resolved.

I noticed that you have a long script for widget tabber. QbeeQ created an advanced Widget Tabber with which you can create tabs without adding any script to widget.

Please let me know if you have any questions

Always here to help,
Harry from QBeeQ
[email protected]
www.qbeeq.pl