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 4018) - 28 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

Highcharts issue

From build 3044 the development baton passed to Mark Crossley. Mark has been responsible for all the Builds since. He has made the code available on GitHub. It is Mark's hope that others will join in this development, but at the very least he welcomes your ideas for future developments (see Cumulus MX Development suggestions).

Moderator: mcrossley

User avatar
mcrossley
Posts: 12695
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Highcharts issue

Post by mcrossley »

Here is a fork of HighCharts own fiddle that shows the problem - https://jsfiddle.net/mcrossley/m9gyu6tr/3/

The problem occurs if the chart is created without any data in the series, and the data is then added.
If the series is created with data, and the data is replaced, it works OK. (uncomment the data line in the series definition)
User avatar
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts issue

Post by HansR »

OK, finally responded with the request to create a bug report in github.
Which I did... so now we wait.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
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: Highcharts issue

Post by Phil23 »

Just noticed this on both my original site & test site & was about to create a new topic....

Interesting though is that in my test site, where I've modified the range, Temp is Ok, Pressure wrong,
Those are the two areas I changed.

Of the ones I haven't changed there are correct.
Humidity, Solar & Airqual.

My cumuluscharts.js is an older one I kept in order to copy my edits across.
// Last modified: 2021/02/21 22:50:00 is Mark's Time Stamp.

Test Site here:- http://weather.inverellit.com/new/trends.htm

Code: Select all

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

var chart, config;

$(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: {
            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: '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();
        }
    });
};
: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
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts issue

Post by HansR »

@Phil23: Yes. The problem is understood now (and well explained in Marks post above) and reported to HighCharts who are investigating.
Everybody using the standard charts are affected for the charts (if I checked correctly) where the chart is using the setData call.
Just waiting for them to return with an action.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
The PIT
Posts: 260
Joined: Thu 10 Dec 2009 6:15 pm
Weather Station: Davis VP2 Wireless
Operating System: Windows 7 32 bit
Location: England
Contact:

Re: Highcharts issue

Post by The PIT »

I noticed that you have issues with your solar graphs as well.
Based in Sunny Old Sheffield South Yorkshire England

www.sheffieldweather.co.uk
User avatar
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts issue

Post by HansR »

@The PIT: Who is: 'you' and which (site) has which issue?
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts issue

Post by HansR »

HansR wrote: Tue 08 Jun 2021 12:52 pm OK, finally responded with the request to create a bug report in github.
Which I did... so now we wait.
The waiting has ended. The issue is fixed and has been committed.
This means that after propagation to the CDN or in the next release, depending on what you use, the problem has vanished.
If you wish, you can check Marks fiddle for the CDN to see if it has already propagated.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
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: Highcharts issue

Post by Phil23 »

HansR wrote: Tue 22 Jun 2021 12:51 pm If you wish, you can check Marks fiddle for the CDN to see if it has already propagated.
If I'm looking at the above correctly it appears the issue is still there.
: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:
BCJKiwi
Posts: 1255
Joined: Mon 09 Jul 2012 8:40 pm
Weather Station: Davis VP2 Cabled
Operating System: Windows 10 Pro
Location: Auckland, New Zealand
Contact:

Re: Highcharts issue

Post by BCJKiwi »

It seems that if
All
is selected, then any other settings are selected everything works well - until another chart is selected.
User avatar
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts issue

Post by HansR »

Latest report is that it will take another 3-4 weeks to be released.
However for the impatient under you: here is a workaround.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
dane
Posts: 417
Joined: Wed 10 Sep 2008 2:15 pm
Weather Station: Rosenborg 68700
Operating System: Win10 Ult., 64-bit, RaspberryPi
Location: Gilleleje, Denmark

Re: Highcharts issue

Post by dane »

I am running Cumulus MX 3.12.0 b3141 on a Raspberry Pi Model B rev.2.
And am experiencing 2 minor problems with "Recent Charts" on local dashboard in recent versions of MX:
1. the graphs used to load rather quickly, but now they take a looooong time to load (except daily temp & daily rain)
2. I have specified 48 hours, but charts always default to 24 hrs, so I have to hit "All" to get the result I want
Ib
User avatar
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts issue

Post by HansR »

The long wait is over, the issue has been resolved.
Version 9.2 has been released and yes, it works.

@dane:
I don't know if your issues has been resolved with 9.2 but:
  1. afaik the size nor reading of the datafiles has not changed (ask Mark for confirmation) so the cause should be local; There does not seem to be an issue with others.
  2. That apparently is the new setting and can't be changed (without coding) so best to make a change request (or get an explanation by Mark).
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
Post Reply