jfarmer
10-18-2022Cloud Apps
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