{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Data Source","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"data-source","__idx":0},"children":["Data Source"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"overview","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/charts/datasource/dataSource#overview"},"children":["#"]}," Overview"]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/datasource.bdb3d21c63c8175966828d8c7eb3508a9271d86531d307c77956fe824e1025a7.1e9cefff.png"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["DataSource is a unique object that stores all ChartWidget data and distributes this data to charts for display. This object can be created automatically and filled as data arrives, or set manually. In the latter case, user can use the same DataSource instance on two (or more) widgets, managing data and selection synchronization between them."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"data-tables","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/charts/datasource/dataSource#dataTables"},"children":["#"]}," Data Tables"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["DataSource stores data as a set of tables (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/data/DataTable"]},") with a unique identifier, each of which in turn is a set of DataSeries (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/data/DataSeries"]},") columns storing data array of the same type:"]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/datatable.d50ed5de2d3bb318defe7f3ace25a7510ecac28acdfe55b2d3968dabbcd0c457.1e9cefff.png"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each chart is built using data from one of the tables, the identifier of which is specified in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["table"]}," field of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["series"]}," options. Each data series (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["x"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["y"]},", etc.) of the chart is a string identifier linking to a data series in this table. Thus, the user does not need to re-specify data for each chart, and can also freely switch the display from one data table to another (see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Charts/GettingStarted/gettingStarted#dataTables"},"children":["example here"]},")."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If no table identifier is specified, both the chart and DataSource use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}," identifier. Other tables can be added and removed using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["add"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["set"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["remove"]}," methods. If one or more data series are missing to display the visual, the chart will be temporarily hidden and will reappear as soon as the data is updated and ready."]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/datatables.7b4fcc5d2a50bc66d329f19e9607e04fba047bf74b3bb0efa626fd1ad1c8df52.1e9cefff.png"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"selection-states","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/charts/datasource/dataSource#selectionStates"},"children":["#"]}," Selection States"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Besides separating data information from display style and ease of charts creation, DataSource has the purpose of synchronizing charts with each other. To do this, it stores selection states that are applied on the stored data, which can be done by any connected chart (or user), and which other charts can see and react to:"]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/selection-sample.7ea938e0e289bea7ecc69f505cc106d8882d2304850d7ce942fdac6ca880734e.1e9cefff.png"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An arbitrary string is used as a state, so the user can enter new states by writing their own logic for reacting to it. By default, ChartWidget supports two main states: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hover"]}," (applied by charts when the mouse hovers over the sample) and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selection"]}," (when clicking on it). For ease of reaction customization, the corresponding styles can be customized using CSS with the applied state, for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["*[cssclass=\"linechart-series\"]:hover"]},". For a more detailed description and examples, see the corresponding chart tutorial."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["DataSource supports selecting an arbitrary number of states per data sample, and can also apply a state to the entire dataseries (for example, highlighting the LineChart's polyline instead of a specific points):"]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/selection-series.6a28ff6aeaad5f7497a6b298630b171af719e931c4b08c03a429ba028eeebcca.1e9cefff.png"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, all charts added to the same ChartWidget are synchronized. To avoid this, you can use different ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selection"]}," identifiers for the chart (property of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["series"]}," options). Each ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selection"]}," stores a \"snapshot\" of the states on the data. So for example, user can easily synchronize Chart-1 with Chart-2, and Chart-3 with Chart-4 so that the pairs are not synchronized with each other. To do this, just specify matching ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selection"]}," identifiers. The default selection has the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}," identifier."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To start managing the SelectionSeries instance, use the DataSource ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["getSelection"]}," method. After that, the user will have access to operations on selection, such as:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["select"]}," to add the selected data series and samples with the string state provided. It is important that if a specific series identifier is not specified, the selection applies to all series in the table. The same principle applies to all other operations listed below."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setSelection"]}," to overwrite the selection for the string state provided."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["toggle"]}," to change the state of the selection with the string state provided. In case of an empty indices array, the entire data series selection will be toggled. Each sample is toggled separately, i.e. the call can simultaneously turn on unselected indices and turn off selected ones."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deselect"]}," to remove selection of data with the string state provided."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["clear"]}," to deselect all data and all states (or one state if string state provided)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["getSelection"]}," to get all selected series and indices for the string state provided. Does not include series names selected in an unspecified manner."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["getIndices"]}," to get the selected indices of the series for the string state provided."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["getRawSelection"]}," to get the selected indices of the series for the string state provided. Supports non-integer indices selection for charts such as LineChart that can select between samples."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isEmpty"]}," to check for the presence of selected data for the string state provided."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isSelected"]}," to check that all passed series and indices were selected for the string state provided."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["contains"]}," to check that some passed series and indices were selected for the string state provided."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"selection-tool","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/charts/datasource/dataSource#selectionTool"},"children":["#"]}," Selection Tool"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ChartWidget has the default behavior based on built-in tools for its selection and highlighting. The user can customize the behavior logic, but for convenience the highlighting process was split into the following customizable components:"]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/highlight-flowchart.9d3524dcf8be8ac0ee843101ff246462c2cfe48ea8be66c4dc74e859ec3cbd8f.1e9cefff.png"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["SelecitonTool is configured by default to respond to mouse events (such as mouseover, leave, click, etc.), which triggers the following algorithm. First, the required selection area is calculated (by default, a point; in rubberband or a specified ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selectionmode"]},", a rectangle). After that, the information is processed by the custom ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["callback"]}," of the ChartWidget ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selection"]}," options."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The default callback is also exported from the module as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultSelectionCallback"]}," so that if the user needs to change a small detail (like disable on condition) there won't be a need to rewrite the function for the user. The purpose of the callback is to get the selected data under the mouse (or as a result of an event) point or the lack thereof. The same callback is used to manage the tooltip, you can read more about it ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/pages/charts/tooltip/tooltip#selectionCallback"},"children":["here"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The calculated selection data is then process by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["highlight"]}," callback on the ChartWidget, whose purpose is to apply the selection to the DataSource. Similar to the selection callback, this method can be changed by the user, and the default behavior is exported from the module as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultHighlightCallback"]},". This behavior can be described as follows:"]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/highlight-callback-flowchart.e988ce9ff5d3d705472de2c34c29ba08f3e0ec840448a69020934b1f4742bfb1.1e9cefff.png"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["As you can see, it only applies the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hover"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selection"]}," states. In case a different behavior is required, the user only needs to change this callback without affecting the selection calculation algorithm. And vice versa, the selection logic can be changed without changing the applying states."]}]},"headings":[{"value":"Data Source","id":"data-source","depth":1},{"value":"Overview","id":"overview","depth":3},{"value":"Data Tables","id":"data-tables","depth":3},{"value":"Selection States","id":"selection-states","depth":3},{"value":"Selection Tool","id":"selection-tool","depth":3}],"frontmatter":{"title":"Data Source","seo":{"title":"Data Source"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/programmers-guide/architecture-overview/charts/data-source","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}