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

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

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