main.qml Example File | Qt Charts 5.12.11

- Qt 5.12
- Qt Charts
- Qml Weather
- main.qml Example File
- Qt Charts | Commercial or GPLv3

# main.qml Example File

qmlweather/qml/qmlweather/main.qml

     /****************************************************************************
     **
     ** 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" }
         }

         ChartView {
             id: chartView
             title: "Weather forecast"
             height: parent.height / 4 * 3
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
             legend.alignment: Qt.AlignTop
             antialiasing: true

             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 [&deg;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"
                 }
             }
         }

         // A timer to refresh the forecast every 5 minutes
         Timer {
             interval: 300000
             repeat: true
             triggeredOnStart: true
             running: true
             onTriggered: {
                 if (weatherAppKey != "") {
                     // 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();
                 } 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();

             // Loop through the parsed JSON
             for (var i in weatherData.data.weather) {
                 var weatherObj = weatherData.data.weather[i];

                 // 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});

                 // 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;
             }
         }

     }