HG_REPOSITORIES/LPP/INSTRUMENTATION/USERS/JEANDET/qtcharts Commit - r1157:bad1d525be80

Initial support for x-axis labels in QML api

Tero Ahola -

r1157:bad1d525be80

parent child

Context file:

r1157:bad1d525be80

Collapse all files

demos/qmlchart/qml/qmlchart/View3.qml +2 0

                     anchors.fill: parent
                     theme: ChartView.ChartThemeHighContrast
                     legend: ChartView.LegendTop
+                    axisXLabels: ["0", "2000", "1", "2001", "2", "2002", "3", "2003", "4", "2004", "5", "2005",
+                        "6", "2006", "7", "2007", "8", "2008", "9", "2009", "10", "2010", "11", "2011"]
                     AreaSeries {
                         name: "Swedish"

demos/qmlweather/main.cpp +10 -1

             ****************************************************************************/
             #include <QApplication>
+            #include <QDeclarativeContext>
+            #include <QDebug>
             #include "qmlapplicationviewer.h"
             Q_DECL_EXPORT int main(int argc, char *argv[])
                 QmlApplicationViewer viewer;
                 viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
+                QString appKey;
+                if (argc > 1) {
+                    appKey = argv[1];
+                    qDebug() << "App key for worldweatheronline.com:" << appKey;
+                } else {
+                    qWarning() << "No app key for worldweatheronline.com given. Using static test data instead of live data.";
+                }
+                viewer.rootContext()->setContextProperty("weatherAppKey", appKey);
                 viewer.setSource(QUrl("qrc:/qml/qmlweather/main.qml"));
                 viewer.showExpanded();
                 return app->exec();
             }

demos/qmlweather/qml/qmlweather/main.qml +45 -34

@@ -31,23 +31,21 Rectangle {
31	anchors.bottom: weatherImageRow.top	31	anchors.bottom: weatherImageRow.top
32	anchors.left: parent.left	32	anchors.left: parent.left
33	anchors.right: parent.right	33	anchors.right: parent.right
		34	title: "Weather forecast"
34	axisX.min: 0	35	axisX.min: 0
35	axisX.max: 6	36	axisX.max: 4
36	axisY.min: 0	37	axisY.min: 0
37	axisY.max: 50	38	axisY.max: 0
38		39	legend: ChartView.LegendTop
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" }
44		40
45	LineSeries {	41	LineSeries {
46	model: maxModel	42	model: maxModel
		43	name: "Max. temperature"
47	}	44	}
48		45
49	LineSeries {	46	LineSeries {
50	model: minModel	47	model: minModel
		48	name: "Min. temperature"
51	}	49	}
52		50
53	// TODO: use a single base model with mappings instead of two separate xy models	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	Component.onCompleted: {	80	Component.onCompleted: {
83	// TODO: use live data instead of hard coded example data	81	if (weatherAppKey != "") {
84	// in case an application key was defined for this demo app	82	var xhr = new XMLHttpRequest;
85	// 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);
86	// var appKey = "";	84	xhr.onreadystatechange = function() {
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");	85	if (xhr.readyState == XMLHttpRequest.DONE) {
88	// xhr.onreadystatechange = function() {	86	var a = JSON.parse(xhr.responseText);
89	// if (xhr.readyState == XMLHttpRequest.DONE) {	87	parseWeatherData(a);
90	// var a = JSON.parse(xhr.responseText);	88	}
91	// console.log("a: " + a);	89	}
92	// console.log("response: " + xhr.responseText);	90	xhr.send();
93	// for (var b in a) {	91	} else {
94	// var o = a[b];	92	// No app key for worldweatheronline.com given by the user -> use static data
95	// console.log("o: " + o);	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\" } ] }}";
96	//// model.append({id: o.id, name: o.name, duration: o.duration});	94	var a = JSON.parse(responseText);
97	// }	95	parseWeatherData(a);
98	// }	96	}
99	// }	97	}
100	// xhr.send();	98
101		99	function parseWeatherData(weatherData) {
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\" } ] }}";	100	for (var i in weatherData.data.weather) {
103	var a = JSON.parse(responseText);	101	var weatherObj = weatherData.data.weather[i];
104		102
105	for (var i in a.data.weather) {	103	// Add min and max temperature values into models used by series
106	var weatherObj = a.data.weather[i];	104	maxModel.append([Number(i), weatherObj.tempMaxC]);
107	maxModel.append([Number(i) + 1, weatherObj.tempMaxC]);	105	minModel.append([Number(i), weatherObj.tempMinC]);
108	minModel.append([Number(i) + 1, weatherObj.tempMinC]);
109	weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value});	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

qmlplugin/declarativechart.cpp +25 0

@@ -143,6 +143,31 QAxis *DeclarativeChart::axisY()
143	return m_chart->axisY();	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	#include "moc_declarativechart.cpp"	171	#include "moc_declarativechart.cpp"
147		172
148	QTCOMMERCIALCHART_END_NAMESPACE	173	QTCOMMERCIALCHART_END_NAMESPACE

qmlplugin/declarativechart.h +4 0

                 Q_PROPERTY(ChartLegend legend READ legend WRITE setLegend)
                 Q_PROPERTY(QAxis *axisX READ axisX)
                 Q_PROPERTY(QAxis *axisY READ axisY)
+                // TODO: how to define axis labels? This is not very convenient
+                Q_PROPERTY(QVariantList axisXLabels READ axisXLabels WRITE setAxisXLabels)
                 Q_ENUMS(ChartLegend)
             public:
                 ChartLegend legend();
                 QAxis *axisX();
                 QAxis *axisY();
+                QVariantList axisXLabels();
+                void setAxisXLabels(QVariantList list);
             public:
                 // Extending QChart with DeclarativeChart is not possible because QObject does not support

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages