How to do graph with QML

jjew.isaraporn · wrote on 19 May 2013, 08:35

Jens · wrote on 19 May 2013, 10:08

Qt 5 comes with a "Canvas":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-canvas.html element where you can do simple painting, similar to html 5.

utcenter · wrote on 19 May 2013, 10:43

You can just as well use a custom QQuickPaintedItem with QPainter painting on top of it. I generally find QPainter easier to work with than the canvas, probably because I've used QPainter far more.

The canvas element was created to target HTML5 developers, so the API is modeled after the html canvas rather than QPainter, which IMO is the better drawing API.

jjew.isaraporn · wrote on 19 May 2013, 12:23

Can you give me the example ?

utcenter · wrote on 19 May 2013, 12:51

http://qt-project.org/doc/qt-5.0/qtquick/customitems-painteditem.html
http://qt-project.org/doc/qt-5.0/qtquick/canvas.html

Sadly, the documentation for this examples still seems to be broken, but you can see how its done in the files.

JKSH · wrote on 19 May 2013, 14:10

Here are the fixed versions:
http://doc-snapshot.qt-project.org/qt5-stable/qtquick/customitems-painteditem.html
http://doc-snapshot.qt-project.org/qt5-stable/qtquick/canvas.html

Edit: You can use "Qwt":http://qwt.sourceforge.net/ widgets to draw graphs in C++, but there is nothing similar in QML yet. You need to write your own graphing code -- read points, and then draw lines between the points

chrisadams · wrote on 21 May 2013, 01:08

See https://qt.gitorious.org/qt/qtdeclarative/trees/stable/examples/quick/demos/stocqt for the StocQt example which uses the canvas to paint graphs and do other interesting things.

Cheers,
Chris.

JKSH · wrote on 21 May 2013, 01:31

Great example, Chris! I forgot about that.

You can find a screenshot at http://doc-snapshot.qt-project.org/qt5-stable/qtquick/demos-stocqt.html . The chart code is in StockChart.qml

mehrdad · wrote on 13 Dec 2014, 04:08

here it is...
http://jwintz.me/blog/2014/02/15/qchart-dot-js-qml-binding-for-chart-dot-js/

mehrdad · wrote on 13 Dec 2014, 04:08

here it is...
http://jwintz.me/blog/2014/02/15/qchart-dot-js-qml-binding-for-chart-dot-js/

mehrdad · wrote on 14 Jan 2015, 14:10

but this is a bit complex
this is a good runable example that help me very much...
i hope help you too
https://github.com/shuirna/QMLChartJs

mehrdad · wrote on 14 Jan 2015, 14:10

but this is a bit complex
this is a good runable example that help me very much...
i hope help you too
https://github.com/shuirna/QMLChartJs