Qml Polar Chart

This is a demonstration on how to use a polar chart in your QML application.

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

Using Polar Charts in Qt Quick Applications

We begin with a chart that has a spline series and a scatter series with random data. Both series use the same axes.

PolarChartView {
    title: "Two Series, Common Axes"
    anchors.fill: parent
    legend.visible: false
    antialiasing: true

    ValueAxis {
        id: axisAngular
        min: 0
        max: 20
        tickCount: 9
    }

    ValueAxis {
        id: axisRadial
        min: -0.5
        max: 1.5
    }

    SplineSeries {
        id: series1
        axisAngular: axisAngular
        axisRadial: axisRadial
        pointsVisible: true
    }

    ScatterSeries {
        id: series2
        axisAngular: axisAngular
        axisRadial: axisRadial
        markerSize: 10
    }
}

// Add data dynamically to the series
Component.onCompleted: {
    for (var i = 0; i <= 20; i++) {
        series1.append(i, Math.random());
        series2.append(i, Math.random());
    }
}

The next example shows a chart with some accurate historical data for which we need to use a DateTimeAxis and a AreaSeries.

PolarChartView {
    title: "Historical Area Series"
    anchors.fill: parent
    legend.visible: false
    antialiasing: true

    DateTimeAxis {
        id: axis1
        format: "yyyy MMM"
        tickCount: 13
    }
    ValueAxis {
        id: axis2
    }
    LineSeries {
        id: lowerLine
        axisAngular: axis1
        axisRadial: axis2

        // Please note that month in JavaScript months are zero based, so 2 means March
        XYPoint { x: toMsecsSinceEpoch(new Date(1950, 0, 1)); y: 15 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1962, 4, 1)); y: 35 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1970, 0, 1)); y: 50 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1978, 2, 1)); y: 75 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1987, 11, 1)); y: 102 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1992, 1, 1)); y: 132 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1998, 7, 1)); y: 100 }
        XYPoint { x: toMsecsSinceEpoch(new Date(2002, 4, 1)); y: 120 }
        XYPoint { x: toMsecsSinceEpoch(new Date(2012, 8, 1)); y: 140 }
        XYPoint { x: toMsecsSinceEpoch(new Date(2013, 5, 1)); y: 150 }
    }
    LineSeries {
        id: upperLine
        axisAngular: axis1
        axisRadial: axis2

        // Please note that month in JavaScript months are zero based, so 2 means March
        XYPoint { x: toMsecsSinceEpoch(new Date(1950, 0, 1)); y: 30 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1962, 4, 1)); y: 55 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1970, 0, 1)); y: 80 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1978, 2, 1)); y: 105 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1987, 11, 1)); y: 125 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1992, 1, 1)); y: 160 }
        XYPoint { x: toMsecsSinceEpoch(new Date(1998, 7, 1)); y: 140 }
        XYPoint { x: toMsecsSinceEpoch(new Date(2002, 4, 1)); y: 140 }
        XYPoint { x: toMsecsSinceEpoch(new Date(2012, 8, 1)); y: 170 }
        XYPoint { x: toMsecsSinceEpoch(new Date(2013, 5, 1)); y: 200 }
    }
    AreaSeries {
        axisAngular: axis1
        axisRadial: axis2
        lowerSeries: lowerLine
        upperSeries: upperLine
    }
}
// DateTimeAxis is based on QDateTimes so we must convert our JavaScript dates to
// milliseconds since epoch to make them match the DateTimeAxis values
function toMsecsSinceEpoch(date) {
    var msecs = date.getTime();
    return msecs;
}

And the final example with a chart that uses a CategoryAxis to make the data easier to understand.

PolarChartView {
    title: "Numerical Data for Dummies"
    anchors.fill: parent
    legend.visible: false
    antialiasing: true

    LineSeries {
        axisRadial: CategoryAxis {
            min: 0
            max: 30
            CategoryRange {
                label: "critical"
                endValue: 2
            }
            CategoryRange {
                label: "low"
                endValue: 7
            }
            CategoryRange {
                label: "normal"
                endValue: 12
            }
            CategoryRange {
                label: "high"
                endValue: 18
            }
            CategoryRange {
                label: "extremely high"
                endValue: 30
            }
        }

        axisAngular: ValueAxis {
            tickCount: 13
        }

        XYPoint { x: 0; y: 4.3 }
        XYPoint { x: 1; y: 4.1 }
        XYPoint { x: 2; y: 4.7 }
        XYPoint { x: 3; y: 3.9 }
        XYPoint { x: 4; y: 5.2 }
        XYPoint { x: 5; y: 5.3 }
        XYPoint { x: 6; y: 6.1 }
        XYPoint { x: 7; y: 7.7 }
        XYPoint { x: 8; y: 12.9 }
        XYPoint { x: 9; y: 19.2 }
    }
}

Files:

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support