Google Charts - Show day of the week in local language - charts

How do I make a Google Chart axis to use day of the week names in different languages (e.g. in German).
For tooltip I use
var formatter = new google.visualization.DateFormat({ pattern: 'EEEE, dd.MM.YYYY' });
Here it produces Tuesday, 31.03.2020, and I would like to see Dienstag, 31.03.2020
For axis I use option
hAxis: { format: "EE, dd/MM" }
This produces Tu, 31/03, and I would like to see Di, 31/03
What is the way to do it please?


try setting the language option when loading google charts...
google.charts.load('current', {
packages: ['corechart'],
language: 'de'
});

Related

Hide data series from tooltip

How can I exclude a specific data series from showing in the tooltip with tooltip.trigger = axis?
I'm asking because I have a very complex graph with one line chart, two bar charts and one heatmap. And the heatmap has so many data that the tooltip ends up with too many lines. The heatmap values are not very important, so I would like to remove them from showing in the tooltip.
Right now I'm using formatter to exclude them, but is there any other way?

I do exactly the same: adding a new attribute to the series and checking it from formatter.
Something like this:
series: [{
// ...
showInTooltip: true
// ...
}]
// ----
formatter: series => {
var displayed = series.filter(item => item.showInTooltip);
// work with displayed where showInTooltip === true
}
Also you can store callback instead attribute and it will work.
Updated: Suddenly I found undocumented feature and it will solved you trouble by the right way, apparently.
series: [{
// ...
tooltip: {
show: false
}
// ...
}]

In echarts.js, line chart, how to make xAxis show months when I only have the data of every date?

In line charts, I want to show month names on xAxis and every month shows its data by date.
I've tried multi xAxis and it's not working well, or maybe use formatter?

Did you try the axisLable formatter? You can call a function there to do the formatting.
xAxis: {
axisLabel: {
formatter: (function(value){
return moment(value).format('MMM-YY');
})
}
}
Hope this will help.

Bootstrap Datepicker set Minimum Range

We are using Bootstrap Datepicker (https://github.com/uxsolutions/bootstrap-datepicker) to set a checkin and checkout date.
We need to be able to set a 'minimum range' on the date picker for properties that have a minimum night stay.
Missing Requirements:
Do not allow # of nights to be less than property nightly minimum.
Do not allow checkout date to be before checkin date.
So, if a visitor selects the checkin date of 12/01/2017, and the property has a minimum night stay of 3 nights, the visitor should not be allowed to select 12/02/2017, 12/03/2017. The next available night for them to checkout on should be 12/04/2017.
I'm not seeing that this is a simple option with this date picker. I do see that it has been added as a feature request by quite a few though.
https://github.com/uxsolutions/bootstrap-datepicker/issues/970
I've built the start of what might be able to work by using the disabledDates and setDatesDisabled dates. Yet, I can't seem to figure out why these disabledDates are not working or firing when selecting a new start date. I think that I should be able to combine the newly set disabled dates with those already posted.
$(function($) {
var today = new Date();
$('.input-daterange').datepicker({
daysOfWeekHighlighted: "0,6",
autoclose: true,
todayHighlight: true,
startDate: today,
datesDisabled: ['10/1/2017','10/2/2017','10/3/2017','10/4/2017','10/5/2017','10/6/2017','10/7/2017','10/8/2017','10/9/2017','10/10/2017','10/11/2017','10/12/2017','10/13/2017','10/14/2017','10/15/2017','10/16/2017','10/17/2017','10/18/2017','10/19/2017','10/20/2017','10/21/2017','10/22/2017','10/23/2017','10/24/2017','10/25/2017','10/26/2017','10/27/2017','10/28/2017','10/29/2017','10/30/2017','10/31/2017'],
});
});
// Set end date to minimum nights.
$('#start').on('change', function() {
// Set minNights.
minNights = 3;
start = $('#start').datepicker('getDate');
end = moment(start).add(minNights, 'day').toDate();
$('#end').datepicker('update', end);
$('.input-daterange').datepicker('setDatesDisabled', [ $('.input-daterange').datepicker('setDatesDisabled', ['12/02/2017', '12/03/2017']);]);
});
Is there another date picker that has this built in already? Or, is there a simple and clean way to add the missing requirements above to the bootstrap datepicker?
Simple JSFiddle
https://jsfiddle.net/riverecho/omd5uw21/

Give this a try
$(function () {
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true,
changeMonth: true,
changeYear: true,
yearRange: '1999:2012',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
minDate: new Date(1999, 10 - 1, 25),
maxDate: '+30Y',
inline: true
});
});

Get selection Number from GWT Highcharts

I have areacharts with 2 series. Each of both has the same data, but different values. When I select one of the point, I want to know index of point. For example. when I select first point, I want take "1" and so on. Like here.
For instance they used
formatter: function() {
return 'point ' + this.point.myIndex;
}
but it is for javascript
formatter: function() {
return 'point ' + this.point.myIndex;
}
Does anybody know how to do it from gwt wrapper Moxie Apps GWT Highcharts?

