Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Radial Chart Issues (weatherRange columnrange) #195

Closed
HoracioDos opened this issue Aug 26, 2019 · 43 comments
Closed

Radial Chart Issues (weatherRange columnrange) #195

HoracioDos opened this issue Aug 26, 2019 · 43 comments

Comments

@HoracioDos
Copy link

Hello Pat
Thanks for this new radial chart. Is there a way to set the tickInterval. I tried both (x and y) and it didn't worked.

    [[chart2]]
        title = Radial 2019
        time_length = year
        css_class = "weatherRadial"
        [[[weatherRadial]]]
            xAxis_tickInterval = 0.1

Radial2019
@poblabs
Copy link
Owner

poblabs commented Aug 26, 2019 via email

@HoracioDos
Copy link
Author

Hello Pat.
mmm You made me doubt about this. I rephrase my question. How can I set less decimal values in this chart? For example. I would like to show low temp = 13,8 and not 13,89999999
Thanks!

@poblabs
Copy link
Owner

poblabs commented Aug 26, 2019 via email

poblabs added a commit that referenced this issue Aug 26, 2019
@poblabs
Update tooltip for weatherRadial chart
07272c2 
Updates #195

Updates #104 for a new translation key
@poblabs
Copy link
Owner

poblabs commented Aug 26, 2019 •
edited

Give the latest commit a try. I also added a new translation key in skin.conf. Here is my config and my output now

[weatherRadialGraphGroup]
    title = Temperature Range Radial
    show_button = true
    button_text = Weather Radial
    time_length = year

    [[radialChartName]]
        title = This Year
        css_class = "weatherRadial"
        tooltip_date_format = "LL"
        [[[weatherRadial]]]

image

poblabs added a commit that referenced this issue Aug 26, 2019
@poblabs
Update weatherRadial tooltip behavior
d234d00 
Updates #195
@poblabs
Copy link
Owner

poblabs commented Aug 26, 2019

I just pushed another commit with more tooltip behavior. Give the latest one a try. I think it is good now.

@HoracioDos
Copy link
Author

HoracioDos commented Aug 27, 2019 •
edited

Hello Pat.
It works now! Thanks! But there is an encoding problem for Low & High Labels.
Another minor detail: Is it possible to force a category name for incomplete month values? For example: May temperatures are not complete, so It would be nice to have also a category name for it. Perhaps it's easier to exclude them somehow?
Thanks again!
Radial2019

@poblabs
Copy link
Owner

poblabs commented Aug 27, 2019 via email

@HoracioDos
Copy link
Author

Hello Pat.
May starts on 11th.
These are the labels in weewx.conf

feels_like = Sensación
highest_temperature = Máxima
lowest_temperature = Mínima
average_temperature = Media
forecast_header = Pronóstico a 8 días

@poblabs
Copy link
Owner

poblabs commented Aug 27, 2019

I'll try it out.

Do you think weatherRadial makes sense? It is only showing temperature. Should it be renamed to something like outTempRadial?

poblabs added a commit that referenced this issue Aug 27, 2019
@poblabs
Update weatherRadial tooltip for HTML chars
31576d6 
Updates #195
@poblabs
Copy link
Owner

poblabs commented Aug 27, 2019

Try out the latest commit. It works for me now after fixing it.

image

@HoracioDos
Copy link
Author

HoracioDos commented Aug 27, 2019 •
edited

Hello Pat
Latest commit worked fine. There is something strange about the tooltip colors in dark mode. In your site it's a beautiful white but in mine it's a dark grey.

If the radial chart only purpose is to show temperature and nothing else I guess it would be ok to rename it to outTempRadial. If you think it can evolve into something else like energy or power I would name it as radial only.

Radial2019

@poblabs
Copy link
Owner

poblabs commented Aug 27, 2019 via email •
edited

@HoracioDos
Copy link
Author

