Show 12-hour format on a Disk visual, from a field in 24-hour format

#1

Hi guys, I’m exploring ChartFactor Studio, and I’m building a dashboard which contains a Disk visualization. It turns out that this Disk is being rendered from the values of a column called for example start_hour. Now, this column is represented in 24-hour format, from 00 to 23. I’ve been looking at the Disk’s documentation and I know that it supports 12-hour formats. My question is, how can I achieve that, so that the Disk can show the time in 12 hour format when the tooltip is displayed, without having to create a new field in my database that contains the time in that format?

This is the sample code for the disk:

let provider = cf.provider("My Provider");
let source = provider.source("my-source");
let metric0 = cf.Metric("profits", "sum");
let group1 = cf.Attribute("start_hour")
    .limit(24)
    .sort("asc", "start_hour");

let myData = source.groupby(group1).metrics(metric0);
let color = cf.Color().palette([
    "#4575b4", "#74add1", "#abd9e9", 
    "#e0f3f8", "#ffffbf", "#fee090", 
    "#fdae61", "#f46d43", "#d73027", 
    "#a50026"
]);
let myChart = myData.graph("Disk").set("color", color).execute();

Any help would be appreciated!

#2

Hi @moshdev, there is a very efficient way to achieve what you want, and that is by using derived fields. Now, as you say, the Disk display supports 12 hour formats (e.g. 1am, 1:00am) as specified in the documentation. So, what you should do is convert your time from 24 to 12, that is, something like the following:

// Add this derived field configuration to the metadata settings
let start_hour_12_format = {
  'name': 'start_hour_12_format',
  'label': 'Hours 12-Format',
  'type': 'ATTRIBUTE',
  'dependencies': ["start_hour"], // Original database column
  'function': (hour) => {
    let hours12 = {
            '00' : { value: '12am', order: 1 },
            '01' : { value: '1am', order: 2 },
            '02' : { value: '2am', order: 3 },
            '03' : { value: '3am', order: 4 },
            '04' : { value: '4am', order: 5 },
            '05' : { value: '5am', order: 6 },
            '06' : { value: '6am', order: 7 },
            '07' : { value: '7am', order: 8 },
            '08' : { value: '8am', order: 9 },
            '09' : { value: '9am', order: 10 },
            '10' : { value: '10am', order: 11 },
            '11' : { value: '11am', order: 12 },
            '12' : { value: '12pm', order: 13 },
            '13' : { value: '1pm', order: 14 },
            '14' : { value: '2pm', order: 15 },
            '15' : { value: '3pm', order: 16 },
            '16' : { value: '4pm', order: 17 },
            '17' : { value: '5pm', order: 18 },
            '18' : { value: '6pm', order: 19 },
            '19' : { value: '7pm', order: 20 },
            '20' : { value: '8pm', order: 21 },
            '21' : { value: '9pm', order: 22 },
            '22' : { value: '10pm', order: 23 },
            '23' : { value: '11pm', order: 24 }
        }
    return hours12[hour];
  }
}

Note: In this case the order is important to correctly display the hour in its correspondent hour slice in the Disk.

I hope it helps.

#3

Hi @juan.dominguez, thanks for your answer, I was reading the documentation of derived fields and, based on your example and what is explained there, I think that now I understand very well what derived fields are about.

By the way, I also tried setting the reverse property to apply filters with that derived field and it works wonderfully.

Thanks!