GithubHelp home page GithubHelp logo

Comments (11)

poblabs avatar poblabs commented on August 16, 2024 1

If you want to change the thickness of the dots, find the big block that begins with var optionsWind= {, then inside that block you'll see plotOptions.... replace that whole thing with this:

        plotOptions: {
            line: {
                lineWidth: 2,
                marker: {
                    enabled: false
                }
            },
            series: {
                marker: { radius: 2 },
            }
        },

Then update the radius to something you'd like. The radius of 2 matches the wind direction plot.

All of this would have to be in a weewx options format for public consumption but if you wanted to tinker on it now, give it a try.

Still unsure how to change the hover text with a shared plot. Initial tests didn't work.

from weewx-belchertown.

poblabs avatar poblabs commented on August 16, 2024

Yep, still planning on working on it. I've had a few changes lately which caused me to take a step back from my hobbies. Hoping to get back on it soon and will take a look at this!

from weewx-belchertown.

poblabs avatar poblabs commented on August 16, 2024

I took a 5 minute stab at this.... If this is what you're looking for, it's an easy manual change - but notice the hover text shows a grid coordinate and not the speed. Might take more time to figure out how to override that text. 🤔

To play around with it, in user/skins/belchertown/js edit the highcharts-dayplots.js.tmpl and the week, month, year files too. At the bottom you'll see:

optionsWind.series[1] = seriesData[0].windplot.series.windGust;

Right below that line add:

optionsWind.series[1].type = 'scatter';

Then restart weewx and you should get dots on the next archive interval.

image

from weewx-belchertown.

41south avatar 41south commented on August 16, 2024

Great news on both fronts - thanks Pat 👍

I'll have a play and see how it looks.

from weewx-belchertown.

41south avatar 41south commented on August 16, 2024

Nice, thanks again for the help.

from weewx-belchertown.

41south avatar 41south commented on August 16, 2024

This works great, I think it cleans up the graph a lot. As you say just the hover txt to sort.

from weewx-belchertown.

41south avatar 41south commented on August 16, 2024

Happy to close this, no longer required on my part 👍 The clutter I had was actually caused by the data - which is now sorted

from weewx-belchertown.

poblabs avatar poblabs commented on August 16, 2024

Just an update that in skin 1.0 I've re-written the entire charting system, and today I was able to get the 2 observations types to co-exist on a chart.

The popup information "tooltip" doesn't show the wind direction until you explicitly hover over it, but I think it looks great! There's even 2 yAxis for the different observation units.

image

from weewx-belchertown.

41south avatar 41south commented on August 16, 2024

from weewx-belchertown.

poblabs avatar poblabs commented on August 16, 2024

I think I mixed your request with another one. The screenshot above shows wind speed and wind gust as line charts and the dots show wind direction. So 3 observations one 1 chart.

Your specific request - as I understand it - is to have wind speed as line, and wind gust as dots. You can achieve that as well with the below config when skin version 1.0 is released.

        [[[windchart]]]
            title = Wind Speed / Gust
            [[[[windGust]]]]
                type = scatter
            [[[[windSpeed]]]]
                zIndex = 1

image

from weewx-belchertown.

poblabs avatar poblabs commented on August 16, 2024

And here's what it would look like if you chose "area" as the type of chart for windSpeed.

        [[[windchart]]]
            title = Wind Speed / Gust
            [[[[windGust]]]]
                type = scatter
            [[[[windSpeed]]]]
                type = area
                zIndex = 1

image

from weewx-belchertown.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.