Hello Pat.
This is very weird. I can see that .highcharts-weatherRadial class is included at the end of belchertown-dark.min.css and css_class = "weatherRadial" also matches in graphs.conf but it still doesn't work.

/* Belchertown Dark Skin Overrides */
body.dark{color:#fff;background-color:#222}.dark ::-moz-selection{background-color:#fff!important;color:#000!important}.dark ::selection{background-color:#fff!important;color:#000!important}.dark .genesis-nav-menu a{color:#fff}.dark .responsive-menu-icon::before{color:#fff}.dark .compass,.dark .moon-container{color:#fff!important}.dark .records table{border:1px solid #aaa}.dark pre{color:#aaa;background-color:#222;white-space:pre}.dark .highcharts-windRose .highcharts-xaxis-grid .highcharts-grid-line, .dark .highcharts-weatherRadial .highcharts-xaxis-grid .highcharts-grid-line {stroke-width: 1;}.dark .genesis-nav-menu a:hover, .dark .genesis-nav-menu .current-menu-item > a, .dark .genesis-nav-menu .sub-menu .current-menu-item > a:hover {color: #e5554e;}

@poblabs
Copy link
Owner

poblabs commented Aug 28, 2019 via email

@HoracioDos
Copy link
Author

https://climacolegiales.com.ar/

poblabs added a commit that referenced this issue Aug 28, 2019
@poblabs
Adjust dark mode tooltip color when using useHTML
da0d60e 
Updates #195
@poblabs
Copy link
Owner

poblabs commented Aug 28, 2019

This was a tricky one because when I changed the tooltip to fix the language characters, it broke the color. The reason my site was working was because I didn't update my site.

Download the latest 2 commits I just pushed. 1 for the belchertown-dark.min.css and one for belchertown.js.tmpl.

Let me know how it looks

@HoracioDos
Copy link
Author

It looks perfect now!! Thanks again!
Radial2019

@poblabs
Copy link
Owner

poblabs commented Aug 29, 2019 •
edited

Good news! Also @HoracioDos the labels are being tricky for me. It has to do with the 30 day tick interval on the xAxis. No matter what if I set it lower or higher it doesn't work.

Look at my example test charts below. Maybe the first group is better? The first group lets Highcharts own the labels and not Belchertown...

No xAxis tickinterval and no xAxis label. Highcharts owns the labels.

Maybe this is the best option? The date formatting looks a little off though.

image

image

No xAxis tickInterval, but with xAxis label of %b

This looks bad

image

@poblabs
Copy link
Owner

poblabs commented Aug 29, 2019

Hmm, maybe we need the xAxis tickInterval. Because here's that chart, larger, and it gets ugly without it.

So I think this may mean if you have less than 30 days of info on the chart, you will not have that month label.

The data will be there but not the label.

image

@poblabs poblabs changed the title Radial Chart Tick interval Radial Chart Issues Aug 29, 2019
@poblabs poblabs reopened this Aug 29, 2019
@poblabs
Copy link
Owner

poblabs commented Aug 29, 2019 •
edited

I'm expanding this request to add a few more options

  • Rename this chart type to "weatherRange" or something, since it's purpose is to show an observation's daily range
  • New option for polar = true to allow certain charts to be a circle (like windrun or the weather radial). This will turn a rangeChart into a circle, giving us the weatherRadial
  • Allow different observation types to be charted into the weather radial
  • Add observation name to the chart yAxis title
  • Add observation unit to the chart yAxis title
  • Test color overrides if a non temperature observation type

I could use your help test. I will try to commit something later today.

Some samples:

Weather Radial with polar = false

image

Weather Radial with windSpeed and polar = true

image

@HoracioDos
Copy link
Author

Hello Pat.
I had a feeling that this issue wasn't going to rest quietly when I opened it. LOL! I feel like a prophet! Just a joke!
I'm perfectly OK with xAxis tick Interval and no month name for an incomplete period.
New features are realy cool!!

poblabs added a commit that referenced this issue Aug 30, 2019
@poblabs
Updates to the weatherRadial JavaScript
93bf381 
Adds title, color, units, min based on series data, polar control, dark mode stroke css class if polar

Updates #195
@poblabs
Copy link
Owner

poblabs commented Aug 30, 2019 •
edited

Just pushed some updates. More to go, but I think what I have so far is working and allows some flexibility.

The new [[[weatherRadial]]] options are:

  • polar: Defaults to false if not defined. True creates the circle chart.
  • radial_type: Required. This is the archive observation to chart.

Note: I think I will rename [[[weatherRadial]]] to weatherRange tomorrow, since these charts are really range charts.

Some chart examples and output:

Column range chart with outTemp and temperature custom coloring. No polar defined (missing)

[weatherRadialGraphGroup]
    title = Temperature Range Radial
    show_button = true
    button_text = Weather Radial
    time_length = year

    [[radialChartName]]
        title = This Year
        css_class = "weatherRadial"
        tooltip_date_format = "LL"
        [[[weatherRadial]]]
            radial_type = outTemp

image

Column range polar chart (circle) with outTemp and temperature custom coloring

[weatherRadialGraphGroup]
    title = Temperature Range Radial
    show_button = true
    button_text = Weather Radial
    time_length = year

    [[radialChartName]]
        title = This Year
        css_class = "weatherRadial"
        tooltip_date_format = "LL"
        [[[weatherRadial]]]
            polar = true
            radial_type = outTemp

image

Column range polar chart with color red defined, and windSpeed graphed

[weatherRadialGraphGroup]
    title = Temperature Range Radial
    show_button = true
    button_text = Weather Radial
    time_length = year

    [[radialChartName]]
        title = This Year
        css_class = "weatherRadial"
        tooltip_date_format = "LL"
        [[[weatherRadial]]]
            polar = true
            radial_type = windSpeed
            color = red

image

Column range chart with outHumidity graphed and no polar (false), and no color (removed) which uses the default colors from graphs.conf

[weatherRadialGraphGroup]
    title = Temperature Range Radial
    show_button = true
    button_text = Weather Radial
    time_length = year

    [[radialChartName]]
        title = This Year
        css_class = "weatherRadial"
        tooltip_date_format = "LL"
        [[[weatherRadial]]]
            polar = false
            radial_type = outHumidity

image

@HoracioDos
Copy link
Author

I'll try them asap. I think that people with solar panels will love this charts. It seems to be ideal to show charging efficiency.

@Stormtracker017
Copy link

Looks nice Pat....Are the color ranges hard coded into code or can it be option in the graph.conf file?

@poblabs
Copy link
Owner

poblabs commented Aug 30, 2019 •
edited

@Stormtracker017 They are hardcoded and match the temperature colors represented on the front page.

Edit: to clarify, any temperature observations are hard-coded. You can override them, or any other observation, with the color option

@poblabs
Copy link
Owner

poblabs commented Aug 30, 2019

Here's outside temperature with a color override to orange.

[weatherRadialGraphGroup]
    title = Temperature Range Radial
    show_button = true
    button_text = Weather Radial
    time_length = year

    [[radialChartName]]
        title = This Year
        css_class = "weatherRadial1"
        tooltip_date_format = "LL"
        [[[weatherRadial]]]
            polar = true
            radial_type = outTemp
            color = orange

image

@Stormtracker017
Copy link

Is there a way right now to do Zones in the code?

@poblabs
Copy link
Owner

poblabs commented Aug 30, 2019 via email

@Stormtracker017
Copy link

If a point "value" falls within a zone, you can change the color that the value represent. You can have multiple zones within a plot.

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-simple/

@poblabs
Copy link
Owner

poblabs commented Sep 1, 2019 •
edited

@Stormtracker017 No, zones aren;t implemented (doing these columnranges was challenging enough).

Edit: are not implemented

@poblabs
Copy link
Owner

poblabs commented Sep 1, 2019

Another big update to test! You have to download the entire development package again since I have updated a lot in a lot of files!

But with the charts, there's a big update in b101183 which allows you to control the chart height and width. Just place the height, or width of the chart right in the chart options.

If height and width are not defined then the charts will be their same default sizes

For example:

[day]
    title = Today since Midnight
    show_button = true
    button_text = Today
    time_length = today
    gapsize = 300000

    [[chart1]]
        width = "100%"
        height = "600px"
        title = Temperature
        [[[outTemp]]]
            name = Temperature

And here's the output of my own front page with some mixed size graphs.

image

@Stormtracker017
Copy link

With this update we can do columnrange graphs?

@poblabs
Copy link
Owner

poblabs commented Sep 1, 2019

@Stormtracker017 Yeah, it's a special chart type for Belchertown because each columnrange requires some specific x, y coordinates and the min/max. So it's not as easy as doing type = columnrange. So instead it's a separate observation type (sort of like rainTotal).

I've tried multiple observations per columnrange chart and it looked cluttered, so for now I'm doing 1 observation per chart for columnrange.

If you're charting outTemp, then it gets colored based on the temperature color scale within the skin. Otherwise the colors are default and/or from the color option.

Note: I'm still tweaking it. The current name for the observation is weatherRadial. I need to change that to weatherRange in the very near future (possibly this afternoon).

You can see this on the front page of https://belchertownweather.com too.

Here's an example config:

[year]
    # Chart Timespan Defaults
    title = This Year
    show_button = true
    button_text = Year
    tooltip_date_format = "dddd LL"
    type = spline
    time_length = year
    aggregate_type = max
    aggregate_interval = 86400 # 1 day
    gapsize = 86400000
    
    [[chartTestName]]
        title = Temperature Range This Year
        tooltip_date_format = "LL"
        [[[weatherRadial]]]
            radial_type = outTemp

image

@poblabs
Copy link
Owner

poblabs commented Sep 1, 2019 •
edited

If you want your columnrange to look a little more interesting, add polar = true to turn it into a radial.

I also added new option of height = "600px" to increase the readability of the radial.

[year]
    # Chart Timespan Defaults
    title = This Year
    show_button = true
    button_text = Year
    tooltip_date_format = "dddd LL"
    type = spline
    time_length = year
    aggregate_type = max
    aggregate_interval = 86400 # 1 day
    gapsize = 86400000
    
    [[chartTestName]]
        title = Temperature Range This Year
        tooltip_date_format = "LL"
        height = "600px"
        [[[weatherRadial]]]
            polar = true
            radial_type = outTemp

image

@poblabs poblabs changed the title Radial Chart Issues Radial Chart Issues (weatherRange columnrange) Sep 1, 2019
poblabs added a commit that referenced this issue Sep 1, 2019
@poblabs
Rename weatherRadial to weatherRange since it's a columnrange type
0c2b4b9 
Updates #195
@poblabs
Copy link
Owner

poblabs commented Sep 1, 2019

Alright, if you update to the latest version, weatherRadial is now called weatherRange, so you'll need to update your graphs.conf file

poblabs added a commit that referenced this issue Sep 1, 2019
@poblabs
More weatherRadial to weatherRange cleanup
6d2fad2 
Updates #195
@HoracioDos
Copy link
Author

Hello Pat
I'm sorry for the delay. I've got a new job and I'm not as much available as I used to be.
I applied the latest commits and I found this error about encoding in about page. It looks very weird.

Sep 14 12:10:51 PiWeewx weewx[5142]: cheetahgenerator: Generate failed with exception '<type 'exceptions.UnicodeDecodeError'>'
Sep 14 12:10:51 PiWeewx weewx[5142]: cheetahgenerator: **** Ignoring template /etc/weewx/skins/Belchertown/about/index.html.tmpl
Sep 14 12:10:51 PiWeewx weewx[5142]: cheetahgenerator: **** Reason: 'ascii' codec can't decode byte 0xc3 in position 1150: ordinal not in range(128)
Sep 14 12:10:51 PiWeewx weewx[5142]: ****  Traceback (most recent call last):
Sep 14 12:10:51 PiWeewx weewx[5142]: ****    File "/usr/share/weewx/weewx/cheetahgenerator.py", line 332, in generate
Sep 14 12:10:51 PiWeewx weewx[5142]: ****      fd.write(str(compiled_template))
Sep 14 12:10:51 PiWeewx weewx[5142]: ****    File "/usr/lib/python2.7/dist-packages/Cheetah/Template.py", line 1045, in __str__
Sep 14 12:10:51 PiWeewx weewx[5142]: ****      rc = getattr(self, mainMethName)()
Sep 14 12:10:51 PiWeewx weewx[5142]: ****    File "_etc_weewx_skins_Belchertown_about_index_html_tmpl.py", line 104, in respond
Sep 14 12:10:51 PiWeewx weewx[5142]: ****    File "/usr/lib/python2.7/dist-packages/Cheetah/Template.py", line 1685, in _handleCheetahInclude
Sep 14 12:10:51 PiWeewx weewx[5142]: ****      file=file)
Sep 14 12:10:51 PiWeewx weewx[5142]: ****    File "/usr/lib/python2.7/dist-packages/Cheetah/Template.py", line 772, in compile
Sep 14 12:10:51 PiWeewx weewx[5142]: ****      settings=(compilerSettings or {}))
Sep 14 12:10:51 PiWeewx weewx[5142]: ****    File "/usr/lib/python2.7/dist-packages/Cheetah/Compiler.py", line 1708, in __init__
Sep 14 12:10:51 PiWeewx weewx[5142]: ****      source = unicode(source)
Sep 14 12:10:51 PiWeewx weewx[5142]: ****  UnicodeDecodeError: 'ascii' codec can't decode byte 0xc3 in position 1150: ordinal not in range(128)

