+ Antworten
Seite 11 von 11 ErsteErste ... 9 10 11
Ergebnis 101 bis 104 von 104
  1. #101
    Registriert seit
    Sep 2011
    Ort
    53639 Königswinter
    Beiträge
    1,400

    Ich hab das alles in einer Datei:
    PHP-Code:
    <html>
        <
    script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <
    script src="https://code.highcharts.com/highcharts.js"></script>
        <
    script src="https://code.highcharts.com/modules/windbarb.js"></script>
        <
    script src="https://code.highcharts.com/modules/exporting.js"></script>
        <
    script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>
        <
    script src="https://github.com/highcharts/highcharts/blob/master/js/themes/dark-unica.js"></script>
        <
    div id="container" style="max-width: 800px; min-width: 380px; height: 300px; margin: 0 auto">
            <
    div style="margin-top: 100px; text-align: center" id="loading">
                <
    class="fa fa-spinner fa-spin"></iLade Daten vom Wetterdienst
            
    </div>
        </
    div>
        
        <
    script>
        function 
    Meteogram(xmlcontainer) {
            
    // Parallel arrays for the chart data, these are populated as the XML/JSON file
            // is loaded
            
    this.symbols = [];
            
    this.precipitations = [];
            
    this.precipitationsError = []; // Only for some data sets
            
    this.winds = [];
            
    this.temperatures = [];
            
    this.pressures = [];
            
    // Initialize
            
    this.xml xml;
            
    this.container container;
            
    // Run
            
    this.parseYrData();
        }
        
    /**
         * Function to smooth the temperature line. The original data provides only whole degrees,
         * which makes the line graph look jagged. So we apply a running mean on it, but preserve
         * the unaltered value in the tooltip.
         */
        
    Meteogram.prototype.smoothLine = function (data) {
            var 
    data.length,
                
    sum,
                
    value;
            while (
    i--) {
                
    data[i].value value data[i].y// preserve value for tooltip
                // Set the smoothed value to the average of the closest points, but don't allow
                // it to differ more than 0.5 degrees from the given value
                
    sum = (data[1] || data[i]).value + (data[1] || data[i]).y;
                
    data[i].Math.max(value 0.5Math.min(sum 3value 0.5));
            }
        };
        
    /**
         * Draw the weather symbols on top of the temperature series. The symbols are
         * fetched from yr.no's MIT licensed weather symbol collection.
         * https://github.com/YR/weather-symbols
         */
        
    Meteogram.prototype.drawWeatherSymbols = function (chart) {
            var 
    meteogram this;
            $.
    each(chart.series[0].data, function (ipoint) {
                if (
    meteogram.resolution 36e5 || === 0) {
                    
    chart.renderer
                        
    .image(
                            
    'https://cdn.jsdelivr.net/gh/YR/weather-symbols@6.0.2/dist/svg/' +
                                
    meteogram.symbols[i] + '.svg',
                            
    point.plotX chart.plotLeft 8,
                            
    point.plotY chart.plotTop 30,
                            
    30,
                            
    30
                        
    )
                        .
    attr({
                            
    zIndex5
                        
    })
                        .
    add();
                }
            });
        };
        
    /**
         * Draw blocks around wind arrows, below the plot area
         */
        
    Meteogram.prototype.drawBlocksForWindArrows = function (chart) {
            var 
    xAxis chart.xAxis[0],
                
    x,
                
    pos,
                
    max,
                
    isLong,
                
    isLast,
                
    i;
            for (
    pos xAxis.minmax xAxis.max0pos <= max 36e5pos += 36e5+= 1) {
                
    // Get the X position
                
    isLast pos === max 36e5;
                
    Math.round(xAxis.toPixels(pos)) + (isLast 0.5 : -0.5);
                
    // Draw the vertical dividers and ticks
                
    if (this.resolution 36e5) {
                    
    isLong pos this.resolution === 0;
                } else {
                    
    isLong === 0;
                }
                
    chart.renderer.path(['M'xchart.plotTop chart.plotHeight + (isLong 28),
                    
    'L'xchart.plotTop chart.plotHeight 32'Z'])
                    .
    attr({
                        
    'stroke'chart.options.chart.plotBorderColor,
                        
    'stroke-width'1
                    
    })
                    .
    add();
            }
              
    // Center items in block
            
    chart.get('windbarbs').markerGroup.attr({
                
    translateXchart.get('windbarbs').markerGroup.translateX 8
            
    });
        };
        
    /**
         * Get the title based on the XML data
         */
        
    Meteogram.prototype.getTitle = function () {
            return 
    'Meteogram für ' this.xml.querySelector('location name').textContent +
                
    ', ' this.xml.querySelector('location country').textContent;
        };
        
    /**
         * Build and return the Highcharts options structure
         */
        
    Meteogram.prototype.getChartOptions = function () {
            var 
    meteogram this;
            return {
                
    chart: {
                    
    renderTothis.container,
                    
    marginBottom70,
                    
    marginRight40,
                    
    marginTop50,
                    
    plotBorderWidth1,
                    
    height270,
                    
    alignTicksfalse,
                    
    scrollablePlotArea: {
                        
    minWidth720
                    
    }
                },
                
    defs: {
                    
    patterns: [{
                        
    'id''precipitation-error',
                        
    'path': {
                            
    d: [
                                
    'M'3.30'L', -6.710,
                                
    'M'6.70'L', -3.310,
                                
    'M'100'L'010,
                                
    'M'13.30'L'3.310,
                                
    'M'16.70'L'6.710
                            
    ].join(' '),
                            
    stroke'#68CFE8',
                            
    strokeWidth1
                        
    }
                    }]
                },
                
    title: {
                    
    textthis.getTitle(),
                    
    align'left',
                    
    style: {
                        
    whiteSpace'nowrap',
                        
    textOverflow'ellipsis'
                    
    }
                },
                
    tooltip: {
                    
    sharedtrue,
                    
    useHTMLtrue,
                    
    headerFormat:
                        
    '<small>{point.x:%A, %b %e, %H:%M} - {point.point.to:%H:%M}</small><br>' +
                        
    '<b>{point.point.symbolName}</b><br>'
                
    },
                
    xAxis: [{ // Bottom X axis
                    
    type'datetime',
                    
    tickInterval36e5// two hours
                    
    minorTickInterval36e5// one hour
                    
    tickLength0,
                    
    gridLineWidth1,
                    
    gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0',
                    
    startOnTickfalse,
                    
    endOnTickfalse,
                    
    minPadding0,
                    
    maxPadding0,
                    
    offset30,
                    
    showLastLabeltrue,
                    
    labels: {
                        
    format'{value:%H}'
                    
    },
                    
    crosshairtrue
                
    }, { // Top X axis
                    
    linkedTo0,
                    
    type'datetime',
                    
    tickInterval24 3600 1000,
                    
    labels: {
                        
    format'{value:<span style="font-size: 12px; font-weight: bold">%a</span> %b %e}',
                        
    align'left',
                        
    x3,
                        
    y: -5
                    
    },
                    
    oppositetrue,
                    
    tickLength20,
                    
    gridLineWidth1
                
    }],
                
    yAxis: [{ // temperature axis
                    
    title: {
                        
    textnull
                    
    },
                    
    labels: {
                        
    format'{value}°',
                        
    style: {
                            
    fontSize'10px'
                        
    },
                        
    x: -3
                    
    },
                    
    plotLines: [{ // zero plane
                        
    value0,
                        
    color'#BBBBBB',
                        
    width1,
                        
    zIndex2
                    
    }],
                    
    maxPadding0.3,
                    
    minRange8,
                    
    tickInterval1,
                    
    gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0'
                
    }, { // precipitation axis
                    
    title: {
                        
    textnull
                    
    },
                    
    labels: {
                        
    enabledfalse
                    
    },
                    
    gridLineWidth0,
                    
    tickLength0,
                    
    minRange10,
                    
    min0
                
    }, { // Air pressure
                    
    allowDecimalsfalse,
                    
    title: { // Title on top of axis
                        
    text'hPa',
                        
    offset0,
                        
    align'high',
                        
    rotation0,
                        
    style: {
                            
    fontSize'10px',
                            
    colorHighcharts.getOptions().colors[2]
                        },
                        
    textAlign'left',
                        
    x3
                    
    },
                    
    labels: {
                        
    style: {
                            
    fontSize'8px',
                            
    colorHighcharts.getOptions().colors[2]
                        },
                        
    y2,
                        
    x3
                    
    },
                    
    gridLineWidth0,
                    
    oppositetrue,
                    
    showLastLabelfalse
                
    }],
                
    legend: {
                    
    enabledfalse
                
    },
                
    plotOptions: {
                    
    series: {
                        
    pointPlacement'between'
                    
    }
                },
                
    series: [{
                    
    name'Temperature',
                    
    datathis.temperatures,
                    
    type'spline',
                    
    marker: {
                        
    enabledfalse,
                        
    states: {
                            
    hover: {
                                
    enabledtrue
                            
    }
                        }
                    },
                    
    tooltip: {
                        
    pointFormat'<span style="color:{point.color}">\u25CF</span> ' +
                            
    '{series.name}: <b>{point.value}°C</b><br/>'
                    
    },
                    
    zIndex1,
                    
    color'#FF3333',
                    
    negativeColor'#48AFE8'
                
    }, {
                    
    name'Precipitation',
                    
    datathis.precipitationsError,
                    
    type'column',
                    
    color'url(#precipitation-error)',
                    
    yAxis1,
                    
    groupPadding0,
                    
    pointPadding0,
                    
    tooltip: {
                        
    valueSuffix' mm',
                        
    pointFormat'<span style="color:{point.color}">\u25CF</span> ' +
                            
    '{series.name}: <b>{point.minvalue} mm - {point.maxvalue} mm</b><br/>'
                    
    },
                    
    groupingfalse,
                    
    dataLabels: {
                        
    enabledmeteogram.hasPrecipitationError,
                        
    formatter: function () {
                            if (
    this.point.maxvalue 0) {
                                return 
    this.point.maxvalue;
                            }
                        },
                        
    style: {
                            
    fontSize'8px',
                            
    color'gray'
                        
    }
                    }
                }, {
                    
    name'Precipitation',
                    
    datathis.precipitations,
                    
    type'column',
                    
    color'#68CFE8',
                    
    yAxis1,
                    
    groupPadding0,
                    
    pointPadding0,
                    
    groupingfalse,
                    
    dataLabels: {
                        
    enabled: !meteogram.hasPrecipitationError,
                        
    formatter: function () {
                            if (
    this.0) {
                                return 
    this.y;
                            }
                        },
                        
    style: {
                            
    fontSize'8px',
                            
    color'gray'
                        
    }
                    },
                    
    tooltip: {
                        
    valueSuffix' mm'
                    
    }
                }, {
                    
    name'Air pressure',
                    
    colorHighcharts.getOptions().colors[2],
                    
    datathis.pressures,
                    
    marker: {
                        
    enabledfalse
                    
    },
                    
    shadowfalse,
                    
    tooltip: {
                        
    valueSuffix' hPa'
                    
    },
                    
    dashStyle'shortdot',
                    
    yAxis2
                
    }, {
                    
    name'Wind',
                    
    type'windbarb',
                    
    id'windbarbs',
                    
    colorHighcharts.getOptions().colors[1],
                    
    lineWidth1.5,
                    
    datathis.winds,
                    
    vectorLength18,
                    
    yOffset: -15,
                    
    tooltip: {
                        
    valueSuffix' m/s'
                    
    }
                }]
            };
        };
        
    /**
         * Post-process the chart from the callback function, the second argument to Highcharts.Chart.
         */
        
    Meteogram.prototype.onChartLoad = function (chart) {
            
    this.drawWeatherSymbols(chart);
            
    this.drawBlocksForWindArrows(chart);
        };
        
    /**
         * Create the chart. This function is called async when the data file is loaded and parsed.
         */
        
    Meteogram.prototype.createChart = function () {
            var 
    meteogram this;
            
    this.chart = new Highcharts.Chart(this.getChartOptions(), function (chart) {
                
    meteogram.onChartLoad(chart);
            });
        };
        
    Meteogram.prototype.error = function () {
            $(
    '#loading').html('<i class="fa fa-frown-o"></i> Fehler beim Laden der Daten. Bitte versuchen Sie es später noch einmal.');
        };
        
    /**
         * Handle the data. This part of the code is not Highcharts specific, but deals with yr.no's
         * specific data format
         */
        
    Meteogram.prototype.parseYrData = function () {
            var 
    meteogram this,
                
    xml this.xml,
                
    pointStart,
                
    forecast xml && xml.querySelector('forecast');
            if (!
    forecast) {
                return 
    this.error();
            }
            
    // The returned xml variable is a JavaScript representation of the provided
            // XML, generated on the server by running PHP simple_load_xml and
            // converting it to JavaScript by json_encode.
            
    Highcharts.each(
                
    forecast.querySelectorAll('tabular time'),
                function (
    timei) {
                    
    // Get the times - only Safari can't parse ISO8601 so we need to do
                    // some replacements
                    
    var from time.getAttribute('from') + ' UTC',
                        
    to time.getAttribute('to') + ' UTC';
                    
    from from.replace(/-/g'/').replace('T'' ');
                    
    from Date.parse(from);
                    
    to to.replace(/-/g'/').replace('T'' ');
                    
    to Date.parse(to);
                    if (
    to pointStart 24 36e5) {
                        return;
                    }
                    
    // If it is more than an hour between points, show all symbols
                    
    if (=== 0) {
                        
    meteogram.resolution to from;
                    }
                    
    // Populate the parallel arrays
                    
    meteogram.symbols.push(
                        
    time.querySelector('symbol').getAttribute('var')
                            .
    match(/[0-9]{2}[dnm]?/)[0]
                    );
                    
    meteogram.temperatures.push({
                        
    xfrom,
                        
    yparseInt(
                            
    time.querySelector('temperature').getAttribute('value'),
                            
    10
                        
    ),
                        
    // custom options used in the tooltip formatter
                        
    toto,
                        
    symbolNametime.querySelector('symbol').getAttribute('name')
                    });
                    var 
    precipitation time.querySelector('precipitation');
                    
    meteogram.precipitations.push({
                        
    xfrom,
                        
    yparseFloat(
                            
    Highcharts.pick(
                                
    precipitation.getAttribute('minvalue'),
                                
    precipitation.getAttribute('value')
                            )
                        )
                    });
                    if (
    precipitation.getAttribute('maxvalue')) {
                        
    meteogram.hasPrecipitationError true;
                        
    meteogram.precipitationsError.push({
                            
    xfrom,
                            
    yparseFloat(precipitation.getAttribute('maxvalue')),
                            
    minvalueparseFloat(precipitation.getAttribute('minvalue')),
                            
    maxvalueparseFloat(precipitation.getAttribute('maxvalue')),
                            
    valueparseFloat(precipitation.getAttribute('value'))
                        });
                    }
                    if (
    === 0) {
                        
    meteogram.winds.push({
                            
    xfrom,
                            
    valueparseFloat(time.querySelector('windSpeed')
                                .
    getAttribute('mps')),
                            
    directionparseFloat(time.querySelector('windDirection')
                                .
    getAttribute('deg'))
                        });
                    }
                    
    meteogram.pressures.push({
                        
    xfrom,
                        
    yparseFloat(time.querySelector('pressure').getAttribute('value'))
                    });
                    if (
    === 0) {
                        
    pointStart = (from to) / 2;
                    }
                }
            );
            
    // Smooth the line
            
    this.smoothLine(this.temperatures);
            
    // Create the chart when the data is loaded
            
    this.createChart();
        };
        
    // End of the Meteogram protype
         // On DOM ready...
        // Set the hash to the yr.no URL we want to parse
        
    var place,
            
    url;
        if (!
    location.hash) {
            
    place 'Germany/North_Rhine-Westphalia/Bonn';
            
    location.hash 'https://www.yr.no/place/' place '/forecast_hour_by_hour.xml';
        }
        
    // Then get the XML file through Highcharts' CORS proxy. Our proxy is limited to
        // this specific location. Useing the third party, rate limited cors.io service
        // for experimenting with other locations.
        
    url location.hash.substr(1);
        $.
    ajax({
            
    dataType'xml',
            
    urlurl === 'https://www.yr.no/place/Germany/North_Rhine-Westphalia/Bonn/forecast_hour_by_hour.xml' ?
                
    'https://www.highcharts.com/samples/data/cors.php?url=' url :
                
    'https://cors.io/?' url,
            
    success: function (xml) {
                
    window.meteogram = new Meteogram(xml'container');
            },
            
    errorMeteogram.prototype.error
        
    });
        </
    script>
    </
    html
    mws
    ---------------------------------------------------------------
    Wer Rechtschreibfehler findet darf sie behalten.
    ----------------o00o----'(_)'----o00o---------------------

  2. #102
    Registriert seit
    Jun 2016
    Beiträge
    25

    @nws - Danke. Tja schade die Sache mit dem Proxy. Leider bekomme ich auch die Fehlermeldung.

    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Fehler_Datei.PNG 
