ScatterSeries marker shapes: brushFilename seems to be ignored?

peteispo

I'm trying to use different-shaped markers in a ChartView Scatter Series (2D), and I can see that there is a brushFilename option for te ScatterSeries that suggests it might be used to define the shape of the markers. There is very little documentation or example, except one C++ example that creates a brush to be used (https://doc.qt.io/qt-5/qtcharts-scatterchart-example.html)
That's not very helpful because it doesn't use a file as QML seems to expect, but it does suggest that what I want is possible...

So, what kind of file does brushFilename expect?
I've assumed SVG at the moment so that it can be coloured easily. I also noted that the C++ example initially sets the marker as a rectangle before setting the marker using the painted image, so I tried doing that in the QML, but all I get now is a rectangle instead of a circle.

Here is some test code:

ChartView {
    id: testChart
    height: (width * 9 / 16)
    anchors.right: parent.right
    anchors.left: parent.left
    title: "Test Chart"
    antialiasing: true
    ValueAxis {
        id: xTest
        min: 1
        max: 3
        tickCount: 6
    }
    ValueAxis {
        id: yTest
        min: 1
        max: 3
        tickCount: 6
    }
    ScatterSeries {
        name: "Test Data"
        markerShape: ScatterSeries.MarkerShapeRectangle
        brushFilename: "qrc:/images/hollow-heart.svg"
        pointsVisible: true
        axisX: xTest
        axisY: yTest
        XYPoint { x: 1.5; y: 1.5 }
        XYPoint { x: 1.5; y: 1.6 }
        XYPoint { x: 1.57; y: 1.55 }
        XYPoint { x: 1.8; y: 1.8 }
        XYPoint { x: 1.9; y: 1.6 }
        XYPoint { x: 2.1; y: 1.3 }
        XYPoint { x: 2.5; y: 2.1 }
    }
}

and the SVG for the image is

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" width="11.078282" height="10.149548" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="heart-hollow.svg">
  <metadata id="metadata4190">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:window-width="1680" inkscape:window-height="1021" id="namedview4188" showgrid="false" inkscape:zoom="1" inkscape:cx="-219.46677" inkscape:cy="7.9405471" inkscape:window-x="1920" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="svg2" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" />
  <defs id="defs4" />
  <path inkscape:connector-curvature="0" style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path2417" d="m 5.1813726,8.7039714 c -0.19539,-0.21895 -0.68326,-0.6458 -1.08416,-0.94855 -1.18784,-0.89702 -1.3495,-1.02684 -1.83179,-1.47094 -0.88912,-0.81871 -1.26672002,-1.64124 -1.26542,-2.75653 4.6e-4,-0.54445 0.0378,-0.7542 0.1902,-1.07512 0.25867,-0.54447 0.63971,-0.94905 1.12686,-1.19649 0.34504,-0.17526 0.51521,-0.25312 1.09139,-0.25631 0.60273,-0.003 0.72961,0.067 1.08416,0.26172 0.43155,0.23708 0.87573,0.74376 0.96755,1.10368 l 0.0567,0.2223 0.13985,-0.30616 c 0.79028,-1.7300801 3.31338,-1.7042001 4.19144,0.043 0.2785404,0.55426 0.3091204,1.73774 0.0621,2.40439 -0.32219,0.86962 -0.92735,1.5326 -2.32628,2.54855 -0.91744,0.66628 -1.95578,1.67438 -2.02806,1.81597 -0.0839,0.16436 -0.004,0.0258 -0.37457,-0.38951 z" />
  <g id="g2221" transform="translate(-187.68106,-354.57671)" style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none; stroke-opacity:1" />
</svg>

Yashpal

@peteispo said in ScatterSeries marker shapes: brushFilename seems to be ignored?:

markerShape: ScatterSeries.MarkerShapeRectangle

Then change markerShape to ScatterSeries.MarkerShapeCircle and readjust markerSize accordingly.

peteispo

@Yashpal I don't want a circle or a rectangle - I want a shape defined by the file given in brushFilename...

Yashpal

@peteispo
The documentation mentions only two shapes, a circle and rectangle for marker shape.
brushFilename is used as a brush on marker shape for the series, not to create shape.

Bob64

I realise this an old topic but I found it when I had the same question today as the OP. Despite the documentation saying - as @Yashpal points out - that only two shapes are available, nevertheless the official Qt example does show a different shape which has been obtained by setting the brush. However, the example is C++ and it is not clear if and how something similar could be done via the QML API.

PravinY

Instead of markershape as a circle or rectangle, is it possible to use custom image as markershape in scatter chart or any other qt chart? This is very useful feature in any chart

AllenMvi

@peteispo
Hi
For adding any icons or shapes(as png or svg) you need to create a 'QBrush' in c++ side and pass it to qml.

for example:
.h side:

public slots:
    QBrush chartBrush() const;

.cpp side:

QBrush GUI::chartBrush() const
{
    QBrush m_chartBrush;
    QPixmap texture("/home/allenmvi/Downloads/triangle_PNG112.png"); //or svg file
    int w = 30; //set width for your shape
    int h = w; //set height for your shape
    m_chartBrush.setTexture(texture.scaled(w,h,Qt::KeepAspectRatio));

    return m_chartBrush;
}

in qml side:

        ScatterSeries{
            id:scatterSery
            axisX: myAxisX
            axisY: myAxisY
            markerSize: 30
            name:"Scatter"
            borderColor: "transparent"
            brush: gui.chartBrush
            markerShape: ScatterSeries.MarkerShapeRectangle
        }

*Note: the useOpenGL property should be false , if it is true , scatter just read your QBrush color.