Qt 5.11 | Qt Charts | Qt Charts Examples | Qml Weather

Qt Charts | Commercial or GPLv3

# Qml Weather

This is a basic demonstration showing how to use the different chart types by using qml.

By default the application uses static test data to mimic a weather forecast. You can also obtain an application id from http://www.worldweatheronline.com/ to get access to weather API provided by World Weather Online. You can then give your application id as a parameter to the Qml Weather executable to make it use live data.

For example:

      bin\qmlweather.exe 1234567890abcdef123456

## Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

## Using Charts in Qt Quick Applications

The example application uses a ChartView and a some series to visualize weather data:

      ChartView {
          id: chartView
          title: "Weather forecast"
          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"
              }
          }

To get data with weather forecast data, we make an HTTP GET request to World Weather Online. We request the response in JSON data format.

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

The JSON response contains an array of forecast data:

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

That is then used as input data for our series and a ListModel we use as a container for weather icon URLs:

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

Files:

- qmlweather/main.cpp
- qmlweather/qml/qmlweather/main.qml
- qmlweather/qmlweather.pro
- qmlweather/resources.qrc