Hits:	24 
Größe:	3.0 KB 
ID:	49749

  3. #103
    Registriert seit
    Jun 2016
    Beiträge
    25

    Standard Noch eine Frage zum Modul OpenWeatherMap

    Es geht mir um die Formatierung der Variable "Zusammenfassung des Wetters".
    Die Einheiten sind bei mir um eine Zeile verrutscht. Ist das bei Euch auch so?

    Klicken Sie auf die Grafik für eine größere Ansicht 

Name:	Einheiten.PNG 
Hits:	52 
Größe:	38.5 KB 
ID:	49750


    Gruß,
    Michael

  4. #104
    Registriert seit
    Sep 2011
    Ort
    53639 Königswinter
    Beiträge
    1,400

    Nach einem Tipp von tomschl bin ich jetzt umgestiegen auf diese Lösung hier:

    Meteogram Weather Charts Generator with Interactive Map

    only £0.001 per API call
    500 free API calls per month
    seven-day free trial

    sieht dann z.B. so aus:

    https://nodeserver.cloud3squared.com...A%22Noto%22%7D

    Ist für ganz kleines Geld zu haben, kann super angepasst werden und man kann die Daten auch vom DWD beziehen.
    mws
    ---------------------------------------------------------------
    Wer Rechtschreibfehler findet darf sie behalten.
    ----------------o00o----'(_)'----o00o---------------------

Ähnliche Themen

  1. Modul Update schlägt fehl bei lokal geändertem Modul
    Von bumaas im Forum Allgemeine Diskussion
    Antworten: 15
    Letzter Beitrag: 13.03.19, 14:05
  2. Modul aus Script oder anderem Modul heraus aufrufen
    Von BommelPommel im Forum Entwicklung mit PHP-SDK/Delphi-SDK
    Antworten: 2
    Letzter Beitrag: 06.05.18, 10:22
  3. OpenWeatherMap vs. WunderGround
    Von Pio im Forum Allgemeine Diskussion
    Antworten: 4
    Letzter Beitrag: 11.05.16, 20:53
  4. Antworten: 0
    Letzter Beitrag: 13.01.16, 23:50
  5. Openweathermap (Wettervorhersage)
    Von steiner im Forum Anleitungen / Nützliche PHP Skripte
    Antworten: 60
    Letzter Beitrag: 16.10.15, 11:16