Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Plot: Heat Map using Qt



  • Is there a way to create a chart type "Heat Map" like this image below using Qt?

    9f90abf5-1db3-42f4-b502-15a6cb501319-image.png

    In this image above, for each pixel point, I have 3 informations:

    • X position (time)
    • Y position (frequency)
    • Pixel color (intensity)

    How can I do that using Qt?


  • Lifetime Qt Champion

    @fem_dev One simple, but not most efficient solution would be simply to draw on a QWidget: you have x/y and the color and can use QPainter. To optimise you can draw once into a pixmap and then draw that pixmap on the widget.
    See https://doc.qt.io/qt-5/qpainter.html
    And https://doc.qt.io/qt-5/qwidget.html#paintEvent



  • @jsulm thank you! May be it can solve my problem.
    Do you have any ideas about how could I add X and Y axis to this QPainter class?
    Like the Hot Map image above, I need the scaled X and Y axis, axis labels and the right-side color palette intensity levels.

    Is there any way to join/mix the QChart class with this QPainter class to be possible to get the axis, labels, etc from QChart?


  • Lifetime Qt Champion

    @fem_dev said in Plot: Heat Map using Qt:

    Is there any way to join/mix the QChart class with this QPainter

    No, with QPainter you would need to hanlde axes and scaling by yourself. You should look for some dedicated libraries (not sure QChart does what you want).



  • @fem_dev

    I would suggest QDataVizualization.

    For example, with Q3DSurface you can set the x (time), z (frequency) and y (heat) values. The surface can be colored with your own color gradient.

    In general the graph results in a 3D object, which can be viewed dynamically. But you can also "freeze" the camera and preset it above the graph (to get your shown figure).

    Have a look at the examples.



  • @beecksche thank you!

    Well, now I saw 2 Qt possibilities:

    567e9cd5-0c33-4fe8-90dc-1580a73c6f37-image.png

    I opened the 3DSurface example described above using Qt Creator IDE and ran it.
    It opens ok, but I have no rotation interaction. So I just have the selection and the zoom mouse interaction.
    I read th Qt documentation (link here) and it said that:

    End users can interact with the rendered graph by using either the mouse or touch to rotate, zoom, or select data. 
    Graphs can be rotated freely by holding down the right mouse button and moving the mouse.
    

    In this example source-code I didn't found any references to the setRotationEnabled(bool enable) (described here)

    QUESTIONS
    a) What I have to do to get the rotation interaction working in this Qt3DSurface example?
    b) In the Qt3DSurface example, how can I set the graph start position to a view from top to down, to user see only X and Y axis (no z axis)?



  • @fem_dev

    For the camera preset have a look here. I would also enable the ortho projection.

    You can also disable the selection mode.



  • @beecksche thank you for your help...

    I don't know how to apply this setCameraPreset(Q3DCamera::CameraPreset preset) because, in this Qt3Surface example the surface variable doesn't have this setCameraPreset() method.

    How can I do that?



  • @fem_dev

    The function is part of the camera of the current scene:

    Q3DSurface *surface;
    surface->scene()->activeCamera()->setCameraPreset()
    

    https://doc.qt.io/qt-5/qtdatavisualization-scatter-example.html#setting-up-the-graph



  • @beecksche perfect! It works great! Thank you!

    Could you please help me a little bit more?
    In this post above, I said that:

    @fem_dev said in Plot: Heat Map using Qt:

    I read th Qt documentation (link here) and it said that:
    End users can interact with the rendered graph by using either the mouse or touch to rotate, zoom, or select data.
    Graphs can be rotated freely by holding down the right mouse button and moving the mouse.

    In this example source-code I didn't found any references to the setRotationEnabled(bool enable) (described here)

    QUESTION:
    a) What I have to do to get the rotation interaction working in this Qt3DSurface example?



  • @fem_dev I got it! Is a right-click event! Thank you all!



  • To finish my questions ins this post, I would like to compare the Qt3DSurface graphical result and my target graphical result:

    If I open the Qt 3DSurface example and use this:

    m_graph->scene()->activeCamera()->setCameraPreset(Q3DCamera::CameraPresetDirectlyAbove)
    

    and change the line:

    m_sqrtSinSeries->setDrawMode(QSurface3DSeries::DrawSurfaceAndWireframe);
    

    to:

    m_sqrtSinSeries->setDrawMode(QSurface3DSeries::DrawSurface);
    

    I got this graph output:

    795da9a1-1e2f-4fe6-b708-6d127c942dd6-image.png

    My "target image style" is:
    5a6bfdb4-ce4c-4fd7-9826-b10bf2a44049-image.png

    So, in the 3DSurface example the image appears divided in triangles, where each triangle have a different color. Because of this method, the final image result IS NOT so "well defined" (color smooth transition) and doesn't have a "high resolution appearance" like the "target image style" above.

    a) Is there a way to get the same "well defined pixel resolution" using Q3DSurface?
    b) The "target image" have a right-side color pallet. How can I do that in Qt using Q3DSurface?


Log in to reply