Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4017) - 17 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

[IMPLMENTED] Range Selector in Charts.

A Forum to archive Cumulus MX development suggestions that have been rejected or solved by other means.
Locked
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

[IMPLMENTED] Range Selector in Charts.

Post by Phil23 »

Hi Mark,

Just wondering if its feasible to change the Range Selector area of the cumuluscharts.js to be a function within the script.

Code: Select all

        rangeSelector: {
            buttons: [{
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 2,
                    type: 'day',
                    text: '2d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 1
        }
I have mine edited to accommodate my particular data range, but the editing requires I change it in 10 different code blocks.

My edited code is this....
which I overwrite the existing with in all places.

Code: Select all

        rangeSelector: {
            buttons: [{
                    count: 6,
                    type: 'hour',
                    text: '6h'
                }, {
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 48,
                    type: 'hour',
                    text: '48h'
                }, {
                    count: 3,
                    type: 'day',
                    text: '3d'
                }, {
                    count: 4,
                    type: 'day',
                    text: '4d'
                }, {
                    count: 5,
                    type: 'day',
                    text: '5d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 3
        }
So I see this...
Capture.JPG
It would also reduce the number on lines in the standard file by a bit, which may be of no significance.

hanks

Phil.
You do not have the required permissions to view the files attached to this post.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
mcrossley
Posts: 12690
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Range Selector in Charts.

Post by mcrossley »

Sounds sensible.
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Range Selector in Charts.

Post by Phil23 »

I'd have a crack at it myself if I understood Java a bit better.

Would placing the original code within a function like this be correct?
& then calling that function in the place of the removed code?

CmxChartRange();

(Correct Syntax would be my challenge).

Code: Select all

function CmxChartRange() {

        rangeSelector: {
            buttons: [{
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 2,
                    type: 'day',
                    text: '2d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 1
        }
		
}
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
mcrossley
Posts: 12690
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Range Selector in Charts.

Post by mcrossley »

No, just need to define the range selector as an object, then in each config set the rangeSelector property equal your object.

Sort of like...

Code: Select all

var mySelector = {
    buttons: [{
    etc..
};

.....

config
    {
    ......
    rangeSelector: mySelector,
    ....
    }

Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Range Selector in Charts.

Post by Phil23 »

Re-visiting this again this morning, but not quite clear on the requirements.
I've done this at the beginning of the file, (not knowing is that's the correct place),

Code: Select all

// Last modified: 2021/02/21 22:50:00

var chart, config;

var mySelector = {
            buttons: [{
                    count: 6,
                    type: 'hour',
                    text: '6h'
                }, {
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 48,
                    type: 'hour',
                    text: '48h'
                }, {
                    count: 3,
                    type: 'day',
                    text: '3d'
                }, {
                    count: 4,
                    type: 'day',
                    text: '4d'
                }, {
                    count: 5,
                    type: 'day',
                    text: '5d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 3
        };


$(document).ready(function () {
    $.ajax({
        url: "availabledata.json",
...
...
Then put rangeselector: mySelector where the range selector used to be.

Code: Select all

        tooltip: {
            shared: true,
            crosshairs: true,
            valueDecimals: config.temp.decimals,
            xDateFormat: "%A, %b %e, %H:%M"
        },
        series: [],
        rangeSelector: mySelector,
    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
        url: 'tempdata.json',
        cache: false,
        dataType: 'json',
        success: function (resp) {
Returns a few errors in Developer mode & no chart is displaying.

The Entire file, cumuluschartstest.js is this (& maybe an older version).
My ranges are still present in the Pressure section & the changes I made to Tem & Pressure are working fine here:-
http://weather.inverellit.com/new/trends.htm

Code: Select all

// Last modified: 2021/02/21 22:50:00

var chart, config;

var mySelector = {
            buttons: [{
                    count: 6,
                    type: 'hour',
                    text: '6h'
                }, {
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 48,
                    type: 'hour',
                    text: '48h'
                }, {
                    count: 3,
                    type: 'day',
                    text: '3d'
                }, {
                    count: 4,
                    type: 'day',
                    text: '4d'
                }, {
                    count: 5,
                    type: 'day',
                    text: '5d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 3
        };


$(document).ready(function () {
    $.ajax({
        url: "availabledata.json",
        dataType: "json",
        success: function (result) {
            if (result.Temperature === undefined || result.Temperature.Count == 0) {
                $('#btnTemp').remove();
            }
            if (result.DailyTemp === undefined || result.DailyTemp.Count == 0) {
                $('#btnDailyTemp').remove();
            }
            if (result.Humidity === undefined || result.Humidity.Count == 0) {
                $('#btnHum').remove();
            }
            if (result.Solar === undefined || result.Solar.Count == 0) {
                $('#btnSolar').remove();
            }
            if (result.Sunshine === undefined || result.Sunshine.Count == 0) {
                $('#btnSunHours').remove();
            }
            if (result.AirQuality === undefined || result.AirQuality.Count == 0) {
                $('#btnAirQuality').remove();
            }
        }
    });

    $.ajax({
        url: "graphconfig.json",
        dataType: "json",
        success: function (result) {
            config = result;
            doTemp();
        }
    });
});


function changeGraph(graph) {
    switch (graph) {
        case 'temp':
            doTemp();
            break;
        case 'dailytemp':
            doDailyTemp();
            break;
        case 'press':
            doPress();
            break;
        case 'wind':
            doWind();
            break;
        case 'windDir':
            doWindDir();
            break;
        case 'rain':
            doRain();
            break;
        case 'dailyrain':
            doDailyRain();
            break;
        case 'humidity':
            doHum();
            break;
        case 'solar':
            doSolar();
            break;
        case 'sunhours':
            doSunHours();
            break;
        case 'airquality':
            doAirQuality();
            break;
        }
}

var doTemp = function () {
    var freezing = config.temp.units === 'C' ? 0 : 32;
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'spline',
            alignTicks: false
        },
        title: {
            text: 'Temperature'
        },
        credits: {
            enabled: true
        },
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{
            // left
            title: {
                text: 'Temperature (°' + config.temp.units + ')'
            },
            opposite: false,
            labels: {
                align: 'right',
                x: -5,
                formatter: function () {
                    return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
                }
            },
            plotLines: [{
                // freezing line
                value: freezing,
                color: 'rgb(0, 0, 180)',
                width: 1,
                zIndex: 2
            }]
        }, {
            // right
            gridLineWidth: 0,
            linkedTo: 0,
            opposite: true,
            labels: {
                align: 'left',
                x: 5,
                formatter: function () {
                    return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
                }
            }
        }],
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                dataGrouping: {
                    enabled: false
                },
                states: {
                    hover: {
                        halo: {
                            size: 5,
                            opacity: 0.25
                        }
                    }
                },
                cursor: 'pointer',
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 0.1
                        }
                    }
                }
            },
            line: {
                lineWidth: 2
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            valueDecimals: config.temp.decimals,
            xDateFormat: "%A, %b %e, %H:%M"
        },
        series: [],
        rangeSelector: mySelector,
    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
        url: 'tempdata.json',
        cache: false,
        dataType: 'json',
        success: function (resp) {
            var titles = {
                'temp'     : 'Temperature',
                'dew'      : 'Dew Point',
                'apptemp'  : 'Apparent',
                'feelslike': 'Feels Like',
                'wchill'   : 'Wind Chill',
                'heatindex': 'Heat Index',
                'humidex'  : 'Humidex',
                'intemp'   : 'Inside'
            };
            var idxs = ['temp', 'dew', 'apptemp', 'feelslike', 'wchill', 'heatindex', 'humidex', 'intemp'];
            var yaxis = 0;

            idxs.forEach(function(idx) {
                var valueSuffix = ' °' + config.temp.units;
                yaxis = 0;

                if (idx in resp) {
                    if (idx === 'humidex') {
                        valueSuffix = null;
                        if (config.temp.units == 'F') {
                            chart.yAxis[1].remove();
                            chart.addAxis({
                                id: 'humidex',
                                title:{text: 'Humidex'},
                                opposite: true,
                                labels: {
                                    align: 'left'
                                },
                                alignTicks: true,
                                gridLineWidth: 0, // Not working?
                                gridZIndex: -10, // Hides the grid lines for this axis
                                showEmpty: false
                            }, false, false);

                            yaxis = 'humidex';
                        }
                    }

                    chart.addSeries({
                        name: titles[idx],
                        id: 'series-' + idx,
                        data: resp[idx],
                        yAxis: yaxis,
                        tooltip: {valueSuffix: valueSuffix}
                    }, false);

                    if (idx === 'temp') {
                        chart.get('series-' + idx).options.zIndex = 99;
                    }
                }
            });

            chart.hideLoading();
            chart.redraw();
        }
    });
};

var doPress = function () {
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'line',
            alignTicks: false
        },
        title: {
            text: 'Pressure'
        },
        credits: {
            enabled: true
        },
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{
            // left
            title: {
                text: 'Pressure (' + config.press.units + ')'
            },
            opposite: false,
            labels: {
                align: 'right',
                x: -5
            }
        }, {
            // right
            linkedTo: 0,
            gridLineWidth: 0,
            opposite: true,
            title: {
                text: null
            },
            labels: {
                align: 'left',
                x: 5
            }
        }],
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                dataGrouping: {
                    enabled: false
                },
                states: {
                    hover: {
                        halo: {
                            size: 5,
                            opacity: 0.25
                        }
                    }
                },
                cursor: 'pointer',
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 0.1
                        }
                    }
                }
            },
            line: {
                lineWidth: 2
            }
        },
        tooltip: {
            shared: true,
            split: false,
            valueSuffix: ' ' + config.press.units,
            valueDecimals: config.press.decimals,
            xDateFormat: "%A, %b %e, %H:%M"
        },
        series: [{
            name: 'Pressure'
        }],
        rangeSelector: {
            buttons: [{
                    count: 6,
                    type: 'hour',
                    text: '6h'
                }, {
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 48,
                    type: 'hour',
                    text: '48h'
                }, {
                    count: 3,
                    type: 'day',
                    text: '3d'
                }, {
                    count: 4,
                    type: 'day',
                    text: '4d'
                }, {
                    count: 5,
                    type: 'day',
                    text: '5d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 3
        }
    };

    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
        url: 'pressdata.json',
        dataType: 'json',
        cache: false,
        success: function (resp) {
            chart.hideLoading();
            chart.series[0].setData(resp.press);
        }
    });
};

