How to add XYPoint elements to LineSeries dynamically?

[bogong]

I have:
@
Rectangle {
width: parent.width;
height: root.height;

ChartView {
id: chartView;
width: parent.width;
height: parent.height;

ValueAxis {
id: lightIntensity;
min: 1.2000;
max: 2.0000;
tickCount: 1;
}

DateTimeAxis {
id: time;
format: "mm ss";
tickCount: 1;
}

LineSeries {
id: series1;
name: "Lumine/Sec";
axisX: time;
axisY: lightIntensity;
}
}

Component.onCompleted: {
for (var i = 1; i <= 301; i++) {
series1.append(i*1000+getTimestamp(), getRandom());
}
}
}
@

It isn't working. Why? What's wrong?
If I add it manually it's working:
@
Rectangle {
width: parent.width;
height: root.height;

ChartView {
id: chartView;
width: parent.width;
height: parent.height;

ValueAxis {
id: lightIntensity;
min: 1.2000;
max: 2.0000;
tickCount: 1;
}

DateTimeAxis {
id: time;
format: "mm ss";
tickCount: 1;
}

LineSeries {
id: series1;
name: "Lumine/Sec";
axisX: time;
axisY: lightIntensity;
}

XYPoint {x: getTimestamp()+21000; y:getRandom();}
XYPoint {x: getTimestamp()+31000; y:getRandom();}
XYPoint {x: getTimestamp()+41000; y:getRandom();}
XYPoint {x: getTimestamp()+51000; y:getRandom();}
XYPoint {x: getTimestamp()+61000; y:getRandom();}
XYPoint {x: getTimestamp()+71000; y:getRandom();}
XYPoint {x: getTimestamp()+81000; y:getRandom();}
XYPoint {x: getTimestamp()+91000; y:getRandom();}
}
}
@
Question is:

1. How to add dynamically XYPoint?
2. Could I periodically delete the first element and add to end of it next one element within new value? (I need to make realtime visualisation only via QML/JS)