Titta Heikkala

Glowing Qt Charts

Published Tuesday February 7th, 2017
7 Comments on Glowing Qt Charts
Posted in Charts, Dev Loop

Have you ever had the need to visualize data graphically and add some ‘wow’-effect to it? I’m currently helping out with the development of a demo application, where we have some charts to visualize data received from sensors. Naturally, the designer wants the charts to be visually appealing.

At the beginning we had basic graphs to show the data, one of them being temperature. We used LineSeries QML type from Qt Charts with dynamic for this.

Temperature represented as LineSeries.

Now to make the graph more polished we decided to hide the labels and the grids drawn to the chart and make the background transparent. This way we had only the series drawn to the area reserved for the graph. To achieve this we modified our ChartView with two axis and a series to the following:

ChartView {
    id: chartView
    backgroundColor: "transparent"
    legend.visible: false

    ValueAxis {
        id: valueAxisX
        min: 0
        max: maxNumOfTempReadings + 1
        visible: false
    }

    ValueAxis {
        id: valueAxisY
        min: minimum
        max: maximum
        visible: false
    }

    LineSeries {
        id: avgTempSeries
        axisX: valueAxisX
        axisY: valueAxisY
        color: chartColor
    }
}

But having just the series was no fun. With the main background of the application and the temperature values we had a chart that looked like in the following picture.

Temperature chart without effects.

As the design specification had some glow on elements in the UI, we decided to give a try to some graphical effects QML has to offer, more precisely the Glow effect. We added the Glow element to the same level with the ChartView (Glow and ChartView elements are siblings).

Glow {
    anchors.fill: chartView
    radius: 18
    samples: 37
    color: "#15bdff"
    source: chartView
}

With the above code it was very easy to add some glow to the chart series. The same chart as shown in the beginning with the mentioned changes and some additional elements ended up looking like in the following picture.

Temperature graph with a glowing series.

Want to spice up your charts? Go and give it a try, it’s really easy.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Charts, Dev Loop

7 comments

Alex L. says:

What about supporting it in SVG renderer too? There were a lot of complains during these years about Qt not supporting blur in rendering SVGs, while Gtk, WebKit and Gecko does it. And it’s a big lack when you draw icons with blur for shadows and the only toolkit that doesn’t display them is Qt…

Richard says:

The QML “Glow” is a Gaussian blur of the alpha channel of the rendered source image. It is only feasible with a powerful OpenGL(ES) GPU behind it.

It’s a seriously expensive operation, requiring the GPU to make many render passes for the blurred element.
– In the example above, 39 passes – first to render the source Chart to a texture, 37 blur passes, then the final render pass to put the result onto the screen.

In general one should ensure that you use the absolute minimum number of samples possible.
However, the bright side is that the GPU load depends entirely on the absolute pixel size of the blurred item – it doesn’t matter how complex the item is.

Jereme says:

Very cool trick. I would love to see more posts like this, about different usages of Charts, and visual design polish. Does this work even if the LineSeries uses OpenGL?

Titta Heikkala Titta Heikkala says:

Nice to hear you liked this post 🙂
The glow effect works also with a LineSeries that uses OpenGL – I just tested it.

Jörn-Ingo Weigert says:

I would like to see from which source (image) you start and see the resulting effect, but sadly the images included in this blog article doesnt show up.

Kind regards,

Titta Heikkala Titta Heikkala says:

I’m sorry to hear the images are not showing up for you. We have checked them here with several browsers and devices and everything seems to be working ok. If the problem persist, please check the browser you are using and related settings to solve the issue.

sap says:

awesome stuff has always, Qt is freaking sweet, thanks digia for all your hard work!

Commenting closed.

Get started today with Qt Download now