var compassP = function (deg) {
    var a = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
    return a[Math.floor((deg + 22.5) / 45) % 8];
};

var doWindDir = function () {
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'scatter',
            alignTicks: false
        },
        title: {
            text: 'Wind Direction'
        },
        credits: {
            enabled: true
        },
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{
            // left
            title: {
                text: 'Bearing'
            },
            opposite: false,
            min: 0,
            max: 360,
            tickInterval: 45,
            labels: {
                align: 'right',
                x: -5,
                formatter: function () {
                    return compassP(this.value);
                }
            }
        }, {
            // right
            linkedTo: 0,
            gridLineWidth: 0,
            opposite: true,
            title: {
                text: null
            },
            min: 0,
            max: 360,
            tickInterval: 45,
            labels: {
                align: 'left',
                x: 5,
                formatter: function () {
                    return compassP(this.value);
                }
            }
        }],
        legend: {
            enabled: true
        },
        plotOptions: {
            scatter: {
                cursor: 'pointer',
                enableMouseTracking: false,
                boostThreshold: 200,
                marker: {
                    states: {
                        hover: {
                            enabled: false
                        },
                        select: {
                            enabled: false
                        },
                        normal: {
                            enabled: false
                        }
                    }
                },
                shadow: false,
                label: {
                    enabled: false
                }
            }
        },
        tooltip: {
            enabled: false
        },
        series: [{
            name: 'Bearing',
            type: 'scatter',
            marker: {
                symbol: 'circle',
                radius: 2
            }
        }, {
            name: 'Avg Bearing',
            type: 'scatter',
            color: 'red',
            marker: {
                symbol: 'circle',
                radius: 2
            }
        }],
        rangeSelector: {
            buttons: [{
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 2,
                    type: 'day',
                    text: '2d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 1
        }
    };

    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
        url: 'wdirdata.json',
        dataType: 'json',
        cache: false,
        success: function (resp) {
            chart.hideLoading();
            chart.series[0].setData(resp.bearing);
            chart.series[1].setData(resp.avgbearing);
        }
    });
};

