Chart.js: chart.js version 2.0 is not working in QML canvas

[dhurkadevi]

I am trying to integrate Chart.js latest version 2.7 to QML canvas.

Below is the code i am using to draw bar chart.

import QtQuick 2.6
import QtQuick.Window 2.2

import "Chart.bundle.js" as Chart
Window {
    id:qmlwindow
    visible: true
    width: 400
    height: 400
    title: qsTr("Pie Chart")
Canvas {
        id: canvas
        width: 400
        height: 400

        onPaint: {
            // Get drawing context
            var context = getContext("2d");

            var myChart = new Chart(context, {
              type: 'bar',
              data: {
                labels: ["M", "T", "W", "T", "F", "S", "S"],
                datasets: [{
                  label: 'apples',
                  backgroundColor: "rgba(153,255,51,1)",
                  data: [12, 19, 3, 17, 28, 24, 7],
                }, {
                  label: 'oranges',
                  backgroundColor: "rgba(255,153,0,1)",
                  data: [30, 29, 5, 5, 20, 3, 10],
                }]
              }
            });
            myChart.draw();
}
}
}

But bar chart is not drawing in the window. It will be very helpful you have any idea about this.

Note:
I commented window and animation parts in the Chart.js. Because window is not supported in QML canvas.

Thanks In advance

Edit(SB): code formatting

[simonbrunel]

I started integrating Chart.js to QML and that was the reason I'm now part of the Chart.js team :). The platform stuff has been actually implemented to allow these kind of integration. Since, I switched project and stopped this QML plugin, but if some are interested in testing my wip, I can try to share it!

[simonbrunel]

Though, that was before Qt released QtCharts, why not using it instead of Chart.js?

[dhurkadevi]

I want new Chart.js (2.7)version need to integrate to QML. I tried to copy the js files in the Qt project and comment window and animation related code in the js file. Because Qml canvas not supported window and HTML animation.

I created context 2d canvas and pass to create charts like below.

import QtQuick 2.6

import QtQuick.Window 2.2

import "Chart.bundle.js" as Chart

