Find it on GitHub.
Getting rid of this
window variable that doesn’t mean anything in
a QML document, by changing it to a reference to the
itself, makes Chart.js work as expected right away. Awesome. Nearly.
Chart.js makes use of HTLM5 animation mechanism, using intervals and timeouts, within an animation loop that is triggered according to the chart options, whenever it is displayed for the very first time.
This mechanism is not supported by QML’s Canvas, and the documentation says to replace it with a timer, or using an equivalent method that did not produce any result for me.
On the other side, QML already features a wonderful animation system, much more powerful than the one embedded in Chart.js. It also provides such a level of integration that it would not be possible not to use it.
So I dropped the animation system within Chart.js and refactored the code a little bit so that each object exposes two methods:
this.init = function ()that initializes the chart. According to its kind, it will compute bounds for the scale, compute the legend, etc.
this.draw = function (t)that draws the chart for an interpolation of its data for t from 0 to 1, as it was already the case in the original version of the script, but in such a way that this parameter can be defined as a property on the QML side, which value is changed by a QML
PropertyAnimation, with a callback that requests an update for the drawing area.
This shows how to integrate QChart.js as a
jbQuick.Charts submodule into your git project.
1 2 3 4
When cloning a repository with submodules, use:
1 2 3
To update your local submodule, use:
jbQuick is in your qml import path:
QChart.js qmldir provides:
ChartQML item inheriting
Chart provides the following properties:
chartAnimated: whether chart data should be animated on initialization
chartAnimationEasing: an easing type enumeration provided to a PropertyAnimation
chartAnimationDuration: the length (ms) of the animation
chartType: a value amongst:
Charts.chartType.BARfor a bar chart
Charts.chartType.DOUGHNUTfor a doughnut chart
Charts.chartType.LINEfor a line chart
Charts.chartType.PIEfor a pie chart
Charts.chartType.POLARfor a polar chart
Charts.chartType.RADARfor a radar chart
The following snippet creates a line chart.
1 2 3 4 5 6 7 8 9 10 11 12
Enjoy. And drop me a comment if you happen to use it.