var doWind = function () {
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'line',
            alignTicks: false
        },
        title: {
            text: 'Wind Speed'
        },
        credits: {
            enabled: true
        },
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{
            // left
            title: {
                text: 'Wind Speed (' + config.wind.units + ')'
            },
            opposite: false,
            min: 0,
            labels: {
                align: 'right',
                x: -5
            }
        }, {
            // right
            linkedTo: 0,
            gridLineWidth: 0,
            opposite: true,
            min: 0,
            title: {
                text: null
            },
            labels: {
                align: 'left',
                x: 5
            }
        }],
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                dataGrouping: {
                    enabled: false
                },
                states: {
                    hover: {
                        halo: {
                            size: 5,
                            opacity: 0.25
                        }
                    }
                },
                cursor: 'pointer',
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 0.1
                        }
                    }
                }
            },
            line: {
                lineWidth: 2
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            valueSuffix: ' ' + config.wind.units,
            valueDecimals: config.wind.decimals,
            xDateFormat: "%A, %b %e, %H:%M"
        },
        series: [{
            name: 'Wind Speed'
        }, {
            name: 'Wind Gust'
        }],
        rangeSelector: {
            buttons: [{
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 2,
                    type: 'day',
                    text: '2d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 1
        }
    };

    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
        url: 'winddata.json',
        dataType: 'json',
        cache: false,
        success: function (resp) {
            chart.hideLoading();
            chart.series[0].setData(resp.wspeed);
            chart.series[1].setData(resp.wgust);
        }
    });
};

