Set startOfWeek to Sunday in chart (HighCharts config)
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
-
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, <br \>the LastDayOfWeek in Logi is off by one day compared to HC's config<br \><br \>
With Logi Globalization FirstDayOfWeek="1", <br \>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, <br \>the LastDayOfWeek in Logi is aligned with HC as Saturday<br \><br \>
With Logi Globalization FirstDayOfWeek="1", <br \>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, <br />
The HC StartOfWeek must be set to "0" AND the Logi Settings > Globalization > <br />FirstDayOfWeek must be set to "1"<br \><br \>
Note that the endOfWeek value in the Raw Data will adjust <br \>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 -
Glad the information helped with a solution. Thanks for providing your final code.
1 -
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
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 -
JS rocks!!
0
Please sign in to leave a comment.
Comments
4 comments