Display Data with Charts

Showing data with charts is appealing and needed in a variety of apps. The Qt Charts module makes this super easy and comfortable.

Check out the documentation for a full list of features and available chart types: Qt Charts QML Types

A Simple Pie Chart

The following example shows a simple pie chart.

 import VPlayApps 1.0
 import QtQuick 2.0
 import QtCharts 2.0

 App {

   NavigationStack {

     Page {
       title: "Charts"

       ChartView {
         width: parent.width
         height: dp(300)
         theme: ChartView.ChartThemeBrownSand
         antialiasing: true

         PieSeries {
           id: pieSeries
           PieSlice { label: "eaten"; value: 94.9 }
           PieSlice { label: "not yet eaten"; value: 5.1 }
         }
       }
     }
   }
 }

Show an Animated Chart

Animating a chart is super easy. All you have to do is animate the displayed values and the chart will animate smoothly. In the following example, we use the Behavior type, to animate any change on the value used in the chart.

 import VPlayApps 1.0
 import QtQuick 2.0
 import QtCharts 2.0

 App {

   NavigationStack {

     Page {
       title: "Animated Chart"

       ChartView {
         id: chart
         width: parent.width
         height: dp(300)
         theme: ChartView.ChartThemeBrownSand
         antialiasing: true
         // This is the value we use to create our pie slices
         property real eaten: 95
         // With the Behavior, we can animate any change in the eaten value
         Behavior on eaten {
           NumberAnimation {
             duration: 500
             easing.type: Easing.InOutQuad
           }
         }

         PieSeries {
           id: pieSeries
           // The first slice displays the eaten value
           PieSlice {
             label: "eaten"
             value: chart.eaten
           }
           // The second slice displays the rest
           PieSlice {
             label: "not yet eaten"
             value: 100-chart.eaten
           }
         }

         AppButton {
           anchors.horizontalCenter: parent.horizontalCenter
           anchors.top: chart.bottom
           text: "Toggle"
           onClicked: {
             // We toggle the eaten value between 95 and 5
             chart.eaten = chart.eaten == 95 ? 5 : 95
           }
         }
       }
     }
   }
 }

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