Display chart category in month format as mmmm (e.g. March) format in Chart instead of m (e.g. 3)

  • 1
  • Question
  • Updated 12 months ago
  • Answered
  • (Edited)
I want to see the name of the month, not the number in the chart below:



This page says I should be able to set date granularity options on the category, but I'm not seeing those...
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb

Posted 12 months ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Snippet!
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Conlan,

Add a model ui formula field to translate the number into a month.  Then set the Category to the model ui field.

If you are on Millau, you can use the new Case function.  If not, you'll need nested "IF's".  Here is a sample using the Case function in Skuid 11 (Millau).

Thanks,

Bill

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="TasksByMonth" limit="" query="true" createrowifnonefound="false" datasource="salesforce" type="aggregate" sobject="Task" orderby="CALENDAR_MONTH(CreatedDate) ASC">
            <fields>
                <field id="Id" name="countId" function="COUNT"/>
                <field id="Month" uionly="true" displaytype="FORMULA" label="Month Formula Field" ogdisplaytype="TEXT" readonly="true" returntype="TEXT">
                    <formula>CASE({{cmCreatedDate}}, 1, 'January', 2, 'February', 3, 'March', 4, 'April', 5, 'May', 6, 'June', 7, 'July', 8, 'August', 9, 'September', 10, 'October', 11, 'November', 12, 'December', '')</formula>
                </field>
            </fields>
            <conditions/>
            <actions/>
            <groupby method="simple">
                <field id="CreatedDate" name="cmCreatedDate" function="CALENDAR_MONTH"/>
            </groupby>
        </model>
    </models>
    <components>
        <grid uniqueid="sk-F-JmZ-1016">
            <divisions>
                <division behavior="flex" minwidth="100px" ratio="1">
                    <components>
                        <skuidvis__chart model="TasksByMonth" maintitle="{{Model.labelPlural}}" type="column" uniqueid="sk-F-fP--1201">
                            <dataaxes>
                                <axis id="axis1" title="Number" integersonly="true" minvalue="0"/>
                            </dataaxes>
                            <categoryaxes>
                                <axis id="categories" categorytype="field" field="Month"/>
                            </categoryaxes>
                            <serieslist>
                                <series valuefield="countId" splittype="none"/>
                            </serieslist>
                            <colors/>
                            <legend layout="horizontal" halign="center" valign="bottom" showlabels="true"/>
                        </skuidvis__chart>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                    <components>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="false" model="TasksByMonth" buttonposition="" mode="readonly" allowcolumnreordering="true" responsive="true" uniqueid="sk-F-LKd-1038">
                            <fields>
                                <field id="CreatedDate" name="cmCreatedDate" hideable="true" uniqueid="fi-F-N8P-1051" valuehalign="" type="">
                                    <label>CreatedDate Month</label>
                                </field>
                                <field id="Month" name="Month" hideable="true" uniqueid="fi-F-N8P-1049" valuehalign="" type=""/>
                                <field id="Id" name="countId" hideable="true" uniqueid="fi-F-N8P-1050" valuehalign="" type=""/>
                            </fields>
                            <rowactions/>
                            <massactions usefirstitemasdefault="true"/>
                            <views>
                                <view type="standard"/>
                            </views>
                        </skootable>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
        <actionsequences uniqueid="sk-F_YRF-289"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
(Edited)
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,474 Points 2k badge 2x thumb
Looks like there are a couple items you're running into.  Regarding date granularity settings, HighCharts is expecting a date or datetime datatype for that option.  It looks like you're using an aggregate query for your model source with a CALENDAR_MONTH grouping.  This will return as a number field rather than a date field so HighCharts can't re-aggregate off this as a date.  (also be careful about lumping multiple years of data into the same month with this grouping).  

A good approach to tackling this is to setup a Period date in a salesforce formula field and use that as your grouping.  Just use the raw field for your grouping and skip the CALENDAR wrapper options in your query.  That will return a date value you can use in HighCharts while eliminating the noise on timestamps and daily records.  Also with the month granularity, HighCharts should display the name of the month when you provide it with a real date field.  Here's a salesforce formula that we use for week groupings:

DATEVALUE(CASE( 
MOD(DATEVALUE(CreatedDate) - DATE(1900, 1, 5),7) , 
0, CreatedDate , 
1, CreatedDate + 6 , 
2, CreatedDate + 5 , 
3, CreatedDate + 4 , 
4, CreatedDate + 3 , 
5, CreatedDate + 2 , 
6, CreatedDate + 1 , 
NULL 
))

Second, in scenarios where switching date granularity isn't required, Bill's option would work well to translate your grouping value.  You could also move that logic into a salesforce formula field so it can be reused. 

There is also an option to use the jQuery FORMAT_DATE in a UI only field and use that for your axis.  This would require a date field as an input rather than an numeric aggregation.  This approach is referenced in the "Date / Time Format and Manipulation" section here:

https://docs.skuid.com/v10.0.4/en/skuid/models/ui-only-models-fields.html

Here's an example of a UI only date field that's formatted to show the year and month name:

FORMAT_DATE("yy/MM",{{CreatedDate}})


A final note is that I've found it a bit tricky to manipulate the date display when working with date granularity options.  The issue is that once you manipulate the formatting of the date, it's now considered a string and highcharts won't process it as a date that can be aggregated differently.