This tutorial describes how to add, edit and remove the colors and styles which fill the spaces between curves, reference lines and baselines in Time Series widgets.
To create a Time Series widget and learn basic navigation, please refer to Time Series Basics tutorial.
# Curve To Curve Fills
A Curve-to-Curve fill colors the space in between two curves with one fill color using the functions FillType.CurveToCurve and FillDirection.Top. Where the top curve drops below the bottom curve, it also colors this space with another fill color using the function FillDirection.Bottom.
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";
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 = [1, 2];
const names = ["CALI1", "GR"];
const lineColors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 0.85)"
];
const fillStyles = [
{ "color": "rgba(21,101,192,0.5)" },
{ "color": "rgba(239,108,0,0.5)" }
];
function addFills(widget) {
widget.addFill(
"//test//cali1",
"//test//gr",
fillStyles[0],
FillType.CurveToCurve,
FillDirection.Top
);
widget.addFill(
"//test//cali1",
"//test//gr",
fillStyles[1],
FillType.CurveToCurve,
FillDirection.Bottom
);
}
function createWidget() {
const options = {
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"lastupdatedate": {
"followcursor": true
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
}
};
const widget = new TimeSeriesWidget(options);
widget.scaleModel(2);
curveIndice.forEach((curveIndex, index) => {
widget.addCurve({
"name": names[index],
"uri": "//test//" + names[index].toLowerCase(),
"data": dataTableViews[curveIndex],
"properties": {
"autoscale": true,
"axisautolabelrotation": true,
"unit": "INS",
"linestyle": {
"color": lineColors[index],
"width": 2
}
}
});
});
addFills(widget);
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Curve To Reference Line Fills
The Reference line value is defined as a y axis number. A Curve-to-Reference fill colors the space above the curve and the reference line with one fill color using the functions FillType.CurveToReferenceLine and FillDirection.Top. This fill also colors the space below the reference line and the curve with another fill color using the function FillDirection.Bottom.
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";
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];
const names = ["GR"];
const lineColors = [
"rgba(239, 108, 0, 0.85)"
];
const fillStyles = [
{ "color": "rgba(239,108,0,0.5)" },
{ "color": "rgba(253,216,53,0.25)" }
];
function addFills(widget) {
widget.addFill(
"//test//gr",
80,
fillStyles[0],
FillType.CurveToReferenceLine,
FillDirection.Bottom
);
widget.addFill(
"//test//gr",
80,
fillStyles[1],
FillType.CurveToReferenceLine,
FillDirection.Top
);
}
function createWidget() {
const options = {
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"lastupdatedate": {
"followcursor": true
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
}
};
const widget = new TimeSeriesWidget(options);
widget.scaleModel(2);
curveIndice.forEach((curveIndex, index) => {
widget.addCurve({
"name": names[index],
"uri": "//test//" + names[index].toLowerCase(),
"data": dataTableViews[curveIndex],
"properties": {
"autoscale": true,
"axisautolabelrotation": true,
"unit": "INS",
"linestyle": {
"color": lineColors[index],
"width": 2
}
}
});
});
addFills(widget);
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Curve To Baseline Fills
The baseline for the fill is usually defined as the 0 y value at the x axis. A Curve-to-Baseline fill colors the space below the curve and the baseline with one fill color using the functions FillType.CurveToBaseLine and FillDirection.Bottom. This fill also colors the space above the curve with another fill color using the function FillDirection.Top.
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 { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.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 = [0];
const names = ["CALI"];
const customPattern = PatternFactory.getInstance().createPattern("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAQCAYAAABQrvyxAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAScwAAEnMBjCK5BwAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAo0lEQVRIS81WQQ6AIAzj/5/GaAIq26DVQDmYYEJ1XVtGyjmn8qR0Lu93dq3Am+K/FlFwq/EXgfanbBFKvCm+ZyePWEQW3fsbj/pcZZG2oUZthIDSIiOL1xBHRBiJvW/Mxg8JIAop9xgC7AnUFr8a/yKwa1B7CodTmO2kKujuIGOvFrODCimABpFVZnZGqFNox4zABFQej+xcm4lYR+lxbxI/SR1oUFAhMA7PXAAAAABJRU5ErkJggg==");
const lineColors = [
"rgba(21, 101, 192, 0.85)"
];
const fillStyles = [
{ "color": "rgba(21,101,192,0.5)" },
{
"color": "rgba(21,101,192,0.25)",
"pattern": customPattern,
"foreground": "rgba(21,101,192,0.5)"
}
];
function addFills(widget) {
widget.addFill(
"//test//cali",
null,
fillStyles[0],
FillType.CurveToBaseLine,
FillDirection.Top
);
widget.addFill(
"//test//cali",
null,
fillStyles[1],
FillType.CurveToBaseLine,
FillDirection.Bottom
);
}
function createWidget() {
const options = {
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"lastupdatedate": {
"followcursor": true
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
}
};
const widget = new TimeSeriesWidget(options);
widget.scaleModel(2);
curveIndice.forEach((curveIndex, index) => {
widget.addCurve({
"name": names[index],
"uri": "//test//" + names[index].toLowerCase(),
"data": dataTableViews[curveIndex],
"properties": {
"autoscale": false,
"unit": "INS",
"min": 5,
"max": 13,
"linestyle": {
"color": lineColors[index],
"width": 2
}
}
});
});
addFills(widget);
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Changing And Removing FillStyles
Both top and bottom fills can include fill styles. To add or change a fill style (usually a JSON object), enter the needed style’s ID and direction. To remove a curve’s fill and fill style, top and bottom, pass in ‘null’ for direction using the removeCurveFill function for each curve fill.
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";
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];
const names = ["GR"];
const lineColors = [
"rgba(239, 108, 0, 0.85)"
];
const fillStyles = [
{ "color": "rgba(239,108,0,0.5)" },
{ "color": "rgba(253,216,53,0.25)" }
];
function addFills(widget) {
widget.addFill(
"//test//gr",
80,
fillStyles[0],
FillType.CurveToReferenceLine,
FillDirection.Bottom
);
widget.addFill(
"//test//gr",
80,
fillStyles[1],
FillType.CurveToReferenceLine,
FillDirection.Top
);
}
function createWidget() {
const options = {
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"lastupdatedate": {
"followcursor": true
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
}
};
const widget = new TimeSeriesWidget(options);
widget.scaleModel(2);
curveIndice.forEach((curveIndex, index) => {
widget.addCurve({
"name": names[index],
"uri": "//test//" + names[index].toLowerCase(),
"data": dataTableViews[curveIndex],
"properties": {
"autoscale": true,
"axisautolabelrotation": true,
"unit": "INS",
"linestyle": {
"color": lineColors[index],
"width": 2
}
}
});
});
addFills(widget);
widget.removeCurveFill("//test//gr", FillDirection.Bottom);
widget.getCurveFillStyle(
"//test//gr",
FillDirection.Top
).setColor("rgba(124, 179, 66, 0.85)");
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));