Ubuntu – How to create charts in QML

application-developmentqmlubuntu-sdkubuntu-touch

I'd like to add to my application a page with not only raw figures but also eye friendly charts to display data.

Is there a native component or a third-party plugin I could use to create such elements in QML?

I'm looking for an open source solution that ideally will not only work on ubuntu-touch but on a desktop system as well.

Best Answer

You can use QChart.js - QML bindings for Charts.js (a simple HTML5 Charts javascript library using the canvas element)

enter image description here

I forked the project here to support resize events (for a desktop use). I basically need to reset the canvas context to allow resize events to properly redraw the surface with an updated window size (See http://qt-project.org/forums/viewthread/37313)

QML example:

enter image description here

The following snippet creates the above pie chart page:

import QtQuick 2.0
import QtQuick.Layouts 1.1
import Ubuntu.Components 0.1
import "."
import "QChart.js" as Charts

MainView {
    id: root
    width: units.gu(50)
    height: units.gu(80)

    PageStack {
        id: pageStack
        Component.onCompleted: push(page0)

        Page {
            id: page0
            title: i18n.tr("Test Results")

            ColumnLayout {
                spacing: units.gu(2)
                anchors.margins: units.gu(2);
                anchors.fill: parent

                Label {
                    fontSize: "x-large"
                    text: "Summary"
                }

                Chart {
                    id: chart_pie;
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    chartAnimated: true;
                    chartAnimationEasing: Easing.Linear;
                    chartAnimationDuration: 1000;
                    chartType: Charts.ChartType.PIE;
                    chartOptions: {"segmentStrokeColor": "#ECECEC"};
                    chartData: [
                        {value: 15, color: "#6AA84F"},
                        {value:  3, color: "#DC3912"},
                        {value:  5, color: "#FF9900"}];
                }

                Column {
                    id: legend
                    Row {
                        spacing: units.gu(1)
                        Text {
                            text: "█"
                            color:"#6AA84F"
                        }
                        Text {
                            text: "15 tests passed"
                        }
                    }
                    Row {
                        spacing: units.gu(1)
                        Text {
                            text: "█"
                            color:"#DC3912"
                        }
                        Text {
                            text: "3 tests failed"
                        }
                    }
                    Row {
                        spacing: units.gu(1)
                        Text {
                            text: "█"
                            color:"#FF9900"
                        }
                        Text {
                            text: "5 tests skipped"
                        }
                    }
                }

                Button {
                    id: button
                    Layout.fillWidth: true
                    color: "#009E0F";
                    text: "Save detailed report";
                    font.bold: true;
                    onClicked: {
                        button.color = "#009E0F"
                        chart_pie.repaint();
                    }
                }
            }
        }
    }
}

Related Solutions

Ubuntu – Saving user settings in QML/JS

You have a couple of options, you can use a LocalStorage to create a local sqlite database to keep your settings in. Or you can use the (still very alpha-stage) U1DB component, which will still use a local sqlite database, but also allows you to sync your settings database between the user's different machines/devices.

Ubuntu – How to create in QML a table of TextInput boxes with background

To get a background with such elements, prefer the TextField component instead (I suggested a similar usage in this answer).

enter image description here

The corresponding code:

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

MainView {
    id: main
    width: 400
    height: 300

    Column {
        spacing: units.gu(2)
        anchors.centerIn: parent
        TextInput {
            text: "default TextInput"
            cursorVisible: false
            width: main.width - units.gu(25)
        }
        TextField {
            placeholderText: "default TextField"
            width: main.width - units.gu(25)
        }
        TextField {
            placeholderText: "TextField with background"
            width: main.width - units.gu(25)
            text: "TextField with background"
            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    radius: 5
                    color: "orange"
                    implicitWidth: 100
                    implicitHeight: 24
                    border.color: "#333"
                    border.width: 1
                }
            }
        }
    }
}

Best Answer

Related Solutions

Ubuntu – Saving user settings in QML/JS

Ubuntu – How to create in QML a table of TextInput boxes with background

Related Question