This Styles and Customization tutorial describes how to change styles and customize the display of the Time Series widget, from adding annotations to changing interpolation modes.
To create a Time Series widget, see the Time Series Basics tutorial.
For style customization using CSS rules, see the Time Series CSS tutorial.
# Customizing Styles
The Time Series widget can be customized in many different ways, such as changing the title font style, defining curve markers, toggling visibility for different parts of the widget, etc. Use the setOptions method to define customizations.
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 { Point } from "@int/geotoolkit/util/Point.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
import { DiamondPainter } from "@int/geotoolkit/scene/shapes/painters/DiamondPainter.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, 1, 2];
const names = ["CALI", "CALI1", "GR"];
const titleAnchors = [AnchorType.RightBottom, AnchorType.RightCenter, AnchorType.RightTop];
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 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": 30,
"compact": true
},
"curvelimits": {
"visible": false
},
"title": {
"text": "Customized Time Series",
"font": "bold 14px Arial",
"color": "#777777",
"centered": true,
"visible": false
},
"lastupdatedate": {
"followcursor": true
},
"curvesymbol": {
"painter": DiamondPainter
},
"intervalbuttons": {
"visible": false
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
}
};
const widget = new TimeSeriesWidget(options);
curveIndice.forEach((curveIndex, index) => {
widget.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": "left",
"title": {
"anchor": titleAnchors[index],
"offset": new Point(7, 4)
},
"spline": true
}
});
});
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Displaying Information
Along with style customizations, the logic for information display tools such as tooltips and curve limits can be changed through the setOptions method.
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 { DateTimeFormat } from "@int/geotoolkit/util/DateTimeFormat.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
import { CirclePainter } from "@int/geotoolkit/scene/shapes/painters/CirclePainter.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, 1];
const names = ["CALI", "GR"];
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 0.85)"
];
function createWidget() {
const options = {
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": false,
"axiswidth": 30,
"compact": true
},
"tooltips": {
"selectionradius": Number.POSITIVE_INFINITY,
"tooltipoptions": {
"index": {
"visible": true,
"formatter": new DateTimeFormat({ "format": "M j H:i" })
},
"singlerow": true
}
},
"title": {
"visible": false,
"height": 40,
"text": "Info Options",
"font": "bold 16px Arial",
"color": "#333333"
},
"legends": {
"visible": true,
"height": 25,
"marginbottom": 3
},
"lastupdatedate": {
"visible": false
},
"curvelimits": {
"visible": false
},
"curvesymbol": {
"painter": CirclePainter,
"height": 10,
"width": 10
},
"southaxis": {
"visible": false
},
"visiblerange": {
"visible": true,
"formatter": "Y/m/d H:i:s"
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"rounded": true,
"resizable": true
}
}
};
const widget = new TimeSeriesWidget(options);
curveIndice.forEach((curveIndex, index) => {
widget.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 === 0 ? "right" : "left"
}
});
});
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
function updateVisibleRange(widget, visibleRange) {
widget.setProperties({
"visiblerange": {
"visible": visibleRange
}
});
}
export { createScene, updateVisibleRange };
createScene(document.querySelector('[ref="plot"]'));
# Displaying Point Data
In addition to general line customization, Time Series provides customizable options for data points on a particular curve such as visible markers and values.
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 { Point } from "@int/geotoolkit/util/Point.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { CirclePainter } from "@int/geotoolkit/scene/shapes/painters/CirclePainter.ts";
import { getDataTables } from "/src/code/TimeSeries/data.ts";
import { DiamondPainter } from "@int/geotoolkit/scene/shapes/painters/DiamondPainter.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 colors = [
"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": 30,
"compact": true
},
"curvelimits": {
"visible": false
},
"title": {
"text": "Point Data Time Series",
"font": "bold 14px Arial",
"color": "#777777",
"visible": false
},
"lastupdatedate": {
"followcursor": true
},
"curvesymbol": {
"painter": DiamondPainter
},
"intervalbuttons": {
"visible": false
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
}
};
const widget = new TimeSeriesWidget(options);
curveIndice.forEach((curveIndex, index) => {
widget.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": "left",
"title": {
"anchor": AnchorType.RightCenter,
"offset": new Point(4, 4)
},
"markervisible": true,
"marker": {
"width": 5,
"height": 5,
"sizeisindevicespace": true,
"painter": CirclePainter,
"linestyle": "blue",
"fillstyle": "lightblue"
},
"decimationspacing": 120,
"values": {
"visible": true,
"color": "#757575",
"font": "12px Roboto",
"fillstyle": "lightblue",
"linestyle": "blue"
}
}
});
});
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Adding Legend
Legends can be positioned inside or outside the Time Series chart. If positioned inside, use the mouse to dynamically select and reposition the legend. Also, the legend container automatically resizes to accommodate all legend information.
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 { LegendPosition } from "@int/geotoolkit/widgets/timeseries/LegendPosition.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, 0];
const names = ["CALI1", "GR", "CALI2"];
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 0.85)",
"rgba(124, 179, 66, 0.85)"
];
function addFills(widget) {
widget.addFill(
"//test//cali1",
"//test//gr",
"rgba(21, 101, 192, 0.5)",
FillType.CurveToCurve,
FillDirection.Top
);
widget.addFill(
"//test//cali1",
"//test//gr",
"rgba(239, 108, 0, 0.5)",
FillType.CurveToCurve,
FillDirection.Bottom
);
}
function createWidget() {
const options = {
"title": {
"visible": false
},
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 30,
"compact": true
},
"curvelimits": {
"visible": false
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
},
"legends": {
"visible": true,
"position": LegendPosition.Inside,
"height": 30,
"width": 400,
"linestyle": "rgba(192,192,192,0.5)",
"fillstyle": "rgba(212,212,212,0.25)",
"legendoptions": {
"fixedwidth": 130
}
},
"tooltips": {
"tooltipoptions": {
"nanvisibility": false
}
},
"lastupdatedate": {
"followcursor": true
}
};
const widget = new TimeSeriesWidget(options);
curveIndice.forEach((curveIndex, index) => {
widget.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": 1
},
"axisposition": "left"
}
});
});
addFills(widget);
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Simple Annotations
An annotation is an explanatory note or comment added to a widget.
Simple Annotations are text characters and their symbol which are selected with a click. Simple Annotations can be added and edited.
See the code below. The annotation note symbol and label are optional.
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 { Events as TimeSeriesWidgetEvents } from "@int/geotoolkit/widgets/timeseries/Events.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Point } from "@int/geotoolkit/util/Point.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { LineStyle, Patterns } from "@int/geotoolkit/attributes/LineStyle.ts";
import { FillStyle } from "@int/geotoolkit/attributes/FillStyle.ts";
import { TextStyle } from "@int/geotoolkit/attributes/TextStyle.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, 1];
const names = ["CALI", "GR"];
const labelBackground = new FillStyle("rgba(255,255,255,0.6)");
const label = new TextStyle({
"font": "14px Arial",
"color": KnownColors.DarkOrange
});
const symbolLS = new LineStyle({
"color": KnownColors.DarkOrange,
"width": 1,
"pattern": Patterns.Solid
});
const symbolFS = new FillStyle(KnownColors.LightOrange);
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 0.85)"
];
function configAnnotations(widget) {
widget.addAnnotation({
"curveid": "//test//cali",
"time": Date.UTC(2013, 3, 18, 6),
"label": "Annotation 1",
"textstyle": label.clone().setColor(KnownColors.DarkOrange),
"textbackground": labelBackground,
"symbol": "triangle",
"linestyle": symbolLS,
"fillstyle": symbolFS
});
const annotationID2 = widget.addAnnotation({
"curveid": "//test//gr",
"time": Date.UTC(2013, 4, 22, 18),
"label": "Annotation 2",
"textstyle": label.clone().setColor(KnownColors.LightBlue),
"textbackground": labelBackground,
"symbol": "circle",
"linestyle": symbolLS.clone(),
"fillstyle": symbolFS.clone().setColor(KnownColors.LightYellow)
});
widget.editAnnotation(annotationID2, {
"label": "Annotation 2 edited",
"textstyle": label.clone().setColor(KnownColors.LightBlue),
"textbackground": labelBackground.clone().setColor(KnownColors.DarkBlue),
"symbol": "square",
"linestyle": symbolLS.clone().setColor(KnownColors.LightBlue).setWidth(2),
"fillstyle": symbolFS.clone().setColor(KnownColors.DarkBlue)
});
widget.on(TimeSeriesWidgetEvents.onAnnotationClick, (event, sender, id) => {
const props = widget.getAnnotationProperties(id);
const el = window.document.getElementById("simpleTextField");
el.value = props["label"] != null && props["label"] !== "" ? props["label"] : id;
});
}
function createWidget() {
const options = {
"title": {
"visible": false
},
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 30,
"compact": true
},
"curvelimits": {
"visible": false
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
}
};
const widget = new TimeSeriesWidget(options);
curveIndice.forEach((curveIndex, index) => {
widget.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": "left",
"title": {
"anchor": AnchorType.RightBottom,
"offset": new Point(7, 4)
},
"spline": true
}
});
});
configAnnotations(widget);
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Line Annotations
Line Annotations are vertical lines overlaid on the Time Series widget, which are selected with a click. Line styles can be edited. A collections of line annotations can also be added/removed all at once. See the code below.
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 { Events as TimeSeriesWidgetEvents } from "@int/geotoolkit/widgets/timeseries/Events.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { LineStyle, Patterns } from "@int/geotoolkit/attributes/LineStyle.ts";
import { FillStyle } from "@int/geotoolkit/attributes/FillStyle.ts";
import { TextStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
import { Point } from "@int/geotoolkit/util/Point.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, 1];
const names = ["CALI", "GR"];
const lineStyle = new LineStyle({
"color": KnownColors.DarkGrey,
"width": 3,
"pattern": Patterns.Dash
});
const fillStyle = new FillStyle("rgba(255,255,255,0.85)");
const textStyle = new TextStyle({
"font": "14px Arial",
"color": KnownColors.DarkBlue
});
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 0.85)"
];
function configAnnotations(widget) {
widget.addAnnotationLine({
"text": "Annotation Line 1",
"point": new Point(Date.UTC(2013, 3, 18, 3), 0.01),
"linestyle": lineStyle.clone(),
"fillstyle": fillStyle.clone(),
"textstyle": textStyle.clone()
});
const annotationLineID2 = widget.addAnnotationLine({
"text": "Annotation Line 2",
"point": new Point(Date.UTC(2013, 5, 1), 0.01),
"linestyle": lineStyle.clone(),
"fillstyle": fillStyle.clone(),
"textstyle": textStyle.clone()
});
widget.editAnnotationLine(annotationLineID2, {
"text": "Annotation Line 2 edited",
"point": new Point(new Date(2013, 5, 1).getTime(), 1 - 0.01),
"linestyle": lineStyle.clone().setColor(KnownColors.Black).setWidth(3).setPattern(Patterns.DashDot),
"fillstyle": fillStyle.clone().setColor("black"),
"textstyle": textStyle.clone().setColor("white"),
"alignment": AnchorType.BottomCenter
});
widget.addAnnotationLineCollection([{
"text": "Collection Line 1A",
"point": new Point(Date.UTC(2013, 9, 1), 1 - 0.01),
"linestyle": lineStyle.clone().setColor(KnownColors.DarkBlue).setWidth(3).setPattern(Patterns.Dot),
"fillstyle": fillStyle.clone(),
"textstyle": textStyle.clone(),
"alignment": AnchorType.BottomCenter
}, {
"text": "Collection Line 1B",
"point": new Point(Date.UTC(2013, 11, 1), 1 - 0.01),
"linestyle": lineStyle.clone().setColor(KnownColors.DarkBlue).setWidth(3).setPattern(Patterns.Dot),
"fillstyle": fillStyle.clone(),
"textstyle": textStyle.clone(),
"alignment": AnchorType.BottomCenter
}]);
widget.on(TimeSeriesWidgetEvents.onAnnotationLineClick, (event, sender, id) => {
const props = widget.getAnnotationLineProperties(id);
const el = window.document.getElementById("lineTextField");
el.value = props["text"];
});
}
function createWidget() {
const options = {
"title": {
"visible": false
},
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 30,
"compact": true
},
"curvelimits": {
"visible": false
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"rounded": true,
"resizable": true
}
}
};
const widget = new TimeSeriesWidget(options);
curveIndice.forEach((curveIndex, index) => {
widget.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": "left",
"spline": true
}
});
});
configAnnotations(widget);
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Microposition
Layered curves can clutter data and make it difficult to interpret. To display curves separately, use microposition to place curves on separate 'rows'.
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 = [0, 1];
const names = ["CALI", "GR"];
const micropositions = [{
"top": 1,
"bottom": 0.5
}, {
"top": 0.5,
"bottom": 0
}];
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 0.85)"
];
function createWidget() {
const options = {
"title": {
"visible": false
},
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 30,
"compact": true
},
"lastupdatedate": {
"followcursor": true
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
},
"alignaxis": true
};
const widget = new TimeSeriesWidget(options);
curveIndice.forEach((curveIndex, index) => {
widget.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": "left",
"microposition": micropositions[index]
}
});
});
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Group Microposition
Microposition can also be used to separate curves and fill in groups. See the Time Series - Groups tutorial for more information.
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 shiftIncrement = 80;
const dataTableViews = [
getDataTables(startDate, endDate),
getDataTables(startDate, endDate, 1 * shiftIncrement),
getDataTables(startDate, endDate, 2 * shiftIncrement),
getDataTables(startDate, endDate, 3 * shiftIncrement)
];
const curveIndice = [0, 1, 0, 1, 0, 1, 0, 1];
const names = ["CALI", "GR", "CALI2", "GR2", "CALI3", "GR3", "CALI4", "GR4"];
const micropositions = [{
"top": 1,
"bottom": 0.75
}, {
"top": 0.75,
"bottom": 0.5
}, {
"top": 0.5,
"bottom": 0.25
}, {
"top": 0.25,
"bottom": 0
}];
const colors = [
"rgba(21,101,192,0.5)",
"rgba(239,108,0,0.5)",
"rgba(253,216,53,0.25)",
"rgba(25,216,53,0.25)"
];
function createWidget() {
const options = {
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"titlerotateangle": 0,
"compact": false,
"textwidth": 50,
"axisvisible": false,
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": false,
"axiswidth": 30
},
"lastupdatedate": {
"followcursor": true
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"rounded": true,
"resizable": true
}
},
"alignaxis": true,
"curvelimits": {
"visible": false
},
"legends": {
"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[Math.floor(index / 2)][curveIndex],
"properties": {
"autoscale": true,
"axisautolabelrotation": true,
"neatlimits": true,
"unit": "API",
"linestyle": {
"color": colors[Math.floor(index / 2)],
"width": 2
},
"axisposition": "left",
"microposition": micropositions[Math.floor(index / 2)],
"borderlinestyle": "#a8a8a8"
}
});
});
}
function addFills(widget2) {
for (let i = 0; i < curveIndice.length - 1; i += 2) {
widget2.addFill(
"//test//" + names[i].toLowerCase(),
"//test//" + names[i + 1].toLowerCase(),
colors[Math.floor(i / 2)],
FillType.CurveToCurve,
FillDirection.Top
);
}
}
function addGroups(widget2) {
for (let i = 0; i < curveIndice.length - 1; i += 2) {
widget2.createGroup({
"id": "group" + (i + 1),
"curveids": [curveIndice[i], curveIndice[i + 1]],
"min": 0,
"max": 1,
"sharelimits": false,
"curveaxis": {
"titlerotateangle": 0,
"compact": false,
"textwidth": 30,
"axisvisible": false,
"labeltext": "S" + (Math.floor(i / 2) + 1),
"microposition": micropositions[Math.floor(i / 2)]
}
});
}
}
const widget = createWidget();
addCurves(widget);
addFills(widget);
addGroups(widget);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Interpolation
By default, the Time Series widget draws curves in a linear manner, from data point to data point. However, curves can be drawn differently depending on what interpolation type is set. Time Series widget supports linear, startstep, middlestep, and endstep interpolations.
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 { Point } from "@int/geotoolkit/util/Point.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { InterpolationType } from "@int/geotoolkit/data/DataStepInterpolation.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, 1];
const names = ["CALI_MiddleStep", "CALI_Linear"];
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 0.85)"
];
function createWidget() {
const options = {
"title": {
"visible": false
},
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 30,
"compact": true
},
"curvelimits": {
"visible": false
},
"lastupdatedate": {
"followcursor": true
},
"intervalbuttons": {
"visible": false
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
}
};
const widget = new TimeSeriesWidget(options);
curveIndice.forEach((curveIndex, index) => {
widget.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": index === 0 ? 2 : 1
},
"axisposition": "left",
"interpolationtype": index === 0 ? InterpolationType.MiddleStep : InterpolationType.Linear,
"title": {
"anchor": AnchorType.RightCenter,
"offset": new Point(4, 4)
}
}
});
});
widget.scaleModel(85);
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Logarithmic Scale
When data is spread over a large range, it can be difficult to plot using linear limits. Logarithmic scale displays data using a logarithmic range rather than linear.
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 { Point } from "@int/geotoolkit/util/Point.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.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, 1];
const names = ["CALI_Log", "CALI"];
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 0.85)"
];
function createWidget() {
const options = {
"modelgrid": {
"horizontalvisibility": {
"minor": true
}
},
"title": {
"visible": false
},
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 30,
"compact": true
},
"curvelimits": {
"visible": false
},
"lastupdatedate": {
"followcursor": true
},
"intervalbuttons": {
"visible": false
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"rounded": true,
"resizable": true
}
}
};
const widget = new TimeSeriesWidget(options);
curveIndice.forEach((curveIndex, index) => {
widget.addCurve({
"name": names[index],
"uri": "//test//" + names[index].toLowerCase(),
"id": "//test//" + names[index].toLowerCase(),
"data": dataTableViews[curveIndex],
"properties": {
"autoscale": true,
"axisautolabelrotation": true,
"neatlimits": true,
"unit": "INS",
"linestyle": {
"color": colors[index],
"width": 2
},
"logarithmicscale": index === 0,
"axisposition": "left",
"title": {
"anchor": AnchorType.RightCenter,
"offset": new Point(4, 4)
}
}
});
});
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Full Customization
Widget options, CSS styling, curve options, and visuals can be combined to provide finely detailed customizations for the Time Series widget.
import { DateUtil } from "@int/geotoolkit/util/DateUtil.ts";
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 { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { LineStyle, Patterns } from "@int/geotoolkit/attributes/LineStyle.ts";
import { DateTimeFormat } from "@int/geotoolkit/util/DateTimeFormat.ts";
import { AdaptiveDateTimeTickGenerator } from "@int/geotoolkit/axis/AdaptiveDateTimeTickGenerator.ts";
import { Direction } from "@int/geotoolkit/layout/HorizontalPriorityLayout.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);
function createWidget() {
const options = {
"curvelimits": {
"visible": false
},
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": false,
"axiswidth": 60,
"textcolor": "#ffffff",
"tickgeneratoroptions": {
"major": {
"labelvisible": true
}
},
"titlevisible": false,
"compact": false
},
"cursor": {
"linestyle": {
"color": "rgba(255,255,255,1)",
"width": 0.5,
"pattern": Patterns.Solid
}
},
"intervalbuttons": {
"visible": false
},
"lastupdatedate": {
"visible": false
},
"legends": {
"direction": Direction.RightToLeft,
"legendoptions": {
"fillstyle": "#284258",
"linestyle": "#284258"
}
},
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"scrollbar": {
"visible": false
},
"southaxis": {
"color": "#ffffff",
"font": "12px Arial",
"height": 30,
"tickgenerator": new AdaptiveDateTimeTickGenerator().setFormatLabelHandler((tickgen, parent, orient, info, index, value) => DateUtil.formatUTC(new Date(value), "M d"))
},
"title": {
"text": "Visits based on three months data",
"height": 20,
"color": "#ffffff",
"visible": true,
"padding": [0, 0, 0, 5]
},
"tooltips": {
"selectionradius": Number.POSITIVE_INFINITY,
"tooltipoptions": {
"index": {
"name": "",
"visible": true,
"formatter": new DateTimeFormat({ "format": "M d" }),
"textcolor": "#e1dcdc",
"font": "20px Arial"
},
"textcolor": "#e1dcdc"
},
"fillstyle": "rgba(100,100,100,0.8)",
"linestyle": LineStyle.Empty
},
"visiblerange": {
"visible": false
}
};
const widget = new TimeSeriesWidget(options);
widget.addCurve({
"name": "Visits",
"uri": "//test//loca",
"data": dataTableViews[0],
"properties": {
"autoscale": true,
"axisautolabelrotation": false,
"axisposition": "left",
"neatlimits": true,
"unit": null,
"linestyle": {
"color": "#698dea",
"width": 2
}
}
});
widget.addFill(
"//test//loca",
null,
"rgba(108,137,212,0.75)",
FillType.CurveToBaseLine,
FillDirection.Bottom
);
const css = `
*[cssclass~="layoutgroup"]{
fillstyle: #284258;
}
.TimeSeriesWidget {
tooltips-tooltipoptions-textcolor: #e1dcdc
}
`;
widget.setCss(css);
widget.scaleModel(5);
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Using ToolTipTool
ToolTipTool can be use with TimeSeries. It introduces a lot of customization for tooltip ToolTipTool provides.
.cg-tooltip-holder {
position: relative;
}
.cg-tooltip {
position: absolute;
display: block;
padding: 2px 12px 3px 7px;
overflow: visible !important;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
background: white !important;
opacity: 0.9;
color: #333333;
border: solid 1px gray;
border-radius: 5px;
text-align: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
margin: 0 !important;
z-index: 10000;
max-width: 400px;
text-wrap: normal !important;
white-space: normal !important;
}
/* Default setting for tooltip */
.cg-tooltip-container {
position: absolute;
display: block;
overflow: visible !important;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 12px;
padding: 3px 7px;
background: #f7f7f7;
color: #333333;
border: 1px solid #938e8e;
opacity: 0.8;
text-align: left;
box-shadow: 3px 3px 10px #888;
margin: 0 !important;
z-index: 10000;
max-width: 400px;
text-wrap: normal !important;
white-space: normal !important;
user-select: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.cg-tooltip-container {
border-radius: 0;
}
}
/* Default left arrow for tooltip */
.cg-tooltip-arrow-left::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 0;
top: 50%;
border: 5px solid transparent;
border-left: 0;
border-right: 5px solid #938e8e;
transform: translate(calc(-100%), -50%);
}
.cg-tooltip-arrow-left::after {
content: '';
position: absolute;
display: block;
width: 0px;
left: 0;
top: 50%;
border: 4px solid transparent;
border-left: 0;
border-right: 4px solid #f7f7f7;
transform: translate(calc(-100%), -50%);
}
/* Default top arrow for tooltip */
.cg-tooltip-arrow-top::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
top: 0;
border: 5px solid transparent;
border-top: 0;
border-bottom: 5px solid #938e8e;
transform: translate(-50%, -100%);
}
.cg-tooltip-arrow-top::after {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
top: 0;
border: 4px solid transparent;
border-top: 0;
border-bottom: 4px solid #f7f7f7;
transform: translate(-50%, -100%);
}
/* Default right arrow for tooltip */
.cg-tooltip-arrow-right::before {
content: '';
position: absolute;
display: block;
width: 0px;
right: 0;
top: 50%;
border: 5px solid transparent;
border-right: 0;
border-left: 5px solid #938e8e;
transform: translate(100%, -50%);
}
.cg-tooltip-arrow-right::after {
content: '';
position: absolute;
display: block;
width: 0px;
right: 0;
top: 50%;
border: 4px solid transparent;
border-right: 0;
border-left: 4px solid #f7f7f7;
transform: translate(100%, -50%);
}
/* Default bottom arrow for tooltip */
.cg-tooltip-arrow-bottom::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
bottom: 0px;
border: 5px solid transparent;
border-bottom: 0;
border-top: 5px solid #938e8e;
transform: translate(-50%, 100%);
z-index: 10000;
}
.cg-tooltip-arrow-bottom::after {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
bottom: 0;
border: 4px solid transparent;
border-bottom: 0;
border-top: 4px solid #f7f7f7;
transform: translate(-50%, 100%);
z-index: 10000;
}
/* Tooltip item name */
/* Tooltip item value */
/* .cg-tooltip-item-value */
/* Tooltip item value */
.cg-tooltip-item-unit {
text-transform: none;
}
.cg-tooltip-item-name {
text-transform: capitalize;
white-space: nowrap;
vertical-align: middle;
font-size: 13px;
}
.cg-tooltip-row {
display: flex;
flex-direction: row;
align-items: center;
white-space: pre-wrap;
font-size: 12px;
line-height: 100%;
margin: 1px 0;
}
.cg-tooltip-title {
font-size: 13px;
height: 14px;
text-transform: capitalize;
}
.cg-tooltip-title .cg-tooltip-symbol {
margin-right: 0 !important;
}
.cg-tooltip-title-name {
vertical-align: middle;
}
.cg-tooltip-row + .cg-tooltip-row {
margin-top: 4px;
}
.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {
margin-top: 5px;
}
.cg-tooltip-item-value + .cg-tooltip-item-unit {
margin-left: 1px;
}
/* Tooltip symbol */
.cg-tooltip-symbol-cell {
display: inline-flex;
min-width: 13px; /* 10px size + 3px margin */
}
.cg-tooltip-symbol {
margin-right: 3px;
background-color: transparent;
display: block;
}
.cg-tooltip-symbol > img {
display: block;
}
.cg-tooltip-list-cell {
display: inline-flex;
}
.cg-tooltip-list-symbol {
display: block;
margin-right: 3px;
width: 6px;
height: 6px;
vertical-align: middle;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.4);
}
.cg-tooltip-symbol-legacy {
border-radius: 4px;
margin-right: 5px;
height: 8px;
width: 8px;
display: inline-block;
}
.cg-tooltip-title-legacy {
font-weight: 900;
}
/* Tooltip symbol circle */
.cg-tooltip-symbol.circle {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.4);
}
/* Tooltip symbol line */
.cg-tooltip-symbol.line {
height: 10px;
width: 10px;
display: inline-block;
transform: scale(1.2, 0.2);
}
/* Tooltip symbol diamond */
.cg-tooltip-symbol.diamond {
height: 10px;
width: 10px;
display: inline-block;
transform: rotate(45deg);
border-radius: 0px;
}
/* Tooltip symbol square */
.cg-tooltip-symbol.square {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 0px;
border: 1px solid rgba(0,0,0,.4);
}
# Auto Limits
This tutorial shows how to add major or minor ticks options and different limits algorithm.
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";
const startDate = new Date(2013, 0, 1).getTime();
const endDate = new Date(2014, 0, 1).getTime();
var LimitsTypes = /* @__PURE__ */ ((LimitsTypes2) => {
LimitsTypes2["OriginalLimits"] = "Original Limits";
LimitsTypes2["LogarithmicScale"] = "Logarithmic Scale";
LimitsTypes2["NeatLimits"] = "Neat Limits";
LimitsTypes2["PreciseLimits"] = "Neat Precise Limits";
return LimitsTypes2;
})(LimitsTypes || {});
function createScene(canvas) {
const dataTableViews = getDataTables(startDate, endDate);
const curveIndice = [1, 2];
const names = ["CALI", "GR"];
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 0.85)"
];
function createWidget() {
const options = {
"title": {
"visible": false
},
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 30,
"tickgeneratoroptions": {
"major": {
"tickvisible": true,
"labelvisible": true
}
}
},
"curvelimits": {
"visible": false
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
},
"tooltips": {
"tooltipoptions": {
"nanvisibility": false
}
},
"lastupdatedate": {
"followcursor": true
}
};
const widget = new TimeSeriesWidget(options);
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": colors[index],
"width": 1
}
}
});
});
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
function setLimitsType(widget, limitsType) {
const timeSeriesObjects = widget.getCurves().map((id) => widget.getTimeSeriesObjectById(id));
switch (limitsType) {
case "Neat Limits" /* NeatLimits */:
timeSeriesObjects.forEach((timeSeriesObject) => {
timeSeriesObject.setCurveOptions({
"neatlimits": {
"enable": true,
"precise": false
},
"logarithmicscale": false
});
timeSeriesObject.setAxisOptions({
"logarithmicscale": false
});
});
break;
case "Neat Precise Limits" /* PreciseLimits */:
timeSeriesObjects.forEach((timeSeriesObject) => {
timeSeriesObject.setCurveOptions({
"neatlimits": {
"enable": true,
"precise": true
},
"logarithmicscale": false
});
timeSeriesObject.setAxisOptions({
"logarithmicscale": false
});
});
break;
case "Logarithmic Scale" /* LogarithmicScale */:
timeSeriesObjects.forEach((timeSeriesObject) => {
timeSeriesObject.setAxisOptions({
"logarithmicscale": true
});
timeSeriesObject.setCurveOptions({
"neatlimits": {
"enable": true,
"precise": false
},
"logarithmicscale": true
});
});
break;
default:
timeSeriesObjects.forEach((timeSeriesObject) => {
timeSeriesObject.setCurveOptions({
"neatlimits": false,
"logarithmicscale": false
});
timeSeriesObject.setAxisOptions({
"logarithmicscale": false
});
});
break;
}
}
function setNeatLimitsMinMax(widget, neatLimitsMinMax) {
const timeSeriesObjects = widget.getCurves().map((id) => widget.getTimeSeriesObjectById(id));
timeSeriesObjects.forEach((timeSeriesObject) => {
timeSeriesObject.setAxisOptions({
"logarithmicscale": false
});
timeSeriesObject.setCurveOptions({
"neatlimits": {
"min": parseFloat(neatLimitsMinMax["neatlimitsmin"]),
"max": parseFloat(neatLimitsMinMax["neatlimitsmax"])
},
"logarithmicscale": false
});
});
}
export { createScene, LimitsTypes, setLimitsType, setNeatLimitsMinMax };
createScene(document.querySelector('[ref="plot"]'));
# Custom Orientation
This tutorial shows how to change tick labels orientation.
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";
const startDate = new Date(2013, 0, 1).getTime();
const endDate = new Date(2014, 0, 1).getTime();
var OrientationType = /* @__PURE__ */ ((OrientationType2) => {
OrientationType2["Vertical"] = "vertical";
OrientationType2["Horizontal"] = "horizontal";
OrientationType2["Auto"] = "auto";
return OrientationType2;
})(OrientationType || {});
function createScene(canvas) {
const dataTableViews = getDataTables(startDate, endDate);
const curveIndice = [1, 2];
const names = ["CALI", "GR"];
const colors = [
"rgba(21, 101, 192, 0.85)",
"rgba(239, 108, 0, 0.85)"
];
function createWidget() {
const options = {
"title": {
"visible": false
},
"model": new Group().setModelLimits(new Rect(startDate, 0, endDate, 1)),
"curveaxis": {
"visible": true,
"autocoloraxis": true,
"autocolorlabel": true,
"titlevisible": true,
"axiswidth": 30,
"labelorientation": "vertical" /* Vertical */,
"tickgeneratoroptions": {
"major": {
"tickvisible": true,
"labelvisible": true
}
}
},
"curvelimits": {
"visible": false
},
"scrollbar": {
"type": ScrollBarType.Simple,
"height": 10,
"options": {
"resizable": true,
"rounded": true
}
},
"tooltips": {
"tooltipoptions": {
"nanvisibility": false
}
},
"lastupdatedate": {
"followcursor": true
}
};
const widget = new TimeSeriesWidget(options);
curveIndice.forEach((curveIndex, index) => {
widget.addCurve({
"name": names[index],
"uri": "//test//" + names[index].toLowerCase(),
"data": dataTableViews[curveIndex],
"properties": {
"neatlimits": true,
"autoscale": true,
"unit": "INS",
"linestyle": {
"color": colors[index],
"width": 1
}
}
});
});
return widget;
}
return new Plot({
"canvaselement": canvas,
"root": createWidget()
});
}
function setOrientation(widget, orientation) {
widget.setOptions({
"curveaxis": {
"labelorientation": orientation
}
});
}
function setAxisWidth(widget, axisWidth) {
widget.setOptions({
"curveaxis": {
"axiswidth": axisWidth
}
});
}
export { createScene, OrientationType, setAxisWidth, setOrientation };
createScene(document.querySelector('[ref="plot"]'));