<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>main.qml Example File | Qt Charts 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtcharts-index.html">Qt Charts</a></td><td ><a href="qtcharts-qmlweather-example.html">Qml Weather</a></td><td >main.qml Example File</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtcharts-index.html">Qt Charts | Commercial or GPLv3</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">main.qml Example File</h1>
<span class="subtitle">qmlweather/qml/qmlweather/main.qml</span>
<!-- $$$qmlweather/qml/qmlweather/main.qml-description -->
<div class="descr"> <a name="details"></a>
<pre class="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 [°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;
}
}
}
</pre>
</div>
<!-- @@@qmlweather/qml/qmlweather/main.qml -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