var doRain = function () {
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'line',
            alignTicks: true
        },
        title: {
            text: 'Rainfall'
        },
        credits: {
            enabled: true
        },
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{
            // left
            title: {
                text: 'Rainfall rate (' + config.rain.units + '/hr)'
            },
            min: 0,
            opposite: false,
            labels: {
                align: 'right',
                x: -5
            },
            showEmpty: false
        }, {
            // right
            opposite: true,
            title: {
                text: 'Rainfall (' + config.rain.units + ')'
            },
            min: 0,
            labels: {
                align: 'left',
                x: 5
            }
        }],
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                boostThreshold: 0,
                dataGrouping: {
                    enabled: false
                },
                showInNavigator: true,
                states: {
                    hover: {
                        halo: {
                            size: 5,
                            opacity: 0.25
                        }
                    }
                },
                cursor: 'pointer',
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 0.1
                        }
                    }
                }
            },
            line: {
                lineWidth: 2
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            valueDecimals: config.rain.decimals,
            xDateFormat: "%A, %b %e, %H:%M"
        },
        series: [{
                name: 'Daily rain',
                type: 'area',
                yAxis: 1,
                tooltip: {valueSuffix: ' ' + config.rain.units},
                fillOpacity: 0.3
            }, {
                name: 'Rain rate',
                type: 'line',
                yAxis: 0,
                tooltip: {valueSuffix: ' ' + config.rain.units + '/hr'}
        }],
        rangeSelector: {
            buttons: [{
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 2,
                    type: 'day',
                    text: '2d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 1
        }
    };

    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
        url: 'raindata.json',
        dataType: 'json',
        cache: false,
        success: function (resp) {
            chart.hideLoading();
            chart.series[0].setData(resp.rfall);
            chart.series[1].setData(resp.rrate);
        }
    });
};

var doHum = function () {
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'line',
            alignTicks: false
        },
        title: {
            text: 'Relative Humidity'
        },
        credits: {
            enabled: true
        },
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{
            // left
            title: {
                text: 'Humidity (%)'
            },
            opposite: false,
            min: 0,
            max: 100,
            labels: {
                align: 'right',
                x: -5
            }
        }, {
            // right
            linkedTo: 0,
            gridLineWidth: 0,
            opposite: true,
            min: 0,
            max: 100,
            title: {
                text: null
            },
            labels: {
                align: 'left',
                x: 5
            }
        }],
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                dataGrouping: {
                    enabled: false
                },
                states: {
                    hover: {
                        halo: {
                            size: 5,
                            opacity: 0.25
                        }
                    }
                },
                cursor: 'pointer',
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 0.1
                        }
                    }
                }
            },
            line: {
                lineWidth: 2
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            valueSuffix: ' %',
            valueDecimals: config.hum.decimals,
            xDateFormat: "%A, %b %e, %H:%M"
        },
        series: [],
        rangeSelector: {
            buttons: [{
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 2,
                    type: 'day',
                    text: '2d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 1
        }
    };

    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
        url: 'humdata.json',
        dataType: 'json',
        cache: false,
        success: function (resp) {
            var titles = {
                'hum'  : 'Outdoor Humidity',
                'inhum': 'Indoor Humidity'
             }
             var idxs = ['hum', 'inhum'];
             var cnt = 0;
             idxs.forEach(function(idx) {
                 if (idx in resp) {
                     chart.addSeries({
                         name: titles[idx],
                         data: resp[idx]
                     }, false);

                     cnt++;
                 }
             });

            chart.hideLoading();
            chart.redraw();
        }
    });
};

