##// END OF EJS Templates
Initial support for x-axis labels in QML api
Tero Ahola -
r1157:bad1d525be80
parent child
Show More
@@ -29,6 +29,8 Rectangle {
29 29 anchors.fill: parent
30 30 theme: ChartView.ChartThemeHighContrast
31 31 legend: ChartView.LegendTop
32 axisXLabels: ["0", "2000", "1", "2001", "2", "2002", "3", "2003", "4", "2004", "5", "2005",
33 "6", "2006", "7", "2007", "8", "2008", "9", "2009", "10", "2010", "11", "2011"]
32 34
33 35 AreaSeries {
34 36 name: "Swedish"
@@ -19,6 +19,8
19 19 ****************************************************************************/
20 20
21 21 #include <QApplication>
22 #include <QDeclarativeContext>
23 #include <QDebug>
22 24 #include "qmlapplicationviewer.h"
23 25
24 26 Q_DECL_EXPORT int main(int argc, char *argv[])
@@ -27,8 +29,15 Q_DECL_EXPORT int main(int argc, char *argv[])
27 29
28 30 QmlApplicationViewer viewer;
29 31 viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
32 QString appKey;
33 if (argc > 1) {
34 appKey = argv[1];
35 qDebug() << "App key for worldweatheronline.com:" << appKey;
36 } else {
37 qWarning() << "No app key for worldweatheronline.com given. Using static test data instead of live data.";
38 }
39 viewer.rootContext()->setContextProperty("weatherAppKey", appKey);
30 40 viewer.setSource(QUrl("qrc:/qml/qmlweather/main.qml"));
31 41 viewer.showExpanded();
32
33 42 return app->exec();
34 43 }
@@ -31,23 +31,21 Rectangle {
31 31 anchors.bottom: weatherImageRow.top
32 32 anchors.left: parent.left
33 33 anchors.right: parent.right
34 title: "Weather forecast"
34 35 axisX.min: 0
35 axisX.max: 6
36 axisX.max: 4
36 37 axisY.min: 0
37 axisY.max: 50
38
39 // TODO: implement categories
40 // AxisCategory { axis: AxisCategory.AxisX; value: 0.0; label: "" }
41 // AxisCategory { axis: AxisCategory.AxisX; value: 1.0; label: "Today" }
42 // AxisCategory { axis: AxisCategory.AxisX; value: 2.0; label: "Tomorrow" }
43 // AxisCategory { axis: AxisCategory.AxisX; value: 3.0; label: "Day after tomorrow" }
38 axisY.max: 0
39 legend: ChartView.LegendTop
44 40
45 41 LineSeries {
46 42 model: maxModel
43 name: "Max. temperature"
47 44 }
48 45
49 46 LineSeries {
50 47 model: minModel
48 name: "Min. temperature"
51 49 }
52 50
53 51 // TODO: use a single base model with mappings instead of two separate xy models
@@ -80,33 +78,46 Rectangle {
80 78 }
81 79
82 80 Component.onCompleted: {
83 // TODO: use live data instead of hard coded example data
84 // in case an application key was defined for this demo app
85 // var xhr = new XMLHttpRequest;
86 // var appKey = "";
87 // xhr.open("GET", "http://free.worldweatheronline.com/feed/weather.ashx?q=Jyv%c3%a4skyl%c3%a4,Finland&format=json&num_of_days=5&key=" + appKey");
88 // xhr.onreadystatechange = function() {
89 // if (xhr.readyState == XMLHttpRequest.DONE) {
90 // var a = JSON.parse(xhr.responseText);
91 // console.log("a: " + a);
92 // console.log("response: " + xhr.responseText);
93 // for (var b in a) {
94 // var o = a[b];
95 // console.log("o: " + o);
96 //// model.append({id: o.id, name: o.name, duration: o.duration});
97 // }
98 // }
99 // }
100 // xhr.send();
101
102 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\" } ] }}";
103 var a = JSON.parse(responseText);
104
105 for (var i in a.data.weather) {
106 var weatherObj = a.data.weather[i];
107 maxModel.append([Number(i) + 1, weatherObj.tempMaxC]);
108 minModel.append([Number(i) + 1, weatherObj.tempMinC]);
81 if (weatherAppKey != "") {
82 var xhr = new XMLHttpRequest;
83 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);
84 xhr.onreadystatechange = function() {
85 if (xhr.readyState == XMLHttpRequest.DONE) {
86 var a = JSON.parse(xhr.responseText);
87 parseWeatherData(a);
88 }
89 }
90 xhr.send();
91 } else {
92 // No app key for worldweatheronline.com given by the user -> use static data
93 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\" } ] }}";
94 var a = JSON.parse(responseText);
95 parseWeatherData(a);
96 }
97 }
98
99 function parseWeatherData(weatherData) {
100 for (var i in weatherData.data.weather) {
101 var weatherObj = weatherData.data.weather[i];
102
103 // Add min and max temperature values into models used by series
104 maxModel.append([Number(i), weatherObj.tempMaxC]);
105 minModel.append([Number(i), weatherObj.tempMinC]);
109 106 weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value});
107
108 // Update scale of the chart
109 while (chartView.axisY.min >= Number(weatherObj.tempMinC))
110 chartView.axisY.min = chartView.axisY.min - 10;
111 while (chartView.axisY.max <= Number(weatherObj.tempMaxC))
112 chartView.axisY.max = chartView.axisY.max + 10;
113
114 // Set the x-axis labels to the dates of the forecast
115 // TODO: the API could probably be more intuitive..
116 // Now it takes an array of strings: chartView.axisXLabels = ["value1", "label1", "value2", "label2", ...]
117 var xLabels = chartView.axisXLabels;
118 xLabels[Number(i) * 2] = i;
119 xLabels[(Number(i) * 2) + 1] = weatherObj.date.substring(5, 10);
120 chartView.axisXLabels = xLabels;
110 121 }
111 122 }
112 123
@@ -143,6 +143,31 QAxis *DeclarativeChart::axisY()
143 143 return m_chart->axisY();
144 144 }
145 145
146 QVariantList DeclarativeChart::axisXLabels()
147 {
148 QVariantList labels;
149 foreach (qreal value, m_chart->axisX()->categories()->values()) {
150 // qDebug() << "Label for" << value << "is" << m_chart->axisX()->categories()->label(value);
151 labels.append(value);
152 labels.append(m_chart->axisX()->categories()->label(value));
153 }
154 return labels;
155 }
156
157 void DeclarativeChart::setAxisXLabels(QVariantList list)
158 {
159 QVariant value(QVariant::Invalid);
160 foreach (QVariant element, list) {
161 if (value.isValid() && element.type() == QVariant::String) {
162 m_chart->axisX()->categories()->insert(value.toDouble(), element.toString());
163 value = QVariant(QVariant::Invalid);
164 } else {
165 if (element.canConvert(QVariant::Double))
166 value = element;
167 }
168 }
169 }
170
146 171 #include "moc_declarativechart.cpp"
147 172
148 173 QTCOMMERCIALCHART_END_NAMESPACE
@@ -40,6 +40,8 class DeclarativeChart : public QDeclarativeItem
40 40 Q_PROPERTY(ChartLegend legend READ legend WRITE setLegend)
41 41 Q_PROPERTY(QAxis *axisX READ axisX)
42 42 Q_PROPERTY(QAxis *axisY READ axisY)
43 // TODO: how to define axis labels? This is not very convenient
44 Q_PROPERTY(QVariantList axisXLabels READ axisXLabels WRITE setAxisXLabels)
43 45 Q_ENUMS(ChartLegend)
44 46
45 47 public:
@@ -72,6 +74,8 public:
72 74 ChartLegend legend();
73 75 QAxis *axisX();
74 76 QAxis *axisY();
77 QVariantList axisXLabels();
78 void setAxisXLabels(QVariantList list);
75 79
76 80 public:
77 81 // Extending QChart with DeclarativeChart is not possible because QObject does not support
General Comments 0
You need to be logged in to leave comments. Login now