Back to Blog home

Glowing Qt Charts

Published on Tuesday February 07, 2017 by Titta Heikkala in Charts Dev Loop | Comments

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.

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.

We are updating our comment system and you could face some issues. Please write to us at feedback@qt.io to report issues/bugs.