var doSolar = function () {
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'line',
            alignTicks: true
        },
        title: {
            text: 'Solar'
        },
        credits: {
            enabled: true
        },
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [],
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                boostThreshold: 0,
                dataGrouping: {
                    enabled: false
                },
                showInNavigator: true,
                states: {
                    hover: {
                        halo: {
                            size: 5,
                            opacity: 0.25
                        }
                    }
                },
                cursor: 'pointer',
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 0.1
                        }
                    }
                }
            },
            line: {
                lineWidth: 2
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            xDateFormat: "%A, %b %e, %H:%M"
        },
        series: [],
        rangeSelector: {
            buttons: [{
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 2,
                    type: 'day',
                    text: '2d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 1
        }
    };

    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
        url: 'solardata.json',
        dataType: 'json',
        cache: false,
        success: function (resp) {
            var titles = {
                SolarRad       : 'Solar Radiation',
                CurrentSolarMax: 'Theoretical Max',
                UV: 'UV Index'
            };
            var types = {
                SolarRad: 'area',
                CurrentSolarMax: 'area',
                UV: 'line'
            };
            var colours = {
                SolarRad: 'rgb(255,165,0)',
                CurrentSolarMax: 'rgb(128,128,128)',
                UV: 'rgb(0,0,255)'
            };
            var tooltips = {
                SolarRad: {
                    valueSuffix: ' W/m\u00B2',
                    valueDecimals: 0
                },
                CurrentSolarMax: {
                    valueSuffix: ' W/m\u00B2',
                    valueDecimals: 0
                },
                UV: {
                    valueSuffix: null,
                    valueDecimals: config.uv.decimals
                }
            };

            var idxs = ['SolarRad', 'CurrentSolarMax', 'UV'];
            var cnt = 0;
            var solarAxisCreated = false;

            idxs.forEach(function(idx) {
                if (idx in resp) {
                    if (idx === 'UV') {
                        chart.addAxis({
                            id: 'uv',
                            title:{text: 'UV Index'},
                            opposite: true,
                            min: 0,
                            labels: {
                                align: 'left'
                            },
                            showEmpty: false
                        });
                    } else if (!solarAxisCreated) {
                        chart.addAxis({
                            id: 'solar',
                            title: {text: 'Solar Radiation (W/m\u00B2)'},
                            min: 0,
                            opposite: false,
                            labels: {
                                align: 'right',
                                x: -5
                            },
                            showEmpty: false
                        });
                        solarAxisCreated = true;
                    }


                    chart.addSeries({
                        name: titles[idx],
                        type: types[idx],
                        yAxis: idx === 'UV' ? 'uv' : 'solar',
                        tooltip: tooltips[idx],
                        data: resp[idx],
                        color: colours[idx],
                        fillOpacity: idx === 'CurrentSolarMax' ? 0.2 : 0.5,
                        zIndex: 100 - cnt
                    }, false);

                    cnt++;
                }
            });

            chart.hideLoading();
            chart.redraw();
        }
    });
};

var doSunHours = function () {
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'column',
            alignTicks: false
        },
        title: {
            text: 'Sunshine Hours'
        },
        credits: {
            enabled: true
        },
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{
            // left
            title: {
                text: 'Sunshine Hours'
            },
            min: 0,
            opposite: false,
            labels: {
                align: 'right',
                x: -12
            }
        }, {
            // right
            linkedTo: 0,
            gridLineWidth: 0,
            opposite: true,
            title: {
                text: null
            },
            labels: {
                align: 'left',
                x: 12
            }
        }],
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                dataGrouping: {
                    enabled: false
                },
                pointPadding: 0,
                groupPadding: 0.1,
                states: {
                    hover: {
                        halo: {
                            size: 5,
                            opacity: 0.25
                        }
                    }
                },
                cursor: 'pointer',
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 0.1
                        }
                    }
                }
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            xDateFormat: "%A, %b %e"
        },
        series: [{
            name: 'Sunshine Hours',
            type: 'column',
            color: 'rgb(255,165,0)',
            yAxis: 0,
            valueDecimals: 1,
            tooltip: {
                valueSuffix: ' Hrs'
            }
        }]
    };

    chart = new Highcharts.Chart(options);
    chart.showLoading();

    $.ajax({
        url: 'sunhours.json',
        dataType: 'json',
        cache: false,
        success: function (resp) {
            chart.hideLoading();
            chart.series[0].setData(resp.sunhours);
        }
    });
};

