TimeSeriesObjectGroups allows curves with the same unit to share the same curve axis and limits as part of a uniquely identified group. Groups are created through the TimeSeries widget and curves can be added to and removed from the group after creation. To create a Time Series widget, see the Time Series Basics tutorial.
# Create Groups
To create a new group, use createGroup. An ID needs to be specified and can also be used to remove the group from the widget.
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { TimeSeriesWidget } from "@int/geotoolkit/widgets/TimeSeriesWidget.ts";
import { FillDirection } from "@int/geotoolkit/widgets/timeseries/FillDirection.ts";
import { FillType } from "@int/geotoolkit/widgets/timeseries/FillType.ts";
import { ScrollBarType } from "@int/geotoolkit/widgets/timeseries/ScrollBarType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
const groups = {
"cali": null,
"gr": null
};
function createScene(canvas) {
const startDate = new Date(2013, 0, 1).getTime();
const endDate = new Date(2014, 0, 1).getTime();
const dataTableViews = getDataTables(startDate, endDate);
const curveIndice = [2, 1, 0, 3];
const names = ["CALI", "CALI2", "GR", "GR2"];
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(124, 179, 66, 0.85)",
"rgba(239, 108, 0, 0.85)",
"rgba(180, 40, 40, 0.75)"
];
const fillStyles = [
{ "color": "rgba(21,101,192,0.5)" },
{ "color": "rgba(239,108,0,0.5)" }
];
function createWidget() {
const options = {
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 25,
"compact": true
},
"curvelimits": {
"visible": false
},
"lastupdatedate": {
"followcursor": true
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"optoins": {
"resizable": true,
"rounded": true
}
},
"intervalbuttons": {
"visible": false
}
};
return new TimeSeriesWidget(options);
}
function addCurves(widget2) {
curveIndice.forEach((curveIndex, index) => {
widget2.addCurve({
"name": names[index],
"uri": "//test//" + names[index].toLowerCase(),
"data": dataTableViews[curveIndex],
"properties": {
"autoscale": true,
"axisautolabelrotation": true,
"neatlimits": true,
"unit": "INS",
"linestyle": {
"color": colors[index],
"width": 2
},
"axisposition": index < 2 ? "right" : "left"
}
});
});
}
function addFills(widget2) {
widget2.addFill(
"//test//gr",
"//test//gr2",
fillStyles[0],
FillType.CurveToCurve,
FillDirection.Top
);
widget2.addFill(
"//test//gr",
"//test//gr2",
fillStyles[1],
FillType.CurveToCurve,
FillDirection.Bottom
);
}
const widget = createWidget();
addCurves(widget);
addFills(widget);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
function toggleGroup(widget, name) {
if (groups[name] == null) {
groups[name] = widget.createGroup({
"id": name + "group",
"curveids": ["//test//" + name, "//test//" + name + "2"],
"min": 0,
"max": 20,
"curveaxis": {
"compact": true,
"position": name === "gr" ? "left" : "right",
"axiswidth": 30,
"autolabelrotation": true
}
});
return;
}
widget.removeGroup(groups[name]);
groups[name] = null;
}
export { createScene, toggleGroup };
createScene(document.querySelector('[ref="plot"]'));
# Adding And Removing Curves
Curves can be added to and removed from existing TimeSeries widget groups after their creation using the addObject and removeObject methods.
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { TimeSeriesWidget } from "@int/geotoolkit/widgets/TimeSeriesWidget.ts";
import { ScrollBarType } from "@int/geotoolkit/widgets/timeseries/ScrollBarType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
function createScene(canvas) {
const startDate = new Date(2013, 0, 1).getTime();
const endDate = new Date(2014, 0, 1).getTime();
const dataTableViews = getDataTables(startDate, endDate);
const curveIndice = [3, 0, 5];
const names = ["CALI", "CALI2", "CALI3"];
const colors = [
"rgba(239, 108, 0, 0.85)",
"rgba(21, 101, 192, 0.85)",
"rgba(124, 179, 66, 0.85)"
];
function createWidget() {
const options = {
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 25,
"compact": true
},
"curvelimits": {
"visible": false
},
"lastupdatedate": {
"followcursor": true
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
},
"intervalbuttons": {
"visible": false
}
};
return new TimeSeriesWidget(options);
}
function addCurves(widget2) {
curveIndice.forEach((curveIndex, index) => {
widget2.addCurve({
"name": names[index],
"uri": "//test//" + names[index].toLowerCase(),
"data": dataTableViews[curveIndex],
"properties": {
"autoscale": true,
"axisautolabelrotation": true,
"neatlimits": true,
"unit": "INS",
"linestyle": {
"color": colors[index],
"width": 2
}
}
});
});
}
const widget = createWidget();
addCurves(widget);
widget.createGroup({
"id": "addremoveCALIgroup",
"curveids": ["//test//cali", "//test//cali2"],
"min": 7,
"max": 12,
"curveaxis": {
"compact": true,
"position": "right",
"axiswidth": 30,
"autolabelrotation": true,
"tickgeneratoroptions": {
"major": {
"tickvisible": false,
"labelvisible": false
}
}
}
});
widget.scaleModel(2);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
function addCurveToGroup(widget) {
const timeSeriesObject = widget.getTimeSeriesObjectById("//test//cali3");
const group = widget.getGroupById("addremoveCALIgroup");
group.addObject(timeSeriesObject);
}
function removeCurveFromGroup(widget) {
const timeSeriesObject = widget.getTimeSeriesObjectById("//test//cali3");
const group = widget.getGroupById("addremoveCALIgroup");
group.removeObject(timeSeriesObject);
}
export { addCurveToGroup, createScene, removeCurveFromGroup };
createScene(document.querySelector('[ref="plot"]'));
# Changing Group Limits
To change the visible range of a group, use setMin and setMax to set the minimum and maximum values respectively.
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { TimeSeriesWidget } from "@int/geotoolkit/widgets/TimeSeriesWidget.ts";
import { ScrollBarType } from "@int/geotoolkit/widgets/timeseries/ScrollBarType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
function createScene(canvas) {
const startDate = new Date(2013, 0, 1).getTime();
const endDate = new Date(2014, 0, 1).getTime();
const dataTableViews = getDataTables(startDate, endDate);
const curveIndice = [3, 0];
const names = ["CALI", "CALI2"];
const colors = [
"rgba(239, 108, 0, 0.85)",
"rgba(21, 101, 192, 0.85)"
];
function createWidget() {
const options = {
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 25,
"compact": true
},
"curvelimits": {
"visible": false
},
"lastupdatedate": {
"followcursor": true
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
},
"intervalbuttons": {
"visible": false
}
};
return new TimeSeriesWidget(options);
}
function addCurves(widget2) {
curveIndice.forEach((curveIndex, index) => {
widget2.addCurve({
"name": names[index],
"uri": "//test//" + names[index].toLowerCase(),
"data": dataTableViews[curveIndex],
"properties": {
"autoscale": true,
"axisautolabelrotation": true,
"neatlimits": true,
"unit": "INS",
"linestyle": {
"color": colors[index],
"width": 2
}
}
});
});
}
const widget = createWidget();
addCurves(widget);
widget.createGroup({
"id": "minmaxCALIgroup",
"curveids": ["//test//cali", "//test//cali2"],
"min": 7,
"max": 12,
"curveaxis": {
"compact": true,
"position": "right",
"axiswidth": 30,
"autolabelrotation": true,
"tickgeneratoroptions": {
"major": {
"tickvisible": false,
"labelvisible": false
}
}
}
});
widget.scaleModel(2);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
function changeMinMax(widget) {
const group = widget.getGroupById("minmaxCALIgroup");
const min = group.getMin() === 7 ? 5 : 7;
const max = group.getMax() === 12 ? 15 : 12;
group.setMin(min);
group.setMax(max);
}
export { changeMinMax, createScene };
createScene(document.querySelector('[ref="plot"]'));