Forum Discussion

jfarmer's avatar
jfarmer
Cloud Apps
10-18-2022
Solved

Change Axis labels on Line Chart

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}
		];
  • 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

3 Replies

Replies have been turned off for this discussion
  • Harry's avatar
    Harry
    Cloud Apps

    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's avatar
      jfarmer
      Cloud Apps

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

      • Harry's avatar
        Harry
        Cloud Apps

        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