how to get german letters and fortatting into highcharts?

[Astrid]

Hello!

I am using weewx 3.9.2 and highcharts.
It is working very well. :)

How can I get german letters into week.json.tmpl?

Instead of

"windplot": {"series":
{"windSpeed": {"name": "Windstaerke", "data": $windSpeedWeekjson},
"windGust": {"name": "Boeen", "data": $windGustWeekjson}},
"units": "$unit.label.windSpeed"#slurp

I want to get

"windplot": {"series":
{"windSpeed": {"name": "Windstärke", "data": $windSpeedWeekjson},
"windGust": {"name": "Böen", "data": $windGustWeekjson}},
"units": "$unit.label.windSpeed"#slurp

if I write it as above into week.json.tmpl, then week.json will
not be created.

And how can I change in highchartplot the text from "hamburger"-menu,
where now is standing "Chart context menu"?

Some parts I already get changed by putting into plots.js:

var highchartsOptions = Highcharts.setOptions({
      lang: {
            loading: 'Lade...',
            months: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            weekdays: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
            shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            exportButtonTitle: "Exportieren",
            printButtonTitle: "Drucken",
            rangeSelectorFrom: "von",
            rangeSelectorTo: "bis",
            rangeSelectorZoom: "Zeitraum",
            downloadPNG: 'Download als png',
            downloadJPEG: 'Downlaod als jpeg',
            downloadPDF: 'Download als pdf',
            downloadSVG: 'Download als svg',
            resetZoom: "Reset",
            resetZoomTitle: "Reset",
            thousandsSep: ",",
            decimalPoint: '.'
            }
      }
);

But there is left in "Chart Context Menu" (this itself):
"View in fullscreen" and "Print chart"

and in the charts, where on the right top corner can be input
the date "from" and the date "to", that in can be done in
german notation dd.mm.yyyy?

Regards, Astrid

[gjr80]

Some answers below.

Gary

On Saturday, 4 April 2020 00:58:44 UTC+10, Astrid wrote:

Hello!

I am using weewx 3.9.2 and highcharts.
It is working very well. :)

How can I get german letters into week.json.tmpl?

Instead of

"windplot": {"series":
{"windSpeed": {"name": "Windstaerke", "data": $windSpeedWeekjson},
"windGust": {"name": "Boeen", "data": $windGustWeekjson}},
"units": "$unit.label.windSpeed"#slurp

I want to get

"windplot": {"series":
{"windSpeed": {"name": "Windstärke", "data": $windSpeedWeekjson},
"windGust": {"name": "Böen", "data": $windGustWeekjson}},
"units": "$unit.label.windSpeed"#slurp

if I write it as above into week.json.tmpl, then week.json will
not be created.

The templates were never developed with language support in mind; however, it should be easy enough to add. In the templates skins/Highcharts/json/week.json.tmpl and skins/Highcharts/json/year.json.tmpl insert the highlighted line near the top of the files as indicated:

##errorCatcher Echo
#encoding UTF-8
##

Save the files and on the next report cycle your German characters should render fine. I don't have time to do an extensive checking of that extension just now so I cannot guarantee this will not cause some other issue elsewhere, let me know if it does.

 

And how can I change in highchartplot the text from "hamburger"-menu,
where now is standing "Chart context menu"?

The highcharts extension makes no changes to the chart hamburger menu, so anything you want to chnage you will need to refer to the Highcharts API.

Some parts I already get changed by putting into plots.js:

var highchartsOptions = Highcharts.setOptions({
      lang: {
            loading: 'Lade...',
            months: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            weekdays: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
            shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            exportButtonTitle: "Exportieren",
            printButtonTitle: "Drucken",
            rangeSelectorFrom: "von",
            rangeSelectorTo: "bis",
            rangeSelectorZoom: "Zeitraum",
            downloadPNG: 'Download als png',
            downloadJPEG: 'Downlaod als jpeg',
            downloadPDF: 'Download als pdf',
            downloadSVG: 'Download als svg',
            resetZoom: "Reset",
            resetZoomTitle: "Reset",
            thousandsSep: ",",
            decimalPoint: '.'
            }
      }
);

OK, so those changes will change the language displayed for each item.

 

But there is left in "Chart Context Menu" (this itself):
"View in fullscreen" and "Print chart"

You want to change 'View in fullscreen' and 'Print chart' to German? If so you shoudl use the viewFullscreen and exitFullscreen options in your lang setting above.

 

and in the charts, where on the right top corner can be input
the date "from" and the date "to", that in can be done in
german notation dd.mm.yyyy?

Do you want to chnage the format of the dates in the From and To boxes? If so you need to change the inputDateFormat and inputEditDateFormat options in the theme.js file included with the highcharts extension. inputDateFormat sets the format displayed in each box and inputEditDateFormat sets the format displayed when editing each box.

 

Regards, Astrid

[Astrid]

Hello!

Thanx a lot. :)

>#encoding UTF-8
works. :)



>refer to the Highcharts API.

I try to do this, but getting very confused from it... :(

viewFullscreen: "Vollbildmodus",
exitFullscreen: "Vollbildmodus verlassen",
works :)

now is only left fro translation
"Chart context menu"
Possible too?

>of the dates in the From and To boxes?

Yes.

This is inside:
"rangeSelector": {
     "inputDateFormat": "%e %b %Y",
     "inputEditDateFormat": "%e %b %Y"
}

In the box ist standing:
2020-04-03

But I want there
03.04.2020

Is it possible, to set somewhere somethink like setlocale?

For weewx it did this in extensions.py with:
locale.setlocale(locale.LC_ALL, 'de_DE.UTF-8')

Somewhere possible for highcharts too?

Regards, Astrid

[gjr80]

You set the format for inputDateFormat and inputEditDateFormat using % format codes. You find the highcharts supported format codes listed under dateFormats at this link: https://api.highcharts.com/class-reference/Highcharts.Time.html

Gary

[Astrid]

Hello!

Thanx. I put into plots.js:
time: {
        timezone: 'Europe/Berlin'
      },
and into theme.js
"rangeSelector": {
     "inputDateFormat": "%d.%m.%Y",       // "%e %b %Y",
     "inputEditDateFormat": "%d.%m.%Y"    // "%e %b %Y",
  }
but still the same as before.

Regards, Astrid

[gjr80]

Did you modify theme.js on your web server?

Gary

[Astrid]

Hello!

Yes, I modified theme.js on webserver.
plot.js is copied from /var/www/htdocs/weewx
automatically to webserver, but theme.js is
not automatically copied.

Regards, Astrid

[gjr80]

Correct, plot.js is copied from WeeWX machine to web server but only on a WeeWX restart, it is not copied every report cycle. So if you make changes to plot.js you need to make the changes on your WeeWX machine and then restart WeeWX. If you change plot.js on your webserver your changes will be overwritten on the next WeeWX restart. On the other hand theme.js must be installed manually on your web server and any changes to theme.js must be made on your web server (or off your web server and then manually uploaded). A WeeWX restart will not overwrite changes to theme.js.

Most likely your problem is that your plot page, for example, graphs.html, cannot find theme.js hence the settings in theme.js are not being applied. Is your highcharts plot page publicly accessible, if so could we have the address please? If it is not publicly accessible can you look at the source of graphs.html on your web server, you should find a line something like the following:

<script src="../scripts/js/theme.js" type="text/javascript"></script>

Please provide a copy of that line exactly as it appears in the file.

Secondly, on your webserver exactly what directory is your grahps.html file in. Please provide as much of the path as you can. Finally, again on your web server what directory is your theme.js file in. Please provide as much of the path as you can

Gary

[Astrid]

Hello!

Thanx.
graphs.html is finding plots.js and it is finding theme.js.
All changes I did to plots.js and theme.js are working very well.

I now put the rangeselector to plots.js too and it is working very well now.

Thanx. :)

var highchartsOptions = Highcharts.setOptions({
      time: {
        timezone: 'Europe/Berlin'
      },

      rangeSelector: {
          inputDateFormat: '%d.%m.%Y',       // "%e %b %Y",
          inputEditDateFormat: '%d.%m.%Y'    // "%e %b %Y",

      },     
      lang: {

For the Contextmenutitle I use now:

contextButtonTitle: "Optionen",

Is there a possibility in configuration to get rid
of the Fullscreen-option in contextmenu?

Regards, Astrid

[gjr80]

You can try adding the following:

    exporting: {
        buttons: {
            contextButton: {
                menuItems: ["printChart", "separator", "downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
            }
        }
    }

The Highcharts API refernce is here.

Gary

[Astrid]

Hello!

Works. :)
Thanx. :)

Regards, Astrid