Passing a variable into dynamic object creation in QML - qt

Question

I'm trying to create multiple chartviews dynamically in QML. The chartviews are added to a gridview when created but I'm having an issue with the creation of the lineseries.
My code is
CustomButton
{
id:addSeriesChartButton
text: "Add Series"
onClicked: {
var name = chartsModel.get(chartSelector.currentIndex).name
var chart = mGridViewId.getTopDelegateInstance().children[0];
var index = chartSelector.currentIndex // Combobox of different charts
var axisX = Qt.createQmlObject('import QtCharts 2.15;
DateTimeAxis {
min: new Date(dataManager.dataModel[index].xMin)
max: new Date(dataManager.dataModel[index].xMax)
format: "hh:mm:ss:zzz"
}', chart, {index: index});
var axisY = Qt.createQmlObject('import QtCharts 2.15;
ValueAxis {
min: gLinkMin
max: gLinkMax }', chart);
var mapper = Qt.createQmlObject('import QtCharts 2.15;
VXYModelMapper {
firstRow: 1
xColumn : 0
yColumn: 1
model: dataManager.dataModel[index]}', chart, {index: index});
var line = chart.createSeries(ChartView.SeriesTypeLine, name, axisX, axisY);
line.useOpenGL = true
mapper.series = line;
}
}
My Issue is I can't seem to pass index into the creation of axisX and mapper. This returns an error "TypeError: Passing incompatible arguments to C++ functions from Javascript is not allowed". If I pass chartSelector.currentIndex, this works, however, when I change the index of the combobox, all existing chartviews update the lineseries with the new index. I don't want this to happen. I simply just want a chartview that exists as is at the time of creation. I can;t seem to find any reference on how to pass this value. Or even if this is the right approach. I'm assuming the index won't subsequently change. Any tips?

Answer 1

Since you're using dynamic object creation, consider using Loader, setSource, and data-uri. Here's a generic example, sorry, I haven't adapted it for QtCharts:
import QtQuick
import QtQuick.Controls
Page {
id: page
Repeater {
model: [
{ qml: "Rectangle { }",
obj: { width: 100,
height: 100,
color: "red" } },
{ qml: "Rectangle { radius: height * 0.5 }",
obj: { width: 50,
height: 50,
color: "orange" } },
{ qml: "Button { }",
obj: { text: "Click Me" } }
]
delegate: Loader {
x: Math.random() * page.width
y: Math.random() * page.height
Component.onCompleted: setSource(
`data:text/plain,import QtQuick
import QtQuick.Controls
` + modelData.qml,
modelData.obj
);
}
}
}
You can Try it Online!

Answer 2

Eventually ended up doing something like this:
CustomButton
{
id:addSeriesChartButton
text: "Add Series"
onClicked: {
var name = chartsModel.get(chartSelector.currentIndex).name
var chart = mGridViewId.getTopDelegateInstance().children[0];
var index = chartSelector.currentIndex // Combobox of different charts
var axisX = Qt.createQmlObject('import QtCharts 2.15;
DateTimeAxis {
min: new Date(dataManager.dataModel[' + index + '].xMin)
max: new Date(dataManager.dataModel[' + index + '].xMax)
format: "hh:mm:ss:zzz"
}', chart, {index: index});
var axisY = Qt.createQmlObject('import QtCharts 2.15;
ValueAxis {
min: gLinkMin
max: gLinkMax }', chart);
var mapper = Qt.createQmlObject('import QtCharts 2.15;
VXYModelMapper {
firstRow: 1
xColumn : 0
yColumn: 1
model: dataManager.dataModel[' + index + ']}', chart, {index: index});
var line = chart.createSeries(ChartView.SeriesTypeLine, name, axisX, axisY);
line.useOpenGL = true
mapper.series = line;
}
}
Seemed to fix it