I know you are busy but don't forget to update the wiki about weatherRadial change to weatherRange.

@poblabs
Copy link
Owner

poblabs commented Sep 14, 2019

Hi Horacio. Have you updated all files? Or just a few? I made some updates to make the skin weewx 4 ready, which has encoding in it.

If you did not update all files, please try that and restart weewx when you can. Then let me know.

@HoracioDos
Copy link
Author

I updated only the files which were affected by development commits since August 31. I'll sync everything and I'll let you know about it. I'll look for any hidden control character in about.inc just in case too.

@HoracioDos
Copy link
Author

Hello Pat.
I found the problem. I inserted again these lines in belchertown.py that were removed by this commit.
06017be

reload(sys)
sys.setdefaultencoding("utf-8")

Almost every text is taken from weewx.conf but I still have some hardcoded text in the about page.
Everything is normal now. No alerts!

@poblabs
Copy link
Owner

poblabs commented Sep 14, 2019

@HoracioDos Congrats on the new job btw!

Those 2 lines won't be supported in Python 3 or weewx 4, so they had to be removed. What we should do is try to fix what is wrong without them.

At the top of your about.inc add this line:

#encoding UTF-8

and remove those lines you added. Restart weewx and try again?

@HoracioDos
Copy link
Author

Excellent!! Problem solved.
Thanks!

@poblabs
Copy link
Owner

poblabs commented Sep 14, 2019

Great news! I'll get that added to all the files

@poblabs
Copy link
Owner

poblabs commented Sep 16, 2019

I have updated the wiki to include the weatherRange observation, the polar option, and the width and height options. I am closing this issue as I think everything is resolved now.

@poblabs poblabs closed this as completed Sep 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@poblabs @HoracioDos @Stormtracker017