Set startOfWeek to Sunday in chart (HighCharts config)

Johnny Stevens

Logi Info Ninja
Logi Forum Guru
April 26, 2022 19:00

I see that HighCharts has an option for setting startOfWeek, which I want to set to Sunday - https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/startofweek-sunday/

How do I go about incorporating this into an Info report?

Thanks in advance,
Johnny

Comments

4 comments

Johnny Stevens

Logi Info Ninja

Logi Forum Guru

April 27, 2022 13:48

Edited
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=""Wk Ending "MM/dd/yyyy"
/>
</ChartXAxis>
</ChartCanvas>
<Label
Caption="With HC Start set to 0 and Logi _Settings set to 0, the LastDayOfWeek in Logi is off by one day compared to HC's config 
With Logi Globalization FirstDayOfWeek="1", 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=""Wk Ending "MM/dd/yyyy"
/>
</ChartXAxis>
</ChartCanvas>
<Label
Caption="With HC Start set to 6 and Logi _Settings set to 0, the LastDayOfWeek in Logi is aligned with HC as Saturday 
With Logi Globalization FirstDayOfWeek="1", 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, 
The HC StartOfWeek must be set to "0" AND the Logi Settings > Globalization > FirstDayOfWeek must be set to "1" 
Note that the endOfWeek value in the Raw Data will adjust based on Logi's Globalization setting"
Class="ThemeTextLarger"
Format="HTML"
/>
</Column>
</Row>
</Rows>
<IncludeScript
ID="jsStartOfWeekChart1"
IncludedScript="var ChartContainer = Y.one('#Chart1');
ChartContainer.on('afterCreateChart', function(e) {
e.chart.xAxis[0].update({
startOfWeek: 0
});
});
"
/>
<IncludeScript
ID="jsStartOfWeekChart2"
IncludedScript="var ChartContainer = Y.one('#Chart2');
ChartContainer.on('afterCreateChart', function(e) {
e.chart.xAxis[0].update({
startOfWeek: 6
});
});
"
/>
</Body>
</Report>
1
VISUI

Logi Info Ninja

April 27, 2022 13:53
Glad the information helped with a solution. Thanks for providing your final code.
1
VISUI

Logi Info Ninja

April 26, 2022 20:56
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

June 06, 2022 17:38
JS rocks!!
0

Please sign in to leave a comment.

Comments

Didn't find what you were looking for?