##// END OF EJS Templates
HG_REPOSITORIES » LPP » INSTRUMENTATION » USERS » JEANDET » qtcharts
RSS

Clone from http://code.qt.io/qt/qtcharts.git

Documentation for QML Weather demo app
Tero Ahola -
r1225:fa2cebfef38c
parent child
Show More
Side by Side Unified
Context file:
r1225:fa2cebfef38c Loading diff...:
Show file before | Show file after | Hide comments
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
Show file before | Show file after | Hide comments
@@ -0,0 +1,32
1 /*!
2 \example demos/qmlweather
3 \title Qml Weather
4 \subtitle
5
6 \image demos_qmlweather.png
7
8 This is a basic demonstration how to use the different chart types by using qml. By default the
9 application uses static test data to mimic a weather forecast. You can also obtain an application
10 id from http://www.worldweatheronline.com/ to get access to their weather API. You can then give
11 your application id as a parameter to the Qml Weather executable to make it use live data.
12
13 For example:
14 \code
15 bin\qmlweather.exe 1234567890abcdef123456
16 \endcode
17
18 The demo application uses a ChartView and a couple of series to visualize weather data:
19 \snippet ../demos/qmlweather/qml/qmlweather/main.qml 1
20 \snippet ../demos/qmlweather/qml/qmlweather/main.qml 2
21
22 To get data with weather forecast data, we make an HTTP GET request to World Weather Online. We
23 request the response in JSON data format.
24 \snippet ../demos/qmlweather/qml/qmlweather/main.qml 3
25
26 The JSON response contains an array of forecast data:
27 \snippet ../demos/qmlweather/qml/qmlweather/main.qml 4
28
29 That is then used as input data for our series and a ListModel we use as a container for weather
30 icon URLs:
31 \snippet ../demos/qmlweather/qml/qmlweather/main.qml 5
32 */
Show file before | Show file after | Hide comments
@@ -25,15 +25,19 Rectangle {
25 width: 360
25 width: 360
26 height: 360
26 height: 360
27
27
28 //![1]
28 ChartView {
29 ChartView {
29 id: chartView
30 id: chartView
30 title: "Weather forecast"
31 title: "Weather forecast"
32 //![1]
31 anchors.top: parent.top
33 anchors.top: parent.top
32 anchors.bottom: weatherImageRow.top
34 anchors.bottom: weatherImageRow.top
33 anchors.left: parent.left
35 anchors.left: parent.left
34 anchors.right: parent.right
36 anchors.right: parent.right
35 legend: ChartView.LegendTop
37 legend: ChartView.LegendTop
36
38
39 //![2]
40 // BarSeries {
37 GroupedBarSeries {
41 GroupedBarSeries {
38 barCategories: [ "2008", "2009", "2010", "2011", "2012" ]
42 barCategories: [ "2008", "2009", "2010", "2011", "2012" ]
39 BarSet {
43 BarSet {
@@ -41,13 +45,6 Rectangle {
41 name: "Rainfall"
45 name: "Rainfall"
42 }
46 }
43 }
47 }
44 // BarSeries {
45 // barCategories: [ "2008", "2009", "2010", "2011", "2012" ]
46 // BarSet {
47 // id: rainfallSet
48 // name: "Rainfall"
49 // }
50 // }
51
48
52 ScatterSeries {
49 ScatterSeries {
53 id: maxTempSeries
50 id: maxTempSeries
@@ -58,6 +55,7 Rectangle {
58 id: minTempSeries
55 id: minTempSeries
59 name: "Min. temperature"
56 name: "Min. temperature"
60 }
57 }
58 //![2]
61 }
59 }
62
60
63 // A timer to refresh the forecast every 5 minutes
61 // A timer to refresh the forecast every 5 minutes
@@ -67,9 +65,13 Rectangle {
67 triggeredOnStart: true
65 triggeredOnStart: true
68 running: true
66 running: true
69 onTriggered: {
67 onTriggered: {
70 if (weatherAppKey != "") {
68 if (weatherAppKey != "") {
69 //![3]
70 // Make HTTP GET request and parse the result
71 var xhr = new XMLHttpRequest;
71 var xhr = new XMLHttpRequest;
72 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);
72 xhr.open("GET",
73 "http://free.worldweatheronline.com/feed/weather.ashx?q=Jyv%c3%a4skyl%c3%a4,Finland&format=json&num_of_days=5&key="
74 + weatherAppKey);
73 xhr.onreadystatechange = function() {
75 xhr.onreadystatechange = function() {
74 if (xhr.readyState == XMLHttpRequest.DONE) {
76 if (xhr.readyState == XMLHttpRequest.DONE) {
75 var a = JSON.parse(xhr.responseText);
77 var a = JSON.parse(xhr.responseText);
@@ -77,6 +79,7 Rectangle {
77 }
79 }
78 }
80 }
79 xhr.send();
81 xhr.send();
82 //![3]
80 } else {
83 } else {
81 // No app key for worldweatheronline.com given by the user -> use static data
84 // No app key for worldweatheronline.com given by the user -> use static data
82 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\" } ] }}";
85 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\" } ] }}";
@@ -121,15 +124,20 Rectangle {
121 minTempSeries.clear();
124 minTempSeries.clear();
122 weatherImageModel.clear();
125 weatherImageModel.clear();
123
126
127 //![4]
124 // Loop through the parsed JSON
128 // Loop through the parsed JSON
125 for (var i in weatherData.data.weather) {
129 for (var i in weatherData.data.weather) {
126 var weatherObj = weatherData.data.weather[i];
130 var weatherObj = weatherData.data.weather[i];
131 //![4]
127
132
133 //![5]
128 // Store temperature values, rainfall and weather icon
134 // Store temperature values, rainfall and weather icon
129 maxTempSeries.append(Number(i), weatherObj.tempMaxC);
135 maxTempSeries.append(i, weatherObj.tempMaxC);
130 minTempSeries.append(Number(i), weatherObj.tempMinC);
136 minTempSeries.append(i, weatherObj.tempMinC);
131 rainfallSet.append(Number(i), weatherObj.precipMM);
137 rainfallSet.append(i, weatherObj.precipMM);
138
132 weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value});
139 weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value});
140 //![5]
133
141
134 // Update scale of the chart
142 // Update scale of the chart
135 chartView.axisX.min = 0;
143 chartView.axisX.min = 0;
Show file before | Show file after | Hide comments
@@ -16,11 +16,11
16 <li><a href="demos-chartthemes.html">Chart themes</a></li>
16 <li><a href="demos-chartthemes.html">Chart themes</a></li>
17 <li><a href="demos-piechartcustomization.html">Pie chart customization</a></li>
17 <li><a href="demos-piechartcustomization.html">Pie chart customization</a></li>
18 <li><a href="demos-dynamicspline.html">Dynamic spline chart</a></li>
18 <li><a href="demos-dynamicspline.html">Dynamic spline chart</a></li>
19 <li><a href="demos-qmlchart.html">Qml chart</a></li>
19 <li><a href="demos-qmlchart.html">Qml Basic Charts</a></li>
20 <li><a href="demos-qmlweather.html">Qml Weather</a></li>
20 </ul>
21 </ul>
21 </td>
22 </td>
22 </tr>
23 </tr>
23 </table>
24 </table>
24 \endraw
25 \endraw
25 */
26 */
26
General Comments 0
You need to be logged in to leave comments. Login now