var doDailyRain = function () {
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'column',
            alignTicks: false
        },
        title: {
            text: 'Daily Rainfall'
        },
        credits: {
            enabled: true
        },
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{
            // left
            title: {
                text: 'Daily Rainfall'
            },
            min: 0,
            opposite: false,
            labels: {
                align: 'right',
                x: -12
            }
        }, {
            // right
            linkedTo: 0,
            gridLineWidth: 0,
            opposite: true,
            title: {
                text: null
            },
            labels: {
                align: 'left',
                x: 12
            }
        }],
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                dataGrouping: {
                    enabled: false
                },
                pointPadding: 0,
                groupPadding: 0.1,
                states: {
                    hover: {
                        halo: {
                            size: 5,
                            opacity: 0.25
                        }
                    }
                },
                cursor: 'pointer',
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 0.1
                        }
                    }
                }
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            xDateFormat: "%A, %b %e"
        },
        series: [{
            name: 'Daily Rainfall',
            type: 'column',
            color: 'blue',
            yAxis: 0,
            valueDecimals: config.rain.decimals,
            tooltip: {
                valueSuffix: ' ' + config.rain.units
            }
        }]
    };

    chart = new Highcharts.Chart(options);
    chart.showLoading();

    $.ajax({
        url: 'dailyrain.json',
        dataType: 'json',
        cache: false,
        success: function (resp) {
            chart.hideLoading();
            chart.series[0].setData(resp.dailyrain);
        }
    });
};

var doDailyTemp = function () {
    var freezing = config.temp.units === 'C' ? 0 : 32;
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'line',
            alignTicks: false
        },
        title: {
            text: 'Daily Temperature'
        },
        credits: {
            enabled: true
        },
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{
            // left
            title: {
                text: 'Daily Temperature (°' + config.temp.units + ')'
            },
            opposite: false,
            labels: {
                align: 'right',
                x: -5,
                formatter: function () {
                    return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
                }
            },
            plotLines: [{
                // freezing line
                value: freezing,
                color: 'rgb(0, 0, 180)',
                width: 1,
                zIndex: 2
            }]
        }, {
            // right
            linkedTo: 0,
            gridLineWidth: 0,
            opposite: true,
            title: {
                text: null
            },
            labels: {
                align: 'left',
                x: 5,
                formatter: function () {
                    return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
                }
            }
        }],
        legend: {
            enabled: true
        },
        plotOptions: {
            series: {
                dataGrouping: {
                    enabled: false
                },
                states: {
                    hover: {
                        halo: {
                            size: 5,
                            opacity: 0.25
                        }
                    }
                },
                cursor: 'pointer',
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 0.1
                        }
                    }
                }
            },
            line: {
                lineWidth: 2
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true,
            valueSuffix: ' °' + config.temp.units,
            valueDecimals: config.temp.decimals,
            xDateFormat: "%A, %b %e"
        },
        rangeSelector: {
            enabled: false
        },
        series: []
    };

    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
        url: 'dailytemp.json',
        dataType: 'json',
        cache: false,
        success: function (resp) {
            var titles = {
                'avgtemp': 'Avg Temp',
                'mintemp': 'Min Temp',
                'maxtemp': 'Max Temp'
            };
            var colours = {
                'avgtemp': 'green',
                'mintemp': 'blue',
                'maxtemp': 'red'
            };
            var idxs = ['avgtemp', 'mintemp', 'maxtemp'];

            idxs.forEach(function (idx) {
                if (idx in resp) {
                    chart.addSeries({
                        name: titles[idx],
                        data: resp[idx],
                        color: colours[idx]
                    }, false);
                }
            });

            chart.hideLoading();
            chart.redraw();
        }
    });
};

