Glowing Qt Charts

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.