From a50ddbbd8cd86c5002985729c64201515b72b478 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomi=20Korpip=C3=A4=C3=A4?= Date: Fri, 13 Dec 2013 11:21:48 +0200 Subject: Docs for qmlbars updated Task-number: QTRD-2635 Change-Id: I0b7e22dcf568f1ceb43dd94c0cc1e64ea6499115 Change-Id: I0b7e22dcf568f1ceb43dd94c0cc1e64ea6499115 Reviewed-by: Miikka Heikkinen --- examples/qmlbars/doc/images/qmlbars-example.png | Bin 139958 -> 99784 bytes examples/qmlbars/doc/src/qmlbars.qdoc | 37 +++++++++++++-------- examples/qmlbars/qml/qmlbars/main.qml | 4 +++ .../qmlsurface/doc/images/qmlsurface-example.png | Bin 150848 -> 168723 bytes 4 files changed, 27 insertions(+), 14 deletions(-) diff --git a/examples/qmlbars/doc/images/qmlbars-example.png b/examples/qmlbars/doc/images/qmlbars-example.png index 159b9b7c..00fb4a4f 100644 Binary files a/examples/qmlbars/doc/images/qmlbars-example.png and b/examples/qmlbars/doc/images/qmlbars-example.png differ diff --git a/examples/qmlbars/doc/src/qmlbars.qdoc b/examples/qmlbars/doc/src/qmlbars.qdoc index bb76d398..d56253d0 100644 --- a/examples/qmlbars/doc/src/qmlbars.qdoc +++ b/examples/qmlbars/doc/src/qmlbars.qdoc @@ -27,10 +27,9 @@ \image qmlbars-example.png - TODO: **This example is no longer about remapping, as multiple series are used instead** - The interesting thing about this example is remapping the data, so we concentrate on that - and skip explaining the basic Bars3D functionality - for more detailed QML example documentation, - see \l{Qt Quick 2 Scatter Example}. + The interesting thing about this example is switching series and displaying more than one series + at once. We'll concentrate on those and skip explaining the basic Bars3D functionality - for + more detailed QML example documentation, see \l{Qt Quick 2 Scatter Example}. \section1 Data @@ -38,17 +37,27 @@ The data is defined in a list model in \c data.qml like this: \snippet ../examples/qmlbars/qml/qmlbars/data.qml 0 - \dots 4 + \dots Each data item has four roles: year, month, income, and expenses. Years and months are natural to - map to rows and columns of a bar chart, but we can only show either income or expenses as the value. - We choose to default to showing expenses when we initialize the mapping item: + map to rows and columns of a bar chart, but we can only show either income or expenses as the + value. - \snippet ../examples/qmlbars/qml/qmlbars/data.qml 1 + Now we need to add the data to the Bars3D graph. We will create two Bar3DSeries inside it, + starting with a series for the income: - Final piece we need for handling data is the proxy to bring the model and mapping together: + \snippet ../examples/qmlbars/qml/qmlbars/main.qml 3 + \dots - \snippet ../examples/qmlbars/qml/qmlbars/data.qml 2 + The data is attached to the \c itemModel property of the ItemModelBarDataProxy inside the + series. + + Then we add another series for the expenses: + + \snippet ../examples/qmlbars/qml/qmlbars/main.qml 4 + \dots + + We use the \c visible property of the series to hide the second series for now. \section1 Custom axis labels @@ -58,12 +67,12 @@ \snippet ../examples/qmlbars/qml/qmlbars/axes.qml 0 - \section1 Using mapping + \section1 Switching series In the \c main.qml, we set up the graph and various UI elements. There are three interesting - mapping related code blocks we want to highlight here. The first one shows how to change the - visualized data from expenses to income, and vice versa, by simply changing the value role on the - ItemModelBarDataProxy item: + code blocks we want to highlight here. The first one shows how to change the + visualized data between income, expenses, and both, by simply changing visibility of the two + series: \snippet ../examples/qmlbars/qml/qmlbars/main.qml 0 diff --git a/examples/qmlbars/qml/qmlbars/main.qml b/examples/qmlbars/qml/qmlbars/main.qml index 768628f4..28412f51 100644 --- a/examples/qmlbars/qml/qmlbars/main.qml +++ b/examples/qmlbars/qml/qmlbars/main.qml @@ -99,6 +99,7 @@ Item { columnAxis: graphAxes.column valueAxis: graphAxes.income + //! [3] Bar3DSeries { id: barSeries itemLabelFormat: "Income for @colLabel, @rowLabel: @valueLabel" @@ -111,6 +112,7 @@ Item { columnRole: "month" valueRole: "income" } + //! [3] ColorGradient { id: barGradient @@ -121,6 +123,7 @@ Item { onSelectedBarChanged: handleSelectionChange(barSeries, position) } + //! [4] Bar3DSeries { id: secondarySeries visible: false @@ -134,6 +137,7 @@ Item { columnRole: "month" valueRole: "expenses" } + //! [4] ColorGradient { id: secondaryGradient diff --git a/examples/qmlsurface/doc/images/qmlsurface-example.png b/examples/qmlsurface/doc/images/qmlsurface-example.png index 7e23cdf2..57b2633b 100644 Binary files a/examples/qmlsurface/doc/images/qmlsurface-example.png and b/examples/qmlsurface/doc/images/qmlsurface-example.png differ -- cgit v1.2.3