var doAirQuality = function () {
    var options = {
        chart: {
            renderTo: 'chartcontainer',
            type: 'line',
            alignTicks: false
        },
        title: {text: 'Air Quality'},
        credits: {enabled: true},
        xAxis: {
            type: 'datetime',
            ordinal: false,
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b %y',
                month: '%b %y',
                year: '%Y'
            }
        },
        yAxis: [{
                // left
                title: {text: 'µg/m³'},
                opposite: false,
                min: 0,
                labels: {
                    align: 'right',
                    x: -5
                }
            }, {
                // right
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                min: 0,
                title: {text: null},
                labels: {
                    align: 'left',
                    x: 5
                }
            }],
        legend: {enabled: true},
        plotOptions: {
            series: {
                dataGrouping: {
                    enabled: false
                },
                states: {
                    hover: {
                        halo: {
                            size: 5,
                            opacity: 0.25
                        }

                    }
                },
                cursor: 'pointer',
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 0.1
                        }
                    }
                }
            },
            line: {lineWidth: 2}
        },
        tooltip: {
            shared: true,
            split: false,
            valueSuffix: ' µg/m³',
            valueDecimals: 1,
            xDateFormat: "%A, %b %e, %H:%M"
        },
        series: [],
        rangeSelector: {
            buttons: [{
                    count: 12,
                    type: 'hour',
                    text: '12h'
                }, {
                    count: 24,
                    type: 'hour',
                    text: '24h'
                }, {
                    count: 2,
                    type: 'day',
                    text: '2d'
                }, {
                    type: 'all',
                    text: 'All'
                }],
            inputEnabled: false,
            selected: 1
        }
    };

    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
        url: 'airquality.json',
        dataType: 'json',
        cache: false,
        success: function (resp) {
            var titles = {
                'pm2p5': 'PM 2.5',
                'pm10' : 'PM 10'
             }
             var idxs = ['pm2p5', 'pm10'];
             var cnt = 0;
             idxs.forEach(function(idx) {
                 if (idx in resp) {
                     chart.addSeries({
                         name: titles[idx],
                         data: resp[idx]
                     }, false);

                     cnt++;
                 }
             });

            chart.hideLoading();
            chart.redraw();
        }
    });
};

Anyone see where I'm going wrong?

Thanks

Phil.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
mcrossley
Posts: 12690
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Range Selector in Charts.

Post by mcrossley »

Phil, I have implemented this in the standard web site, it looks just like your implementation and seems to be working ok.
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Range Selector in Charts.

Post by Phil23 »

Thanks Mark,

Is you implementation not released yet?
I can't see it in the latest release, 3133.
It's cumuluscharts.js shows the 9 individual RangeSelector blocks of code.

Code: Select all

// Last modified: 2021/04/24 15:04:55

var chart, config;

$(document).ready(function () {
I can see the changes you've made in https://weather.wilmslowastro.com/scrip ... 4242017.js so will try & find my error based on that.
It appears you are using the range selector as a default.

I also noticed Your Wind direction & Speed chart with the Fat Sausage, https://weather.wilmslowastro.com/graph ... t.php#wdir
Looks excellent.

Tried something like that in the past, but was only capable of Visualising it in Excel.

Cheers.

Phil.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
User avatar
mcrossley
Posts: 12690
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Range Selector in Charts.

Post by mcrossley »

Hi Phil, sorry the update hasn't been released yet. But I have test page - https://weather.wilmslowastro.com/test/newMX/trends.htm
Phil23
Posts: 884
Joined: Sat 16 Jul 2016 11:59 pm
Weather Station: Davis VP2+ & GW1000 (Standalone)
Operating System: Win10 Pro / rPi Buster
Location: Australia

Re: Range Selector in Charts.

Post by Phil23 »

mcrossley wrote: Tue 13 Jul 2021 4:11 pm Hi Phil, sorry the update hasn't been released yet. But I have test page - https://weather.wilmslowastro.com/test/newMX/trends.htm
Hi Mark,

I did look there as well, but still saw no changes.
Checked again now, & realised it was a cached version I was seeing.
Hard refreshed & now seeing the 2021/05/27 version.

Slightly OT, have you considered updating this page to point to the likes of the above link?

https://weather.wilmslowastro.com/experiments.php

Cheers

Phil.
:Now: :Today/Yesterday:

Image

Main Station Davis VP2+ Running Via Win10 Pro.
Secondary Stations, Ecowitt HP2551/GW1000 Via rPi 3 & 4 Running Buster GUI.
:Local Inverell Ecowitt Station: :Remote Ashford Ecowitt Station:
Locked