michaelvoelkel / chartjs2qml Goto Github PK
View Code? Open in Web Editor NEWQML adaptor for Chart.js 2.x that supports startup animations and tooltips
License: MIT License
QML adaptor for Chart.js 2.x that supports startup animations and tooltips
License: MIT License
I would like to get element data when clicking on the point.
I have a handler to get the data in the option like below:
chartOptions: {
return {
maintainAspectRatio: false,
responsive: true,
hoverMode: 'nearest',
intersect: true,
title: { display: false},
onClick: function(evt) {
console.debug("Click"); // <-- the function is call and print 'click' when I click on the point
jsChart.getElementsAtEvent(evt); // <-- not success due to 'evt' is undefined
console.debug(evt); // <-- 'evt' is undefined
}
}
}
Do you have any suggestions on how to get index or data when clicking on the point?
Hi.
I have a problem with the ChartJS QML on android, the program will freez as soon as the onPaint event reaches
jsChart = new Chart.build(ctx, { type: root.chartType, data: root.chartData, options: root.chartOptions });
I use Qt5.12.3. The wrapper works fine on PC though with the same code.
Hello. Great work on this project, but I can't get it to work in a QtQuick 2 project.
I've created a empty QtQuick project and added your Chart.bundle.js, Chart.qml and main.qml to the project. Also added visible: true
to the Window object in main.qml
When trying to run the project the the executable shows up as a white window and just locks up and "stops answering".
Any suggestions?
Compiling for Qt 5.12, Windows 10.
First Many thanks for you good work !
With Qt6.3 it's working but I have this message :
qt.qml.context: qrc:/ChartJs2QML/Chart.qml:72:9 Parameter "mouse" is not declared. Injection of parameters into signal handlers is deprecated. Use JavaScript functions with formal parameters instead.
Hi,
Can you please guide me how should I change your code to have Interlaced Colors on Y axis ?
like this example: (https://stackoverflow.com/questions/51358701/chartjs-set-background-color-of-the-space-between-ticks)
thanks a lot in advance.
Has anyone already had a look at the new version V3.0.0-alpha of ChartJs?
It's still alpha but I think it would be great if we could continue the journey of ChartJs2QML! ๐
If I try to include the Charting Library I get the following error:
"Chart.js:2123: Error: Cannot assign to non-existent property "Color"
The repository is stored in an subfolder of my project and I include it via:
import "./ChartJs2QML/"
The Chart object will be used in a Page environment of QtQuick.Controls, as shown below.
`import QtQuick 2.12
import QtQuick.Window 2.0
import QtQuick.Controls 2.5
import "./ChartJs2QML/"
Page {
property string pageName
id: detailPage
//anchors.fill: parent
title: pageName+" Plot"
Item {
id: grid
anchors.fill: parent
Chart {
chartType: 'scatter'
chartData: {
return {
datasets: [{
label: 'My First dataset',
xAxisID: 'x-axis-1',
yAxisID: 'y-axis-1',
borderColor: '#ff5555',
backgroundColor: 'rgba(255,192,192,0.3)',
data: [{
x: 0,
y: 0,
}, {
x: 1,
y: 1,
}, {
x: 5,
y: 5,
}]
}, {
label: 'My Second dataset',
xAxisID: 'x-axis-1',
yAxisID: 'y-axis-2',
borderColor: '#5555ff',
backgroundColor: 'rgba(192,192,255,0.3)',
data: [{
x: 0,
y: 1,
}, {
x: 1,
y: 2,
}, {
x: 5,
y: 6,
}]
}]
}}
chartOptions: {return {
maintainAspectRatio: false,
responsive: true,
hoverMode: 'nearest',
intersect: true,
title: {
display: true,
text: 'Chart.js Scatter Chart - Multi Axis'
},
scales: {
xAxes: [{
position: 'bottom',
gridLines: {
zeroLineColor: 'rgba(0,0,0,1)'
}
}],
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'right',
reverse: true,
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
}
anchors {
left: parent.left
top: parent.top
right: parent.horizontalCenter
bottom: parent.verticalCenter
}
}
}
}`
Hi Team,
I have experienced an issue with chart js. I have defined xAxes as below
"scales": {
"xAxes": [{
ticks: {
maxTicksLimit: 6,
min: 1623177453,
max: 1623230798,
stepSize: 10669,
}
}]
}
I am expecting the ticks to be 6 (i.e., starting from the origin) and the tics values to be 1623177453, 1623188122, 1623198791, 1623209460, 1623220129 and 1623230798.
But the output is giving only 4 ticks (1623177453, 1623198791, 1623220129 and 1623230798).
Please let me know if am doing anything wrong. Please suggest
I see that is mandatory to fill chartType
. What if I want to have mixed types like: https://www.chartjs.org/docs/latest/charts/mixed.html ?
Thanks!
it would be nice to have a qmldir file already defined to ease using the project as a module
Hi!
I'm just curious how would it be possible to make Qt-application react on clicks on the chart items?
I.e. when I have a bar chart then I would like to intercept a click on bar's segment in my host Qt application, in order to obtain clicked bar's data (i.e. index and segment where the click has occurred).
There is submitEvent() function in Chart.qml, but how to use it from Qt code?
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.