##// END OF EJS Templates
Documentation: QML demos, bar screens, legend detach screen
Tero Ahola -
r1380:ae04ff07a29b
parent child
Show More
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
@@ -26,15 +26,13 Rectangle {
26 property int __explodedIndex: -1
26 property int __explodedIndex: -1
27 property variant otherSlice: 0
27 property variant otherSlice: 0
28
28
29 //![1]
29 ChartView {
30 ChartView {
30 id: chart
31 id: chart
31 title: "Top-5 car brand shares in Finland"
32 title: "Top-5 car brand shares in Finland"
32 anchors.fill: parent
33 anchors.fill: parent
33 theme: ChartView.ChartThemeLight
34 legend.alignment: Qt.AlignBottom
34 legend.alignment: Qt.AlignBottom
35 animationOptions: ChartView.SeriesAnimations
36
35
37 // If you have static data, you can simply use the PieSlice API
38 PieSeries {
36 PieSeries {
39 id: pieSeries
37 id: pieSeries
40 onClicked: {
38 onClicked: {
@@ -47,6 +45,7 Rectangle {
47 PieSlice { label: "Volvo"; value: 6.8 }
45 PieSlice { label: "Volvo"; value: 6.8 }
48 }
46 }
49 }
47 }
48 //![1]
50
49
51 Component.onCompleted: {
50 Component.onCompleted: {
52 // You can also add slices dynamically
51 // You can also add slices dynamically
@@ -24,11 +24,10 import QtCommercial.Chart 1.0
24 Rectangle {
24 Rectangle {
25 anchors.fill: parent
25 anchors.fill: parent
26
26
27 //![1]
27 ChartView {
28 ChartView {
28 title: "Line&Spline"
29 title: "Line&Spline"
29 anchors.fill: parent
30 anchors.fill: parent
30 theme: ChartView.ChartThemeBrownSand
31 animationOptions: ChartView.NoAnimation
32
31
33 LineSeries {
32 LineSeries {
34 name: "Line"
33 name: "Line"
@@ -52,4 +51,5 Rectangle {
52 XyPoint { x: 4.1; y: 3.1 }
51 XyPoint { x: 4.1; y: 3.1 }
53 }
52 }
54 }
53 }
54 //![1]
55 }
55 }
@@ -24,10 +24,10 import QtCommercial.Chart 1.0
24 Rectangle {
24 Rectangle {
25 anchors.fill: parent
25 anchors.fill: parent
26
26
27 //![1]
27 ChartView {
28 ChartView {
28 title: "NHL All-Star Team Players"
29 title: "NHL All-Star Team Players"
29 anchors.fill: parent
30 anchors.fill: parent
30 theme: ChartView.ChartThemeHighContrast
31 axisXLabels: ["0", "2000", "1", "2001", "2", "2002", "3", "2003", "4", "2004", "5", "2005",
31 axisXLabels: ["0", "2000", "1", "2001", "2", "2002", "3", "2003", "4", "2004", "5", "2005",
32 "6", "2006", "7", "2007", "8", "2008", "9", "2009", "10", "2010", "11", "2011"]
32 "6", "2006", "7", "2007", "8", "2008", "9", "2009", "10", "2010", "11", "2011"]
33
33
@@ -61,11 +61,9 Rectangle {
61 XyPoint { x: 10; y: 0 }
61 XyPoint { x: 10; y: 0 }
62 XyPoint { x: 11; y: 0 }
62 XyPoint { x: 11; y: 0 }
63 }
63 }
64 onClicked: {
65 color = "red";
66 borderColor = "black";
67 }
68 }
64 }
65 // ...
66 //![1]
69
67
70 AreaSeries {
68 AreaSeries {
71 id: swedish
69 id: swedish
@@ -24,12 +24,10 import QtCommercial.Chart 1.0
24 Rectangle {
24 Rectangle {
25 anchors.fill: parent
25 anchors.fill: parent
26
26
27 //![1]
27 ChartView {
28 ChartView {
28 title: "Scatters"
29 title: "Scatters"
29 anchors.fill: parent
30 anchors.fill: parent
30 theme: ChartView.ChartThemeBlueCerulean
31 axisX.max: 4
32 axisY.max: 4
33
31
34 ScatterSeries {
32 ScatterSeries {
35 id: scatter1
33 id: scatter1
@@ -45,6 +43,8 Rectangle {
45
43
46 ScatterSeries {
44 ScatterSeries {
47 name: "Scatter2"
45 name: "Scatter2"
46 // ...
47 //![1]
48 XyPoint { x: 2.0; y: 2.0 }
48 XyPoint { x: 2.0; y: 2.0 }
49 XyPoint { x: 2.0; y: 2.1 }
49 XyPoint { x: 2.0; y: 2.1 }
50 XyPoint { x: 2.07; y: 2.05 }
50 XyPoint { x: 2.07; y: 2.05 }
@@ -24,10 +24,10 import QtCommercial.Chart 1.0
24 Rectangle {
24 Rectangle {
25 anchors.fill: parent
25 anchors.fill: parent
26
26
27 //![1]
27 ChartView {
28 ChartView {
28 title: "Bar series"
29 title: "Bar series"
29 anchors.fill: parent
30 anchors.fill: parent
30 theme: ChartView.ChartThemeLight
31 legend.alignment: Qt.AlignBottom
31 legend.alignment: Qt.AlignBottom
32 axisXLabels: ["0", "2007", "1", "2008", "2", "2009", "3", "2010", "4", "2011", "5", "2012"]
32 axisXLabels: ["0", "2007", "1", "2008", "2", "2009", "3", "2010", "4", "2011", "5", "2012"]
33
33
@@ -37,4 +37,5 Rectangle {
37 BarSet { name: "James"; values: [3, 5, 8, 13, 5, 8] }
37 BarSet { name: "James"; values: [3, 5, 8, 13, 5, 8] }
38 }
38 }
39 }
39 }
40 //![1]
40 }
41 }
@@ -44,12 +44,12 Rectangle {
44
44
45 Rectangle {
45 Rectangle {
46 height: 35
46 height: 35
47 width: 55
47 width: 60
48 color: "grey"
48 color: "#c8955c"
49 radius: 5
49 radius: 5
50 Text {
50 Text {
51 anchors.centerIn: parent
51 anchors.centerIn: parent
52 text: "previous"
52 text: "<"
53 }
53 }
54 MouseArea {
54 MouseArea {
55 anchors.fill: parent
55 anchors.fill: parent
@@ -64,12 +64,12 Rectangle {
64 }
64 }
65 Rectangle {
65 Rectangle {
66 height: 35
66 height: 35
67 width: 55
67 width: 60
68 color: "grey"
68 color: "#c8955c"
69 radius: 5
69 radius: 5
70 Text {
70 Text {
71 anchors.centerIn: parent
71 anchors.centerIn: parent
72 text: "next"
72 text: ">"
73 }
73 }
74 MouseArea {
74 MouseArea {
75 anchors.fill: parent
75 anchors.fill: parent
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
1 NO CONTENT: modified file, binary diff hidden
NO CONTENT: modified file, binary diff hidden
@@ -3,5 +3,25
3 \title Qml charts demo
3 \title Qml charts demo
4 \subtitle
4 \subtitle
5
5
6 This is a basic demonstration how to use the different chart types by using qml.
6 This is a basic demonstration how to use the different chart types by using qml. Creating each chart type begins
7 with creation of a ChartView. For example to create a pie, we use the PieSeries API together with a few PieSlices:
8 \snippet ../demos/qmlchart/qml/qmlchart/View1.qml 1
9 \image demos_qmlchart1.png
10
11 To create a chart with line and spline series:
12 \snippet ../demos/qmlchart/qml/qmlchart/View2.qml 1
13 \image demos_qmlchart2.png
14
15 Then we create a chart that illustrates the success of Russian, Swedish and Finnish ice-hockey players in the
16 NHL All-Star player selections by using three area series:
17 \snippet ../demos/qmlchart/qml/qmlchart/View3.qml 1
18 \image demos_qmlchart3.png
19
20 Then couple of scatter series:
21 \snippet ../demos/qmlchart/qml/qmlchart/View4.qml 1
22 \image demos_qmlchart4.png
23
24 And finally a bar series:
25 \snippet ../demos/qmlchart/qml/qmlchart/View5.qml 1
26 \image demos_qmlchart5.png
7 */
27 */
@@ -6,6 +6,8
6 This example shows how to detach legend from chart and how to attach it back. By default the chart
6 This example shows how to detach legend from chart and how to attach it back. By default the chart
7 draws the legend inside same view with the chart. In some cases user may want to draw legend to somewhere else. To make this possible the legend can be detached from the chart. Detaching means that chart doesn't draw the legend or try to change it's layout. Detached can then be drawn where user wants, for example in different graphics scene. In this example we do so.
7 draws the legend inside same view with the chart. In some cases user may want to draw legend to somewhere else. To make this possible the legend can be detached from the chart. Detaching means that chart doesn't draw the legend or try to change it's layout. Detached can then be drawn where user wants, for example in different graphics scene. In this example we do so.
8
8
9 \image examples_legend_detach.png
10
9 First we create our chart as usual.
11 First we create our chart as usual.
10
12
11 \snippet ../examples/legend/mainwidget.cpp 1
13 \snippet ../examples/legend/mainwidget.cpp 1
General Comments 0
You need to be logged in to leave comments. Login now