Window {

id:qmlwindow

visible: true

width: 400

height: 400

title: qsTr("Pie Chart")

Canvas {

    id: canvas

    width: 400

    height: 400


    onPaint: {

        // Get drawing context

        var context = getContext("2d");

var config = {

                type: 'doughnut',

                data: {

                    datasets: [{

                        data: [

                    67,89,45

                        ],

                        backgroundColor: [

                            "red",

                            "green",

                            "blue"

                        ]

                    }]

                }

            };


   var chart = new Chart(context,config);

   chart.draw();



    }

}

But nothing will draw in the QML window. I am using Chart.js version 2.7

Can you please let me know what i am doing wrong and how can i fix the issue.

Thanks In advance

---

From: Simon Brunel [e-mail]
Sent: Friday, November 17, 2017 7:30 PM
To: chartjs/Chart.js
Cc: Dhurka Devi; Author
Subject: Re: [chartjs/Chart.js] chart.js version 2.0 is not working in QML canvas (#4964)

I started integrating Chart.js to QML and that was the reason<2268> I'm now part of the Chart.js team :). The platform stuffhttps://chartjs.gitbooks.io/proposals/content/Platform.html#platform-implementations has been actually implemented to allow these kind of integration. Since, I switched project and stopped this QML plugin, but if some are interested in testing my wip, I can try to share it!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/chartjs/Chart.js/issues/4964#issuecomment-345250896, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AgML5_bKF-zZ3zQXEz0xvqV0w6zVEwSzks5s3ZFpgaJpZM4QiCoU.

[dhurkadevi]

Can you please share share the code. I will test the code in the Qt QML application.

---

From: Simon Brunel [e-mail]
Sent: Friday, November 17, 2017 7:30 PM
To: chartjs/Chart.js
Cc: Dhurka Devi; Author
Subject: Re: [chartjs/Chart.js] chart.js version 2.0 is not working in QML canvas (#4964)

I started integrating Chart.js to QML and that was the reason<2268> I'm now part of the Chart.js team :). The platform stuffhttps://chartjs.gitbooks.io/proposals/content/Platform.html#platform-implementations has been actually implemented to allow these kind of integration. Since, I switched project and stopped this QML plugin, but if some are interested in testing my wip, I can try to share it!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/chartjs/Chart.js/issues/4964#issuecomment-345250896, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AgML5_bKF-zZ3zQXEz0xvqV0w6zVEwSzks5s3ZFpgaJpZM4QiCoU.

[renathoaz]

I'm trying to use Chart.js in Qml also, and it return ReferenceError: window is not defined and TypeError.
is Chart.js compatible with qml ? How can I make it work on qml ?

[pnudupa]

@simonbrunel - I want to use a Chart.js based QML graph solution because, QtCharts is GPL and I want to use plots in a non-GPL project. The QChart.js project doesnt yet support scatter plots and I need to use it in a project. I was wondering if I could test your WIP?

[renom]

Is there any chance of adding QML canvas support?

[simonbrunel]

@pnudupa I tried to revive my work on Chart.js/QML but it's very unstable and performances are pretty bad. Unfortunately, I don't have time currently to investigate how to make that integration better. I will see if I can at least share my current progress but would be definitely not usable.

@ReNoM it's not as simple as "adding QML canvas support", it needs a proper QML integration with Item and certainly a Timer for animations (QML doesn't provide setTimeout equivalent). This integration will not be built-in Chart.js for sure, it would have to be a separate project and distributed as a QML module.

[renom]

@simonbrunel thanks for your answer, I'll wait for you to publish your work.

Regarding performance issues, I've checked out the performance of existing integrations of Chart.js to QML:

1. https://github.com/jwintz/qchart.js
2. https://github.com/shuirna/QMLChartJs
3. https://github.com/milosolutions/mcharts

The first and the third one were drawn smoothly (without any lags or something like that). The second one was drawn with freezes and a very low FPS.
I'm not sure about the reason why the second one lags but the others don't. However I suppose the difference of the Chart.js versions may affect the performance (the first and the third one are based on older versions of the library compared to the second one).

[pnudupa]

@simonbrunel - Thanks. Would be useful to see your WIP. For now, I have worked out a custom solution in my project. But it would be useful to keep this handy for the future.

[simonbrunel]

@ReNoM I only knew about jwintz/qchart.js. Not sure what version QMLChartJs currently uses, it looks like a pre/alpha version of v2. qchart.js and mcharts both use Chart.js v1, which might be the reason it's faster.

@dhurkadevi @pnudupa I finally found time to drop some code on GitHub based on Chart.js v2.7.2. As it states in the README.md, it's experimental and should not be used in production. I will not have time to make it much better but I hope it will be useful for you as it is.

There is one major performance issue when the canvas back-end is a QImage (see this comment), the only workaround I found was to explicitly favor the use of OpenGL (or only draw line with lineWidth = 1).

I'm closing this issue since there is nothing more to do in this repository. For optimization or better compatibility suggestions, please create a new issue / PR.

[shaan7]

@simonbrunel thanks for your answer, I'll wait for you to publish your work.

Regarding performance issues, I've checked out the performance of existing integrations of Chart.js to QML:

1. https://github.com/jwintz/qchart.js

2. https://github.com/shuirna/QMLChartJs

3. https://github.com/milosolutions/mcharts

@renom thanks a LOT for sharing these. Although mcharts uses an older Chart.js, it was painless to use for simple line graphs which I needed for a proprietary Qt app (same as @pnudupa 's case).

[MichaelVoelkel]

Though, that was before Qt released QtCharts, why not using it instead of Chart.js?

License. QtCharts has no LGPL

[MichaelVoelkel]

Note that we have recently also provided a small adaptor: https://github.com/Elypson/ChartJs2QML It is not perfect but it is capable of way more than what existing solutions provide. At least, for our personal projects, it's a nice fit. Maybe, it is of some help for others.