Highstock chart offsets dates for no reason

I'm having trouble with highstock.js
For no apparent reason it seems to offset the dates halfway though when it has generated the chart.
It occurs because the date 25 march is showed twice in the chart with a value 0 for it's second entry on the x-axis. There is no data to support this second erroneously date entry.
I've made a jsfiddle here:
http://jsfiddle.net/DZGz7/
chart = new Highcharts.StockChart({
chart: {
renderTo: 'containerchart',
alignTicks: false
},
rangeSelector: {
selected: 0
},
title: {
text: 'New Members'
},
yAxis: {
allowDecimals: false
},
xAxis: {
minTickInterval: 24 * 3600 * 1000
},
plotOptions:{
line:{
dataGrouping:{enabled:false}
}
},
series: [{
type: 'column',
name: 'New Members',
data: ([
[1322611200000,3],[1322697600000,40],[1322784000000,21],[1322870400000,14],[1322956800000,5], [1323043200000,6],[1323129600000,11],[1323216000000,14],[1323302400000,16],[1323388800000,11],[1323475200000,9],[1323561600000,8],[1323648000000,8],[1323734400000,3],[1323820800000,5],[1323907200000,5],[1323993600000,4],[1324080000000,4],[1324166400000,5],[1324252800000,3],[1324339200000,5],[1324425600000,4],[1324512000000,5],[1324598400000,0],[1324684800000,1],[1324771200000,1],[1324857600000,2],[1324944000000,9],[1325030400000,4],[1325116800000,5],[1325203200000,9],[1325289600000,0],[1325376000000,6],[1325462400000,4],[1325548800000,3],[1325635200000,4],[1325721600000,6],[1325808000000,8],[1325894400000,4],[1325980800000,4],[1326067200000,6],[1326153600000,6],[1326240000000,2],[1326326400000,6],[1326412800000,5],[1326499200000,3],[1326585600000,3],[1326672000000,5],[1326758400000,5],[1326844800000,1],[1326931200000,9],[1327017600000,11],[1327104000000,6],[1327190400000,0],[1327276800000,2],[1327363200000,4],[1327449600000,4],[1327536000000,5],[1327622400000,3],[1327708800000,5],[1327795200000,8],[1327881600000,3],[1327968000000,6],[1328054400000,3],[1328140800000,2],[1328227200000,2],[1328313600000,3],[1328400000000,4],[1328486400000,0],[1328572800000,2],[1328659200000,3],[1328745600000,8],[1328832000000,2],[1328918400000,5],[1329004800000,2],[1329091200000,2],[1329177600000,10],[1329264000000,5],[1329350400000,2],[1329436800000,3],[1329523200000,4],[1329609600000,0],[1329696000000,2],[1329782400000,13],[1329868800000,5],[1329955200000,6],[1330041600000,6],[1330128000000,4],[1330214400000,5],[1330300800000,3],[1330387200000,5],[1330473600000,3],[1330560000000,2],[1330646400000,5],[1330732800000,2],[1330819200000,8],[1330905600000,1],[1330992000000,3],[1331078400000,3],[1331164800000,3],[1331251200000,8],[1331337600000,5],[1331424000000,3],[1331510400000,2],[1331596800000,2],[1331683200000,3],[1331769600000,1],[1331856000000,6],[1331942400000,1],[1332028800000,3],[1332115200000,2],[1332201600000,3],[1332288000000,6],[1332374400000,2],[1332460800000,4],[1332547200000,2],[1332633600000,7],[1332716400000,0],[1332802800000,5],[1332889200000,1],[1332975600000,4],[1333062000000,4],[1333148400000,1],[1333234800000,8],[1333321200000,1],[1333407600000,4],[1333494000000,3],[1333580400000,3],[1333666800000,4],[1333753200000,1]
])
}]
});
(zoom in around march 25 and see the data offset begins)
The dates correspond to the right data up until March 25 2012 after that it is shifted 1 day. You will be able to see the offset happening, by comparing the tooltip data to the x-axis label.
Obviously this seems like a problem in the data loaded into the graph, But I've checked it over and the next date it should display is March 26. The data seems just fine.
Any ideas what I am doing wrong here?

From http://api.Highcharts.com/highcharts#global.useUTC:
useUTC: Boolean
Whether to use UTC time for axis scaling, tickmark
placement and time display in Highcharts.dateFormat.
Advantages of
using UTC is that the time displays equally regardless of the user
agent's time zone settings. Local time can be used when the data is
loaded in real time or when correct Daylight Saving Time transitions
are required. Defaults to true.
Therefore, if you want your chart to show in the Browser's local time, you need to take action as follows in your javascript:
Highcharts.setOptions({
global: {
useUTC: false
}
});
Presumably, this should be set before you create your chart.

UTC had to be turned off, then it works.
global:{
useUTC: false
}