| /**************************************************************************** |
| ** |
| ** Copyright (C) 2016 The Qt Company Ltd. |
| ** Contact: https://www.qt.io/licensing/ |
| ** |
| ** This file is part of the Qt Charts module of the Qt Toolkit. |
| ** |
| ** $QT_BEGIN_LICENSE:GPL$ |
| ** Commercial License Usage |
| ** Licensees holding valid commercial Qt licenses may use this file in |
| ** accordance with the commercial license agreement provided with the |
| ** Software or, alternatively, in accordance with the terms contained in |
| ** a written agreement between you and The Qt Company. For licensing terms |
| ** and conditions see https://www.qt.io/terms-conditions. For further |
| ** information use the contact form at https://www.qt.io/contact-us. |
| ** |
| ** GNU General Public License Usage |
| ** Alternatively, this file may be used under the terms of the GNU |
| ** General Public License version 3 or (at your option) any later version |
| ** approved by the KDE Free Qt Foundation. The licenses are as published by |
| ** the Free Software Foundation and appearing in the file LICENSE.GPL3 |
| ** included in the packaging of this file. Please review the following |
| ** information to ensure the GNU General Public License requirements will |
| ** be met: https://www.gnu.org/licenses/gpl-3.0.html. |
| ** |
| ** $QT_END_LICENSE$ |
| ** |
| ****************************************************************************/ |
| |
| import QtQuick 2.0 |
| import QtCharts 2.0 |
| |
| Rectangle { |
| width: 500 |
| height: 400 |
| gradient: Gradient { |
| GradientStop { position: 0.0; color: "lightblue" } |
| GradientStop { position: 1.0; color: "white" } |
| } |
| |
| //![1] |
| ChartView { |
| id: chartView |
| title: "Weather forecast" |
| //![1] |
| height: parent.height / 4 * 3 |
| anchors.top: parent.top |
| anchors.left: parent.left |
| anchors.right: parent.right |
| legend.alignment: Qt.AlignTop |
| antialiasing: true |
| |
| //![2] |
| BarCategoryAxis { |
| id: barCategoriesAxis |
| titleText: "Date" |
| } |
| |
| ValueAxis{ |
| id: valueAxisY2 |
| min: 0 |
| max: 10 |
| titleText: "Rainfall [mm]" |
| } |
| |
| ValueAxis { |
| id: valueAxisX |
| // Hide the value axis; it is only used to map the line series to bar categories axis |
| visible: false |
| min: 0 |
| max: 5 |
| } |
| |
| ValueAxis{ |
| id: valueAxisY |
| min: 0 |
| max: 15 |
| titleText: "Temperature [°C]" |
| } |
| |
| LineSeries { |
| id: maxTempSeries |
| axisX: valueAxisX |
| axisY: valueAxisY |
| name: "Max. temperature" |
| } |
| |
| LineSeries { |
| id: minTempSeries |
| axisX: valueAxisX |
| axisY: valueAxisY |
| name: "Min. temperature" |
| } |
| |
| BarSeries { |
| id: myBarSeries |
| axisX: barCategoriesAxis |
| axisYRight: valueAxisY2 |
| BarSet { |
| id: rainfallSet |
| label: "Rainfall" |
| } |
| } |
| //![2] |
| } |
| |
| // A timer to refresh the forecast every 5 minutes |
| Timer { |
| interval: 300000 |
| repeat: true |
| triggeredOnStart: true |
| running: true |
| onTriggered: { |
| if (weatherAppKey != "") { |
| //![3] |
| // Make HTTP GET request and parse the result |
| var xhr = new XMLHttpRequest; |
| xhr.open("GET", |
| "http://free.worldweatheronline.com/feed/weather.ashx?q=Jyv%c3%a4skyl%c3%a4,Finland&format=json&num_of_days=5&key=" |
| + weatherAppKey); |
| xhr.onreadystatechange = function() { |
| if (xhr.readyState == XMLHttpRequest.DONE) { |
| var a = JSON.parse(xhr.responseText); |
| parseWeatherData(a); |
| } |
| } |
| xhr.send(); |
| //![3] |
| } else { |
| // No app key for worldweatheronline.com given by the user -> use dummy static data |
| var responseText = "{ \"data\": { \"current_condition\": [ {\"cloudcover\": \"10\", \"humidity\": \"61\", \"observation_time\": \"06:26 AM\", \"precipMM\": \"0.0\", \"pressure\": \"1022\", \"temp_C\": \"6\", \"temp_F\": \"43\", \"visibility\": \"10\", \"weatherCode\": \"113\", \"weatherDesc\": [ {\"value\": \"Sunny\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0001_sunny.png\" } ], \"winddir16Point\": \"SE\", \"winddirDegree\": \"140\", \"windspeedKmph\": \"7\", \"windspeedMiles\": \"4\" } ], \"request\": [ {\"query\": \"Jyvaskyla, Finland\", \"type\": \"City\" } ], \"weather\": [ {\"date\": \"2012-05-09\", \"precipMM\": \"0.4\", \"tempMaxC\": \"14\", \"tempMaxF\": \"57\", \"tempMinC\": \"7\", \"tempMinF\": \"45\", \"weatherCode\": \"116\", \"weatherDesc\": [ {\"value\": \"Partly Cloudy\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0002_sunny_intervals.png\" } ], \"winddir16Point\": \"S\", \"winddirDegree\": \"179\", \"winddirection\": \"S\", \"windspeedKmph\": \"20\", \"windspeedMiles\": \"12\" }, {\"date\": \"2012-05-10\", \"precipMM\": \"2.4\", \"tempMaxC\": \"13\", \"tempMaxF\": \"55\", \"tempMinC\": \"8\", \"tempMinF\": \"46\", \"weatherCode\": \"266\", \"weatherDesc\": [ {\"value\": \"Light drizzle\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0017_cloudy_with_light_rain.png\" } ], \"winddir16Point\": \"SW\", \"winddirDegree\": \"219\", \"winddirection\": \"SW\", \"windspeedKmph\": \"21\", \"windspeedMiles\": \"13\" }, {\"date\": \"2012-05-11\", \"precipMM\": \"11.1\", \"tempMaxC\": \"15\", \"tempMaxF\": \"59\", \"tempMinC\": \"7\", \"tempMinF\": \"44\", \"weatherCode\": \"266\", \"weatherDesc\": [ {\"value\": \"Light drizzle\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0017_cloudy_with_light_rain.png\" } ], \"winddir16Point\": \"SSW\", \"winddirDegree\": \"200\", \"winddirection\": \"SSW\", \"windspeedKmph\": \"20\", \"windspeedMiles\": \"12\" }, {\"date\": \"2012-05-12\", \"precipMM\": \"2.8\", \"tempMaxC\": \"7\", \"tempMaxF\": \"44\", \"tempMinC\": \"2\", \"tempMinF\": \"35\", \"weatherCode\": \"317\", \"weatherDesc\": [ {\"value\": \"Light sleet\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0021_cloudy_with_sleet.png\" } ], \"winddir16Point\": \"NW\", \"winddirDegree\": \"311\", \"winddirection\": \"NW\", \"windspeedKmph\": \"24\", \"windspeedMiles\": \"15\" }, {\"date\": \"2012-05-13\", \"precipMM\": \"0.4\", \"tempMaxC\": \"6\", \"tempMaxF\": \"42\", \"tempMinC\": \"2\", \"tempMinF\": \"35\", \"weatherCode\": \"116\", \"weatherDesc\": [ {\"value\": \"Partly Cloudy\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0002_sunny_intervals.png\" } ], \"winddir16Point\": \"WNW\", \"winddirDegree\": \"281\", \"winddirection\": \"WNW\", \"windspeedKmph\": \"21\", \"windspeedMiles\": \"13\" } ] }}"; |
| var a = JSON.parse(responseText); |
| parseWeatherData(a); |
| } |
| } |
| } |
| |
| Row { |
| id: weatherImageRow |
| anchors.top: chartView.bottom |
| anchors.topMargin: 5 |
| anchors.bottom: poweredByText.top |
| anchors.bottomMargin: 5 |
| anchors.horizontalCenter: parent.horizontalCenter |
| height: parent.height - chartView.height - anchors.topMargin |
| |
| ListModel { |
| id: weatherImageModel |
| } |
| |
| Repeater { |
| id: repeater |
| model: weatherImageModel |
| delegate: Image { |
| source: imageSource |
| width: weatherImageRow.height |
| height: width |
| fillMode: Image.PreserveAspectCrop |
| } |
| } |
| } |
| |
| Text { |
| id: poweredByText |
| anchors.bottom: parent.bottom |
| anchors.bottomMargin: 5 |
| anchors.left: parent.left |
| anchors.leftMargin: 25 |
| height: parent.height / 25 |
| text: "Powered by World Weather Online" |
| } |
| |
| function parseWeatherData(weatherData) { |
| // Clear previous values |
| maxTempSeries.clear(); |
| minTempSeries.clear(); |
| weatherImageModel.clear(); |
| |
| //![4] |
| // Loop through the parsed JSON |
| for (var i in weatherData.data.weather) { |
| var weatherObj = weatherData.data.weather[i]; |
| //![4] |
| |
| //![5] |
| // Store temperature values, rainfall and weather icon. |
| // The temperature values begin from 0.5 instead of 0.0 to make the start from the |
| // middle of the rainfall bars. This makes the temperature lines visually better |
| // synchronized with the rainfall bars. |
| maxTempSeries.append(Number(i) + 0.5, weatherObj.tempMaxC); |
| minTempSeries.append(Number(i) + 0.5, weatherObj.tempMinC); |
| rainfallSet.append(i, weatherObj.precipMM); |
| weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value}); |
| //![5] |
| |
| // Update scale of the chart |
| valueAxisY.max = Math.max(chartView.axisY().max,weatherObj.tempMaxC); |
| valueAxisX.min = 0; |
| valueAxisX.max = Number(i) + 1; |
| |
| // Set the x-axis labels to the dates of the forecast |
| var xLabels = barCategoriesAxis.categories; |
| xLabels[Number(i)] = weatherObj.date.substring(5, 10); |
| barCategoriesAxis.categories = xLabels; |
| barCategoriesAxis.visible = true; |
| barCategoriesAxis.min = 0; |
| barCategoriesAxis.max = xLabels.length - 1; |
| } |
| } |
| |
| } |
