Skip to main content

Comments

4 comments

  • Johnny Stevens

    VISUI

    Thanks again for another excellent solution!!

    After consulting with my team, our users want Monday as the StartOfWeek and Sunday as the EndOfWeek. To accommodate this, I needed to configure both side of this equation (HighCharts and Logi). I had to use the javascript/HC setup you recommended to set the StartOfWeek as "0" AND I had to set the _Settings.lgx/Globalization/FirstDayOfWeek to "1" attribute. It appears that Logi 'moves' HC's StartOfWeek (at least in 14.0 SP3) along with the Globalization attribute, keeping the two a day apart unless you force HC's StartOfWeek attribute.

    I'm pasting in a reproducer for anyone who wants to test this out/see it in action. Many thanks again to VISUI - If anyone is looking for custom work, John Sweazen at VISUI is the bomb!!

    <?xml version="1.0" encoding="utf-8"?>
    <Report
        ID="TestStartOfWeek"
        >
        <Body>
            <Rows
                ID="rows1"
                >
                <Row
                    ID="row1"
                    >
                    <Column
                        ID="col1"
                        >
                        <ChartCanvas
                            ChartCaption="HighCharts StartOfWeek: 0"
                            ChartHeight="300"
                            ChartWidth="450"
                            ID="Chart1"
                            >
                            <Series
                                ChartXDataColumn="endOfWeek"
                                ChartXDataColumnType="DateTime"
                                ChartYDataColumn="ctId"
                                Type="Bar"
                                >
                                <DataLayer
                                    ID="dlBar"
                                    Type="Static"
                                    >
                                    <StaticDataRow
                                        date="2022-04-01"
                                        id="10"
                                    />
                                    <StaticDataRow
                                        date="2022-04-05"
                                        id="11"
                                    />
                                    <StaticDataRow
                                        date="2022-04-11"
                                        id="12"
                                    />
                                    <StaticDataRow
                                        date="2022-04-12"
                                        id="13"
                                    />
                                    <StaticDataRow
                                        date="2022-04-17"
                                        id="14"
                                    />
                                    <StaticDataRow
                                        date="2022-04-18"
                                        id="15"
                                    />
                                    <TimePeriodColumn
                                        DataColumn="date"
                                        ID="endOfWeek"
                                        TimePeriod="LastDayOfWeek"
                                    />
                                    <GroupFilter
                                        GroupColumn="endOfWeek"
                                        ID="grpDate"
                                        >
                                        <GroupAggregateColumn
                                            AggregateColumn="id"
                                            AggregateFunction="Count"
                                            ID="ctId"
                                        />
                                    </GroupFilter>
                                </DataLayer>
                            </Series>
                            <ChartXAxis
                                ID="xAxis"
                                >
                                <AxisLabelStyle
                                    FontAngle="55"
                                    Format="&quot;Wk Ending &quot;MM/dd/yyyy"
                                />
                            </ChartXAxis>
                        </ChartCanvas>
                        <Label
                            Caption="With HC Start set to 0 and Logi _Settings set to 0, &lt;br \&gt;the LastDayOfWeek in Logi is off by one day compared to HC&apos;s config&lt;br \&gt;&lt;br \&gt;
    With Logi Globalization FirstDayOfWeek=&quot;1&quot;, &lt;br \&gt;this chart will align showing Sunday as the LastDayOfWeek"
                            Format="HTML"
                        />
                    </Column>
                    <Column
                        ID="col2"
                        >
                        <ChartCanvas
                            ChartCaption="HighCharts StartOfWeek: 6"
                            ChartHeight="300"
                            ChartWidth="450"
                            ID="Chart2"
                            >
                            <Series
                                ChartXDataColumn="endOfWeek"
                                ChartXDataColumnType="DateTime"
                                ChartYDataColumn="ctId"
                                Type="Bar"
                                >
                                <DataLayer
                                    ID="dlBar"
                                    Type="Static"
                                    >
                                    <StaticDataRow
                                        date="2022-04-01"
                                        id="10"
                                    />
                                    <StaticDataRow
                                        date="2022-04-05"
                                        id="11"
                                    />
                                    <StaticDataRow
                                        date="2022-04-11"
                                        id="12"
                                    />
                                    <StaticDataRow
                                        date="2022-04-12"
                                        id="13"
                                    />
                                    <StaticDataRow
                                        date="2022-04-17"
                                        id="14"
                                    />
                                    <StaticDataRow
                                        date="2022-04-18"
                                        id="15"
                                    />
                                    <TimePeriodColumn
                                        DataColumn="date"
                                        ID="endOfWeek"
                                        TimePeriod="LastDayOfWeek"
                                    />
                                    <GroupFilter
                                        GroupColumn="endOfWeek"
                                        ID="grpDate"
                                        >
                                        <GroupAggregateColumn
                                            AggregateColumn="id"
                                            AggregateFunction="Count"
                                            ID="ctId"
                                        />
                                    </GroupFilter>
                                </DataLayer>
                            </Series>
                            <ChartXAxis
                                ID="xAxis"
                                >
                                <AxisLabelStyle
                                    FontAngle="55"
                                    Format="&quot;Wk Ending &quot;MM/dd/yyyy"
                                />
                            </ChartXAxis>
                        </ChartCanvas>
                        <Label
                            Caption="With HC Start set to 6 and Logi _Settings set to 0, &lt;br \&gt;the LastDayOfWeek in Logi is aligned with HC as Saturday&lt;br \&gt;&lt;br \&gt;
    With Logi Globalization FirstDayOfWeek=&quot;1&quot;, &lt;br \&gt;this chart will mis-align the dates by 1 day"
                            Format="HTML"
                        />
                    </Column>
                </Row>
                <Row
                    ID="row2"
                    >
                    <Column
                        ColSpan="2"
                        >
                        <HR/>
                    </Column>
                </Row>
                <Row
                    ID="row3"
                    >
                    <Column
                        ID="col3"
                        >
                        <LineBreak/>
                        <DataTable
                            Caption="Raw Data"
                            ID="dt1"
                            >
                            <DataLayer
                                ID="dlBar"
                                Type="Static"
                                >
                                <StaticDataRow
                                    date="2022-04-01"
                                    id="10"
                                />
                                <StaticDataRow
                                    date="2022-04-05"
                                    id="11"
                                />
                                <StaticDataRow
                                    date="2022-04-11"
                                    id="12"
                                />
                                <StaticDataRow
                                    date="2022-04-12"
                                    id="13"
                                />
                                <StaticDataRow
                                    date="2022-04-17"
                                    id="14"
                                />
                                <StaticDataRow
                                    date="2022-04-18"
                                    id="15"
                                />
                                <TimePeriodColumn
                                    DataColumn="date"
                                    ID="endOfWeek"
                                    TimePeriod="LastDayOfWeek"
                                />
                                <GroupFilter
                                    GroupColumn="endOfWeek"
                                    ID="grpDate"
                                    >
                                    <GroupAggregateColumn
                                        AggregateColumn="id"
                                        AggregateFunction="Count"
                                        ID="ctId"
                                    />
                                </GroupFilter>
                            </DataLayer>
                            <AutoColumns/>
                        </DataTable>
                    </Column>
                    <Column
                        ID="col4"
                        >
                        <LineBreak/>
                        <Label
                            Caption="To get both HC and Logi to align with Sunday as the LastDayOfWeek, &lt;br /&gt;
    The HC StartOfWeek must be set to &quot;0&quot; AND the Logi Settings &gt; Globalization &gt; &lt;br /&gt;FirstDayOfWeek must be set to &quot;1&quot;&lt;br \&gt;&lt;br \&gt;
    Note that the endOfWeek value in the Raw Data will adjust &lt;br \&gt;based on Logi&apos;s Globalization setting"
                            Class="ThemeTextLarger"
                            Format="HTML"
                        />
                    </Column>
                </Row>
            </Rows>
            <IncludeScript
                ID="jsStartOfWeekChart1"
                IncludedScript="var ChartContainer = Y.one(&apos;#Chart1&apos;);
    ChartContainer.on(&apos;afterCreateChart&apos;, function(e) {
            e.chart.xAxis[0].update({
                 startOfWeek: 0
            });
    });
    "
            />
            <IncludeScript
                ID="jsStartOfWeekChart2"
                IncludedScript="var ChartContainer = Y.one(&apos;#Chart2&apos;);
    ChartContainer.on(&apos;afterCreateChart&apos;, function(e) {
            e.chart.xAxis[0].update({
                 startOfWeek: 6
            });
    });
    "
            />
        </Body>
    </Report>

    1
  • VISUI

    Glad the information helped with a solution.  Thanks for providing your final code.

    1
  • VISUI

    Johnny,  Logi sets the Start of Week within the _Settings Globalization element.  According to this description it does not appear that it will specifically set this for Highcharts,

    Changes how the first day of the week is determined for the @Date tokens that return first and last days of the week, such as @Date.ThisWeekStart~ and @Date.ThisWeekEnd~. By default, Sunday is the first day of the week. You may set this attribute to a number representing a different day of the week.


    0=Sunday
    1=Monday
    2=Tuesday
    3=Wednesday
    4=Thursday
    5=Friday
    6=Saturday
     
    To set options not exposed by Logi ChartCanvas configuration elements you can use JavaScript to do so using the "beforeChartCreate" and "afterChartCreate" events.

    Something like this will work where #CC1 is the name of your ChartCanvas: 
    var ChartContainer = Y.one('#CC1');
    ChartContainer.on('afterCreateChart', function(e) {
            e.chart.xAxis[0].update({
                 startOfWeek: 0
            });
    });
    0
  • Steve Jarvis

    JS rocks!!

    0

Please sign in to leave a comment.