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

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

Improve QML Weather example layout...
Titta Heikkala -
r2761:c19e8d5c88d9
parent child
Show More
Side by Side Unified
Context file:
r2761:c19e8d5c88d9 Loading diff...:
Show file before | Show file after | Hide comments
@@ -1,199 +1,200
1 /****************************************************************************
1 /****************************************************************************
2 **
2 **
3 ** Copyright (C) 2014 Digia Plc
3 ** Copyright (C) 2014 Digia Plc
4 ** All rights reserved.
4 ** All rights reserved.
5 ** For any questions to Digia, please use contact form at http://qt.io
5 ** For any questions to Digia, please use contact form at http://qt.io
6 **
6 **
7 ** This file is part of the Qt Charts module.
7 ** This file is part of the Qt Charts module.
8 **
8 **
9 ** Licensees holding valid commercial license for Qt may use this file in
9 ** Licensees holding valid commercial license for Qt may use this file in
10 ** accordance with the Qt License Agreement provided with the Software
10 ** accordance with the Qt License Agreement provided with the Software
11 ** or, alternatively, in accordance with the terms contained in a written
11 ** or, alternatively, in accordance with the terms contained in a written
12 ** agreement between you and Digia.
12 ** agreement between you and Digia.
13 **
13 **
14 ** If you have questions regarding the use of this file, please use
14 ** If you have questions regarding the use of this file, please use
15 ** contact form at http://qt.io
15 ** contact form at http://qt.io
16 **
16 **
17 ****************************************************************************/
17 ****************************************************************************/
18
18
19 import QtQuick 2.0
19 import QtQuick 2.0
20 import QtCharts 2.0
20 import QtCharts 2.0
21
21
22 Rectangle {
22 Rectangle {
23 width: 500
23 width: 500
24 height: 400
24 height: 400
25 gradient: Gradient {
25 gradient: Gradient {
26 GradientStop { position: 0.0; color: "lightblue" }
26 GradientStop { position: 0.0; color: "lightblue" }
27 GradientStop { position: 1.0; color: "white" }
27 GradientStop { position: 1.0; color: "white" }
28 }
28 }
29
29
30 //![1]
30 //![1]
31 ChartView {
31 ChartView {
32 id: chartView
32 id: chartView
33 title: "Weather forecast"
33 title: "Weather forecast"
34 //![1]
34 //![1]
35 height: parent.height / 4 * 3
35 anchors.top: parent.top
36 anchors.top: parent.top
36 anchors.bottom: weatherImageRow.top
37 anchors.left: parent.left
37 anchors.left: parent.left
38 anchors.right: parent.right
38 anchors.right: parent.right
39 legend.alignment: Qt.AlignTop
39 legend.alignment: Qt.AlignTop
40 antialiasing: true
40 antialiasing: true
41
41
42 //![2]
42 //![2]
43 BarCategoryAxis {
43 BarCategoryAxis {
44 id: barCategoriesAxis
44 id: barCategoriesAxis
45 titleText: "Date"
45 titleText: "Date"
46 }
46 }
47
47
48 ValueAxis{
48 ValueAxis{
49 id: valueAxisY2
49 id: valueAxisY2
50 min: 0
50 min: 0
51 max: 10
51 max: 10
52 titleText: "Rainfall [mm]"
52 titleText: "Rainfall [mm]"
53 }
53 }
54
54
55 ValueAxis {
55 ValueAxis {
56 id: valueAxisX
56 id: valueAxisX
57 // Hide the value axis; it is only used to map the line series to bar categories axis
57 // Hide the value axis; it is only used to map the line series to bar categories axis
58 visible: false
58 visible: false
59 min: 0
59 min: 0
60 max: 5
60 max: 5
61 }
61 }
62
62
63 ValueAxis{
63 ValueAxis{
64 id: valueAxisY
64 id: valueAxisY
65 min: 0
65 min: 0
66 max: 15
66 max: 15
67 titleText: "Temperature [°C]"
67 titleText: "Temperature [°C]"
68 }
68 }
69
69
70 LineSeries {
70 LineSeries {
71 id: maxTempSeries
71 id: maxTempSeries
72 axisX: valueAxisX
72 axisX: valueAxisX
73 axisY: valueAxisY
73 axisY: valueAxisY
74 name: "Max. temperature"
74 name: "Max. temperature"
75 }
75 }
76
76
77 LineSeries {
77 LineSeries {
78 id: minTempSeries
78 id: minTempSeries
79 axisX: valueAxisX
79 axisX: valueAxisX
80 axisY: valueAxisY
80 axisY: valueAxisY
81 name: "Min. temperature"
81 name: "Min. temperature"
82 }
82 }
83
83
84 BarSeries {
84 BarSeries {
85 id: myBarSeries
85 id: myBarSeries
86 axisX: barCategoriesAxis
86 axisX: barCategoriesAxis
87 axisYRight: valueAxisY2
87 axisYRight: valueAxisY2
88 BarSet {
88 BarSet {
89 id: rainfallSet
89 id: rainfallSet
90 label: "Rainfall"
90 label: "Rainfall"
91 }
91 }
92 }
92 }
93 //![2]
93 //![2]
94 }
94 }
95
95
96 // A timer to refresh the forecast every 5 minutes
96 // A timer to refresh the forecast every 5 minutes
97 Timer {
97 Timer {
98 interval: 300000
98 interval: 300000
99 repeat: true
99 repeat: true
100 triggeredOnStart: true
100 triggeredOnStart: true
101 running: true
101 running: true
102 onTriggered: {
102 onTriggered: {
103 if (weatherAppKey != "") {
103 if (weatherAppKey != "") {
104 //![3]
104 //![3]
105 // Make HTTP GET request and parse the result
105 // Make HTTP GET request and parse the result
106 var xhr = new XMLHttpRequest;
106 var xhr = new XMLHttpRequest;
107 xhr.open("GET",
107 xhr.open("GET",
108 "http://free.worldweatheronline.com/feed/weather.ashx?q=Jyv%c3%a4skyl%c3%a4,Finland&format=json&num_of_days=5&key="
108 "http://free.worldweatheronline.com/feed/weather.ashx?q=Jyv%c3%a4skyl%c3%a4,Finland&format=json&num_of_days=5&key="
109 + weatherAppKey);
109 + weatherAppKey);
110 xhr.onreadystatechange = function() {
110 xhr.onreadystatechange = function() {
111 if (xhr.readyState == XMLHttpRequest.DONE) {
111 if (xhr.readyState == XMLHttpRequest.DONE) {
112 var a = JSON.parse(xhr.responseText);
112 var a = JSON.parse(xhr.responseText);
113 parseWeatherData(a);
113 parseWeatherData(a);
114 }
114 }
115 }
115 }
116 xhr.send();
116 xhr.send();
117 //![3]
117 //![3]
118 } else {
118 } else {
119 // No app key for worldweatheronline.com given by the user -> use dummy static data
119 // No app key for worldweatheronline.com given by the user -> use dummy static data
120 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\" } ] }}";
120 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 var a = JSON.parse(responseText);
121 var a = JSON.parse(responseText);
122 parseWeatherData(a);
122 parseWeatherData(a);
123 }
123 }
124 }
124 }
125 }
125 }
126
126
127 Row {
127 Row {
128 id: weatherImageRow
128 id: weatherImageRow
129 anchors.top: chartView.bottom
130 anchors.topMargin: 5
129 anchors.bottom: poweredByText.top
131 anchors.bottom: poweredByText.top
130 anchors.bottomMargin: 10
132 anchors.bottomMargin: 5
131 anchors.left: parent.left
133 anchors.horizontalCenter: parent.horizontalCenter
132 anchors.leftMargin: 25
134 height: parent.height - chartView.height - anchors.topMargin
133 anchors.right: parent.right
134 anchors.rightMargin: 25
135
135
136 ListModel {
136 ListModel {
137 id: weatherImageModel
137 id: weatherImageModel
138 }
138 }
139
139
140 Repeater {
140 Repeater {
141 id: repeater
141 id: repeater
142 model: weatherImageModel
142 model: weatherImageModel
143 delegate: Image {
143 delegate: Image {
144 source: imageSource
144 source: imageSource
145 width: weatherImageRow.width / weatherImageModel.count
145 width: weatherImageRow.height
146 height: width
146 height: width
147 fillMode: Image.PreserveAspectCrop
147 fillMode: Image.PreserveAspectCrop
148 }
148 }
149 }
149 }
150 }
150 }
151
151
152 Text {
152 Text {
153 id: poweredByText
153 id: poweredByText
154 anchors.bottom: parent.bottom
154 anchors.bottom: parent.bottom
155 anchors.bottomMargin: 10
155 anchors.bottomMargin: 5
156 anchors.left: parent.left
156 anchors.left: parent.left
157 anchors.leftMargin: 25
157 anchors.leftMargin: 25
158 height: parent.height / 25
158 text: "Powered by World Weather Online"
159 text: "Powered by World Weather Online"
159 }
160 }
160
161
161 function parseWeatherData(weatherData) {
162 function parseWeatherData(weatherData) {
162 // Clear previous values
163 // Clear previous values
163 maxTempSeries.clear();
164 maxTempSeries.clear();
164 minTempSeries.clear();
165 minTempSeries.clear();
165 weatherImageModel.clear();
166 weatherImageModel.clear();
166
167
167 //![4]
168 //![4]
168 // Loop through the parsed JSON
169 // Loop through the parsed JSON
169 for (var i in weatherData.data.weather) {
170 for (var i in weatherData.data.weather) {
170 var weatherObj = weatherData.data.weather[i];
171 var weatherObj = weatherData.data.weather[i];
171 //![4]
172 //![4]
172
173
173 //![5]
174 //![5]
174 // Store temperature values, rainfall and weather icon.
175 // Store temperature values, rainfall and weather icon.
175 // The temperature values begin from 0.5 instead of 0.0 to make the start from the
176 // The temperature values begin from 0.5 instead of 0.0 to make the start from the
176 // middle of the rainfall bars. This makes the temperature lines visually better
177 // middle of the rainfall bars. This makes the temperature lines visually better
177 // synchronized with the rainfall bars.
178 // synchronized with the rainfall bars.
178 maxTempSeries.append(Number(i) + 0.5, weatherObj.tempMaxC);
179 maxTempSeries.append(Number(i) + 0.5, weatherObj.tempMaxC);
179 minTempSeries.append(Number(i) + 0.5, weatherObj.tempMinC);
180 minTempSeries.append(Number(i) + 0.5, weatherObj.tempMinC);
180 rainfallSet.append(i, weatherObj.precipMM);
181 rainfallSet.append(i, weatherObj.precipMM);
181 weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value});
182 weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value});
182 //![5]
183 //![5]
183
184
184 // Update scale of the chart
185 // Update scale of the chart
185 valueAxisY.max = Math.max(chartView.axisY().max,weatherObj.tempMaxC);
186 valueAxisY.max = Math.max(chartView.axisY().max,weatherObj.tempMaxC);
186 valueAxisX.min = 0;
187 valueAxisX.min = 0;
187 valueAxisX.max = Number(i) + 1;
188 valueAxisX.max = Number(i) + 1;
188
189
189 // Set the x-axis labels to the dates of the forecast
190 // Set the x-axis labels to the dates of the forecast
190 var xLabels = barCategoriesAxis.categories;
191 var xLabels = barCategoriesAxis.categories;
191 xLabels[Number(i)] = weatherObj.date.substring(5, 10);
192 xLabels[Number(i)] = weatherObj.date.substring(5, 10);
192 barCategoriesAxis.categories = xLabels;
193 barCategoriesAxis.categories = xLabels;
193 barCategoriesAxis.visible = true;
194 barCategoriesAxis.visible = true;
194 barCategoriesAxis.min = 0;
195 barCategoriesAxis.min = 0;
195 barCategoriesAxis.max = xLabels.length - 1;
196 barCategoriesAxis.max = xLabels.length - 1;
196 }
197 }
197 }
198 }
198
199
199 }
200 }
General Comments 0
You need to be logged in to leave comments. Login now