[{"id":"29a4ab0f-edd1-45e1-87df-0b8b4bb068b3","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"64b61a79-5817-4746-b591-28d4d5462c0a","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6edef660-641f-4cd8-84f6-571130f37ae2","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"89a3ee5c-06c4-49c4-ac61-8325ba4bcca1","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1e898427-e706-440e-9077-b35c7a5b8f46","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"4266ec12-a87a-444b-a8af-beff39a7defe","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"fd867fe6-72e0-4e45-bbac-edc72e608b08","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"fad338cd-7c96-48b9-a12d-1b979ba886b2","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6fb42249-b832-4656-9137-35d9948bea1c","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"6e353a93-c1d4-4387-bad5-4a07fd18ed3a","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"acbe820e-65b4-4bd6-bcf3-a9d5b16163da","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"167a076a-6a93-49f6-8bf8-adee9abd9817","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7fb1e240-d39d-4391-986f-c2d40adfb011","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"09cc5e9f-99c9-4258-b69c-ca5bb09a6b16","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"0b4ea8fb-4e7b-4028-9393-d1177a68ec17","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"35b8ea08-9ca6-49eb-a021-0c806de4ff96","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7bace066-1638-4034-82eb-0db8c15f5bd1","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7ec5ea8e-419f-40aa-b67d-301fa3e7b025","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"38f78942-4ca0-4631-a2d8-32dcfd6157a6","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"fc1d5e2a-5d1c-4479-ac87-c726c03d49aa","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"dd70702b-48a7-4896-b92d-db78ff9e52b0","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"cda2a866-9746-4790-9942-13c450ece8a1","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"3239f53b-81be-4d67-ae63-7ca0d6ce0f91","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"74c2daa1-efb0-4d3e-bd0c-8d11b297c92d","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"a4268f67-693d-4933-9e22-a77d68880a13","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9f17896b-55b4-4627-8b6d-b01fdabdffe7","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e45c5458-c148-4de7-a471-e2e3808d841e","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"ac44f25f-d7e5-46a3-a247-33e23e20e956","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"feb10296-b21e-4506-8d7e-567ed4dda994","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"ebba2e23-2c8d-4948-8cca-91ce71b3183d","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"ebdc80a9-26fc-4420-af7f-e576e4f12820","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2cb68b65-34df-4322-911c-ead14627af13","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"0f2df6ef-74f6-42d5-a6ff-fb830bac6bc1","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"1feb74f5-775b-4809-80bb-1757ff6070f9","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"d8afaaaf-0174-4a14-8ba1-59043a985e91","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"7fd72fd2-933b-4816-81d1-b9e9d86b7c2c","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9cf8d438-a37d-4dea-b0dd-e15d187e19ed","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"01561aea-2cd9-4883-a29a-1a7b9df2e432","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"ec2f2f29-d5a6-4fa0-aa61-353d48af9d1b","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"efb477ff-7d55-4163-a55e-a3c64415f6a4","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"c2302058-2cde-443c-a67f-e77cfd399c2e","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"a61a4e1a-eaea-4814-a424-e3c1ca6e3818","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"cb0d722f-fb48-45b5-a612-ff2df9b2e56e","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"50d0749d-1dde-4d8d-8963-e605f3a89b7a","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"900c820c-2909-4065-be81-72d3ca7733de","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"fac7dd69-11b1-42ee-8c1e-a41c97f4c3ee","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"9a357d48-c648-4ddb-8c79-2dc97bea6bc9","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"d5de4b91-714d-4c4c-8619-4b88fae85046","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"3741b662-b556-4859-8720-4c79fd48d48a","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"72db3e84-44c5-4d07-86b1-5f866a897e83","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"2a701ccf-5692-4ff9-9e44-62d6ec379397","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"d2087e5d-f90d-4827-a383-ff828bd65c69","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"bbf41a2c-98d3-4b54-82fb-a51c8441957e","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"477eb38f-0505-42fc-85ee-7456d81833e8","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"d9f37084-fcee-49d5-a192-8c41ee5615ed","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"067eb4be-9082-4153-8754-3bd0106a16ef","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"e943752e-d665-4133-ab1e-b6089d61b68a","tags":[{"product":null,"links":null,"id":"c3c0ef13-c7a9-4649-9fcb-23b3abec175d","name":"New","color":"Red","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]},{"id":"d573ae98-998d-4070-b089-620789e0738b","tags":[{"product":null,"links":null,"id":"2f377cfe-f512-431a-895b-f89af32041ce","name":"Upd","color":"Blue","productId":"c15646e4-63d8-4965-8d62-7549a2986e99"}]}]
In a Data Chart, it is essential to connect the chart to a data source to effectively display data. This topic explains how to bind data from the data source in Data Charts. In SpreadJS, a data source is typically represented as a table managed by the Data Manager, and the process of data visualization is completed by binding the table information from the Data Manager.
To create and manage Data Charts, use the IDataChartConfig
interface of the GC.Spread.Sheets.DataCharts namespace. This interface includes the following properties:
Property | Description |
---|---|
plots | [required] Plot options define how the data will be displayed in the chart. |
config | [optional] Additional configuration options for the data charts. |
tableName | [optional] Name of the table for data binding. |
In a Data Chart, users can specify the table from which the bound fields originate by setting config.tableName
.
Additionally, the IPlotEncodingsOption
interface allows users to define various encoding options for a plot within a data chart. Users can set the bound field information in config.plots[0].encodings
to display data in data charts. This includes the following fields:
Field | Description |
---|---|
values | Specifies which fields should be plotted along the Y-axis and supports multiple sub-properties. If the Data Chart does not have values set, it will bind to the default data provided by SpreadJS. Users can assign different summary types to each field based on specific requirements. When multiple fields are set for the values property, setting the legend field will not be effective; instead, the Data Chart will generate the legend based on the different values fields. Note that in some Data Chart types, such as 'pie' or 'donut' charts, the values can only be bound to a single field. |
category | Defines and groups data by axis or dimension. It segments the data into different categories, helping users better understand the distribution or trends within the data. In bar charts or line charts, the category typically represents time (such as years or months) or various classifications (such as regions or product types). In a pie chart, the category indicates which category each sector of the chart represents. When binding the category field, you can also set sort information that will be applied to the category. The sorting options include Field, Aggregate, and Order. |
details | Divides the data into multiple sub-sections, which can be clustered or stacked in the plot. In the Data Chart, all chart types, except for the sunburst chart type, can bind to only one details field at most. |
color | Displays color legend in chart types with different symbols. The color field can accept various types of values, including strings, booleans, dates, and numbers. |
size | Determines which field to apply a continuous size-based scale to for the plot and legend. Similar to the color legend, the size legend is used to visualize dimensions (typically three-dimensional) data on a numeric scale. It can only be applied to bubble plots. |
tooltip | Determines which fields will be displayed within the plot tooltip. Data Chart uses tooltip encoding to decide which fields will appear as tooltips for each plotted data point. When the mouse moves over the Data Chart and the tooltip is displayed, all other labels (such as axis labels or reference line labels) will be ignored. |
filter | Filters are applied to the source data, meaning the filtering is performed before the data is aggregated. This field includes two types of filtering methods in Data Charts: one for number data types and the other for string data types. The filters provided by the Data Chart can be nested across multiple levels. By using logical operations, you can set the "AND" or "OR" relationships within the same level. |
Note: In Data Chart, users can also bind data from multiple tables, but these tables must have an existing relationship and be connected through related fields.
The following code sample illustrates how to get the Data Manager and bind single and multiple tables.
// Get the Data Manager
const dataManager = spread.dataManager();
//1. Binding Data
// Add A Table to The Data Manager
const salesTable = createSalesTable(dataManager);
await salesTable.fetch();
const sheet = spread.getSheet(0);
sheet.name("Binding Data");
sheet.setColumnCount(25);
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [ // Value Mapping Specifies which fields should be plotted along the Y-Axis.
{
field: "Sales",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
],
category: { // Segments the data into categories, helping users better understand the distribution or tends of the data
field: "Product",
},
details: [ // The details field divides the data into multiple sub-partitions, which can be clustered or stacked in the plot
{
field: "Region"
}
],
color: { // Determines which field should be used to determine color assignations for the plot and legend
field: "Product"
},
filter: { // Filtering is performed before the data is aggregated
field: 'Region',
operate: GC.Spread.Sheets.DataCharts.StringOperator.contains,
value: 'East',
}
}
}
]
});
// 2. Binding Multiple Table
// In DataChart, uses can bind data from multiple Tables, but these tables must have an existing "Relationship" and be connected through related fields
// Add A Table to The Data Manager
const ordersTable = createOrders(dataManager);
await ordersTable.fetch();
// Add A Table to The Data Manager
const orderDetailsTable = createOrderDetails(dataManager);
await orderDetailsTable.fetch();
// Add RelationShip between the Tables
dataManager.addRelationship(ordersTable, "orderId", "orderDetailsTable", orderDetailsTable, "OrderId", "ordersTable");
let sheet2 = spread.getSheet(1);
sheet2.name("Binding Multiple Tables");
const dataChart3 = sheet2.dataCharts.add('data-chart-3', 10, 10, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart3.setChartConfig({
tableName: 'Orders', // Orders Table
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [
{ field: 'orderDetailsTable.OrderId', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }, // Refer to the orderDetailsTable field
],
category: { field: 'shipRegion' },
color: { field: 'shipRegion' },
}
}
]
});
function createOrders(dataManager) {
const records = [
[10248, "VINET", 5, "1996-07-04T00:00:00", "1996-08-01T00:00:00", "1996-07-16T00:00:00", 3, 32.38, "Vins et alcools Chevalier", "59 rue de l'Abbaye", "Reims", null, "51100", "France"],
[10249, "TOMSP", 6, "1996-07-05T00:00:00", "1996-08-16T00:00:00", "1996-07-10T00:00:00", 1, 11.61, "Toms Spezialitäten", "Luisenstr. 48", "Münster", null, "44087", "Germany"],
[10250, "HANAR", 4, "1996-07-08T00:00:00", "1996-08-05T00:00:00", "1996-07-12T00:00:00", 2, 65.83, "Hanari Carnes", "Rua do Paço, 67", "Rio de Janeiro", "RJ", "05454-876", "Brazil"],
[10251, "VICTE", 3, "1996-07-08T00:00:00", "1996-08-05T00:00:00", "1996-07-15T00:00:00", 1, 41.34, "Victuailles en stock", "2, rue du Commerce", "Lyon", null, "69004", "France"],
[10252, "SUPRD", 4, "1996-07-09T00:00:00", "1996-08-06T00:00:00", "1996-07-11T00:00:00", 2, 51.3, "Suprêmes délices", "Boulevard Tirou, 255", "Charleroi", null, "B-6000", "Belgium"],
[10253, "HANAR", 3, "1996-07-10T00:00:00", "1996-07-24T00:00:00", "1996-07-16T00:00:00", 2, 58.17, "Hanari Carnes", "Rua do Paço, 67", "Rio de Janeiro", "RJ", "05454-876", "Brazil"],
[10254, "CHOPS", 5, "1996-07-11T00:00:00", "1996-08-08T00:00:00", "1996-07-23T00:00:00", 2, 22.98, "Chop-suey Chinese", "Hauptstr. 31", "Bern", null, "3012", "Switzerland"],
[10255, "RICSU", 9, "1996-07-12T00:00:00", "1996-08-09T00:00:00", "1996-07-15T00:00:00", 3, 148.33, "Richter Supermarkt", "Starenweg 5", "Genève", null, "1204", "Switzerland"],
[10256, "WELLI", 3, "1996-07-15T00:00:00", "1996-08-12T00:00:00", "1996-07-17T00:00:00", 2, 13.97, "Wellington Importadora", "Rua do Mercado, 12", "Resende", "SP", "08737-363", "Brazil"],
[10257, "HILAA", 4, "1996-07-16T00:00:00", "1996-08-13T00:00:00", "1996-07-22T00:00:00", 3, 81.91, "HILARION-Abastos", "Carrera 22 con Ave. Carlos Soublette #8-35", "San Cristóbal", "Táchira", "5022", "Venezuela"],
[10258, "ERNSH", 1, "1996-07-17T00:00:00", "1996-08-14T00:00:00", "1996-07-23T00:00:00", 1, 140.51, "Ernst Handel", "Kirchgasse 6", "Graz", null, "8010", "Austria"],
[10259, "CENTC", 4, "1996-07-18T00:00:00", "1996-08-15T00:00:00", "1996-07-25T00:00:00", 3, 3.25, "Centro comercial Moctezuma", "Sierras de Granada 9993", "México D.F.", null, "05022", "Mexico"],
[10260, "OTTIK", 4, "1996-07-19T00:00:00", "1996-08-16T00:00:00", "1996-07-29T00:00:00", 1, 55.09, "Ottilies Käseladen", "Mehrheimerstr. 369", "Köln", null, "50739", "Germany"],
[10261, "QUEDE", 4, "1996-07-19T00:00:00", "1996-08-16T00:00:00", "1996-07-30T00:00:00", 2, 3.05, "Que Delícia", "Rua da Panificadora, 12", "Rio de Janeiro", "RJ", "02389-673", "Brazil"],
[10262, "RATTC", 8, "1996-07-22T00:00:00", "1996-08-19T00:00:00", "1996-07-25T00:00:00", 3, 48.29, "Rattlesnake Canyon Grocery", "2817 Milton Dr.", "Albuquerque", "NM", "87110", "USA"],
[10263, "ERNSH", 9, "1996-07-23T00:00:00", "1996-08-20T00:00:00", "1996-07-31T00:00:00", 3, 146.06, "Ernst Handel", "Kirchgasse 6", "Graz", null, "8010", "Austria"],
[10264, "FOLKO", 6, "1996-07-24T00:00:00", "1996-08-21T00:00:00", "1996-08-23T00:00:00", 3, 3.67, "Folk och fä HB", "Åkergatan 24", "Bräcke", null, "S-844 67", "Sweden"],
[10265, "BLONP", 2, "1996-07-25T00:00:00", "1996-08-22T00:00:00", "1996-08-12T00:00:00", 1, 55.28, "Blondel père et fils", "24, place Kléber", "Strasbourg", null, "67000", "France"],
[10266, "WARTH", 3, "1996-07-26T00:00:00", "1996-09-06T00:00:00", "1996-07-31T00:00:00", 3, 25.73, "Wartian Herkku", "Torikatu 38", "Oulu", null, "90110", "Finland"],
[10267, "FRANK", 4, "1996-07-29T00:00:00", "1996-08-26T00:00:00", "1996-08-06T00:00:00", 1, 208.58, "Frankenversand", "Berliner Platz 43", "München", null, "80805", "Germany"],
[10268, "GROSR", 8, "1996-07-30T00:00:00", "1996-08-27T00:00:00", "1996-08-02T00:00:00", 3, 66.29, "GROSELLA-Restaurante", "5ª Ave. Los Palos Grandes", "Caracas", "DF", "1081", "Venezuela"],
[10269, "WHITC", 5, "1996-07-31T00:00:00", "1996-08-14T00:00:00", "1996-08-09T00:00:00", 1, 4.56, "White Clover Markets", "1029 - 12th Ave. S.", "Seattle", "WA", "98124", "USA"],
[10270, "WARTH", 1, "1996-08-01T00:00:00", "1996-08-29T00:00:00", "1996-08-02T00:00:00", 1, 136.54, "Wartian Herkku", "Torikatu 38", "Oulu", null, "90110", "Finland"],
[10271, "SPLIR", 6, "1996-08-01T00:00:00", "1996-08-29T00:00:00", "1996-08-30T00:00:00", 2, 4.54, "Split Rail Beer & Ale", "P.O. Box 555", "Lander", "WY", "82520", "USA"],
[10272, "RATTC", 6, "1996-08-02T00:00:00", "1996-08-30T00:00:00", "1996-08-06T00:00:00", 2, 98.03, "Rattlesnake Canyon Grocery", "2817 Milton Dr.", "Albuquerque", "NM", "87110", "USA"],
[10273, "QUICK", 3, "1996-08-05T00:00:00", "1996-09-02T00:00:00", "1996-08-12T00:00:00", 3, 76.07, "QUICK-Stop", "Taucherstraße 10", "Cunewalde", null, "01307", "Germany"],
[10274, "VINET", 6, "1996-08-06T00:00:00", "1996-09-03T00:00:00", "1996-08-16T00:00:00", 1, 6.01, "Vins et alcools Chevalier", "59 rue de l'Abbaye", "Reims", null, "51100", "France"],
[10275, "MAGAA", 1, "1996-08-07T00:00:00", "1996-09-04T00:00:00", "1996-08-09T00:00:00", 1, 26.93, "Magazzini Alimentari Riuniti", "Via Ludovico il Moro 22", "Bergamo", null, "24100", "Italy"],
[10276, "TORTU", 8, "1996-08-08T00:00:00", "1996-08-22T00:00:00", "1996-08-14T00:00:00", 3, 13.84, "Tortuga Restaurante", "Avda. Azteca 123", "México D.F.", null, "05033", "Mexico"],
[10277, "MORGK", 2, "1996-08-09T00:00:00", "1996-09-06T00:00:00", "1996-08-13T00:00:00", 3, 125.77, "Morgenstern Gesundkost", "Heerstr. 22", "Leipzig", null, "04179", "Germany"],
[10278, "BERGS", 8, "1996-08-12T00:00:00", "1996-09-09T00:00:00", "1996-08-16T00:00:00", 2, 92.69, "Berglunds snabbköp", "Berguvsvägen 8", "Luleå", null, "S-958 22", "Sweden"],
[10279, "LEHMS", 8, "1996-08-13T00:00:00", "1996-09-10T00:00:00", "1996-08-16T00:00:00", 2, 25.83, "Lehmanns Marktstand", "Magazinweg 7", "Frankfurt a.M.", null, "60528", "Germany"],
[10280, "BERGS", 2, "1996-08-14T00:00:00", "1996-09-11T00:00:00", "1996-09-12T00:00:00", 1, 8.98, "Berglunds snabbköp", "Berguvsvägen 8", "Luleå", null, "S-958 22", "Sweden"],
[10281, "ROMEY", 4, "1996-08-14T00:00:00", "1996-08-28T00:00:00", "1996-08-21T00:00:00", 1, 2.94, "Romero y tomillo", "Gran Vía, 1", "Madrid", null, "28001", "Spain"],
[10282, "ROMEY", 4, "1996-08-15T00:00:00", "1996-09-12T00:00:00", "1996-08-21T00:00:00", 1, 12.69, "Romero y tomillo", "Gran Vía, 1", "Madrid", null, "28001", "Spain"],
[10283, "LILAS", 3, "1996-08-16T00:00:00", "1996-09-13T00:00:00", "1996-08-23T00:00:00", 3, 84.81, "LILA-Supermercado", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", "Barquisimeto", "Lara", "3508", "Venezuela"],
[10284, "LEHMS", 4, "1996-08-19T00:00:00", "1996-09-16T00:00:00", "1996-08-27T00:00:00", 1, 76.56, "Lehmanns Marktstand", "Magazinweg 7", "Frankfurt a.M.", null, "60528", "Germany"],
[10285, "QUICK", 1, "1996-08-20T00:00:00", "1996-09-17T00:00:00", "1996-08-26T00:00:00", 2, 76.83, "QUICK-Stop", "Taucherstraße 10", "Cunewalde", null, "01307", "Germany"],
[10286, "QUICK", 8, "1996-08-21T00:00:00", "1996-09-18T00:00:00", "1996-08-30T00:00:00", 3, 229.24, "QUICK-Stop", "Taucherstraße 10", "Cunewalde", null, "01307", "Germany"],
[10287, "RICAR", 8, "1996-08-22T00:00:00", "1996-09-19T00:00:00", "1996-08-28T00:00:00", 3, 12.76, "Ricardo Adocicados", "Av. Copacabana, 267", "Rio de Janeiro", "RJ", "02389-890", "Brazil"],
[10288, "REGGC", 4, "1996-08-23T00:00:00", "1996-09-20T00:00:00", "1996-09-03T00:00:00", 1, 7.45, "Reggiani Caseifici", "Strada Provinciale 124", "Reggio Emilia", null, "42100", "Italy"],
[10289, "BSBEV", 7, "1996-08-26T00:00:00", "1996-09-23T00:00:00", "1996-08-28T00:00:00", 3, 22.77, "B's Beverages", "Fauntleroy Circus", "London", null, "EC2 5NT", "UK"],
[10290, "COMMI", 8, "1996-08-27T00:00:00", "1996-09-24T00:00:00", "1996-09-03T00:00:00", 1, 79.7, "Comércio Mineiro", "Av. dos Lusíadas, 23", "Sao Paulo", "SP", "05432-043", "Brazil"],
[10291, "QUEDE", 6, "1996-08-27T00:00:00", "1996-09-24T00:00:00", "1996-09-04T00:00:00", 2, 6.4, "Que Delícia", "Rua da Panificadora, 12", "Rio de Janeiro", "RJ", "02389-673", "Brazil"],
[10292, "TRADH", 1, "1996-08-28T00:00:00", "1996-09-25T00:00:00", "1996-09-02T00:00:00", 2, 1.35, "Tradiçao Hipermercados", "Av. Inês de Castro, 414", "Sao Paulo", "SP", "05634-030", "Brazil"],
[10293, "TORTU", 1, "1996-08-29T00:00:00", "1996-09-26T00:00:00", "1996-09-11T00:00:00", 3, 21.18, "Tortuga Restaurante", "Avda. Azteca 123", "México D.F.", null, "05033", "Mexico"],
[10294, "RATTC", 4, "1996-08-30T00:00:00", "1996-09-27T00:00:00", "1996-09-05T00:00:00", 2, 147.26, "Rattlesnake Canyon Grocery", "2817 Milton Dr.", "Albuquerque", "NM", "87110", "USA"],
[10295, "VINET", 2, "1996-09-02T00:00:00", "1996-09-30T00:00:00", "1996-09-10T00:00:00", 2, 1.15, "Vins et alcools Chevalier", "59 rue de l'Abbaye", "Reims", null, "51100", "France"],
[10296, "LILAS", 6, "1996-09-03T00:00:00", "1996-10-01T00:00:00", "1996-09-11T00:00:00", 1, 0.12, "LILA-Supermercado", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", "Barquisimeto", "Lara", "3508", "Venezuela"],
[10297, "BLONP", 5, "1996-09-04T00:00:00", "1996-10-16T00:00:00", "1996-09-10T00:00:00", 2, 5.74, "Blondel père et fils", "24, place Kléber", "Strasbourg", null, "67000", "France"],
[10298, "HUNGO", 6, "1996-09-05T00:00:00", "1996-10-03T00:00:00", "1996-09-11T00:00:00", 2, 168.22, "Hungry Owl All-Night Grocers", "8 Johnstown Road", "Cork", "Co. Cork", null, "Ireland"],
[10299, "RICAR", 4, "1996-09-06T00:00:00", "1996-10-04T00:00:00", "1996-09-13T00:00:00", 2, 29.76, "Ricardo Adocicados", "Av. Copacabana, 267", "Rio de Janeiro", "RJ", "02389-890", "Brazil"],
];
const columns = ['orderId', 'customerId', 'employeeId', 'orderDate', 'requiredDate', 'shippedDate', 'shipVia', 'freight', 'shipName', 'shipAddress', 'shipCity', 'shipRegion', 'shipPostalCode', 'shipCountry'];
return dataManager.addTable('Orders', {
data: records.map((x) => {
const record = {};
columns.forEach((c, i) => record[c] = x[i]);
return record;
})
});
}
function createOrderDetails(dataManager) {
const records = [
[10248, 11, 14, 12, 0],
[10248, 42, 9.8, 10, 0],
[10248, 72, 34.8, 5, 0],
[10249, 14, 18.6, 9, 0],
[10249, 51, 42.4, 40, 0],
[10250, 41, 7.7, 10, 0],
[10250, 51, 42.4, 35, 0.15],
[10250, 65, 16.8, 15, 0.15],
[10251, 22, 16.8, 6, 0.05],
[10251, 57, 15.6, 15, 0.05],
[10251, 65, 16.8, 20, 0],
[10252, 20, 64.8, 40, 0.05],
[10252, 33, 2, 25, 0.05],
[10252, 60, 27.2, 40, 0],
[10253, 31, 10, 20, 0],
[10253, 39, 14.4, 42, 0],
[10253, 49, 16, 40, 0],
[10254, 24, 3.6, 15, 0.15],
[10254, 55, 19.2, 21, 0.15],
[10254, 74, 8, 21, 0],
[10255, 2, 15.2, 20, 0],
[10255, 16, 13.9, 35, 0],
[10255, 36, 15.2, 25, 0],
[10255, 59, 44, 30, 0],
[10256, 53, 26.2, 15, 0],
[10256, 77, 10.4, 12, 0],
[10257, 27, 35.1, 25, 0],
[10257, 39, 14.4, 6, 0],
[10257, 77, 10.4, 15, 0],
[10258, 2, 15.2, 50, 0.2],
[10258, 5, 17, 65, 0.2],
[10258, 32, 25.6, 6, 0.2],
[10259, 21, 8, 10, 0],
[10259, 37, 20.8, 1, 0],
[10260, 41, 7.7, 16, 0.25],
[10260, 57, 15.6, 50, 0],
[10260, 62, 39.4, 15, 0.25],
[10260, 70, 12, 21, 0.25],
[10261, 21, 8, 20, 0],
[10261, 35, 14.4, 20, 0],
[10262, 5, 17, 12, 0.2],
[10262, 7, 24, 15, 0],
[10262, 56, 30.4, 2, 0],
[10263, 16, 13.9, 60, 0.25],
[10263, 24, 3.6, 28, 0],
[10263, 30, 20.7, 60, 0.25],
[10263, 74, 8, 36, 0.25],
[10264, 2, 15.2, 35, 0],
[10264, 41, 7.7, 25, 0.15],
[10265, 17, 31.2, 30, 0],
[10265, 70, 12, 20, 0],
[10266, 12, 30.4, 12, 0.05],
[10267, 40, 14.7, 50, 0],
[10267, 59, 44, 70, 0.15],
[10267, 76, 14.4, 15, 0.15],
[10268, 29, 99, 10, 0],
[10268, 72, 27.8, 4, 0],
[10269, 33, 2, 60, 0.05],
[10269, 72, 27.8, 20, 0.05],
[10270, 36, 15.2, 30, 0],
[10270, 43, 36.8, 25, 0],
[10271, 33, 2, 24, 0],
[10272, 20, 64.8, 6, 0],
[10272, 31, 10, 40, 0],
[10272, 72, 27.8, 24, 0],
[10273, 10, 24.8, 24, 0.05],
[10273, 31, 10, 15, 0.05],
[10273, 33, 2, 20, 0],
[10273, 40, 14.7, 60, 0.05],
[10273, 76, 14.4, 33, 0.05],
[10274, 71, 17.2, 20, 0],
[10274, 72, 27.8, 7, 0],
[10275, 24, 3.6, 12, 0.05],
[10275, 59, 44, 6, 0.05],
[10276, 10, 24.8, 15, 0],
[10276, 13, 4.8, 10, 0],
[10277, 28, 36.4, 20, 0],
[10277, 62, 39.4, 12, 0],
[10278, 44, 15.5, 16, 0],
[10278, 59, 44, 15, 0],
[10278, 63, 35.1, 8, 0],
[10278, 73, 12, 25, 0],
[10279, 17, 31.2, 15, 0.25],
[10280, 24, 3.6, 12, 0],
[10280, 55, 19.2, 20, 0],
[10280, 75, 6.2, 30, 0],
[10281, 19, 7.3, 1, 0],
[10281, 24, 3.6, 6, 0],
[10281, 35, 14.4, 4, 0],
[10282, 30, 20.7, 6, 0],
[10282, 57, 15.6, 2, 0],
[10283, 15, 12.4, 20, 0],
[10283, 19, 7.3, 18, 0],
[10283, 60, 27.2, 35, 0],
[10283, 72, 27.8, 3, 0],
[10284, 27, 35.1, 15, 0.25],
[10284, 44, 15.5, 21, 0],
[10284, 60, 27.2, 20, 0.25],
[10284, 67, 11.2, 5, 0.25],
[10285, 1, 14.4, 45, 0.2],
[10285, 40, 14.7, 40, 0.2],
[10285, 53, 26.2, 36, 0.2],
[10286, 35, 14.4, 100, 0],
[10286, 62, 39.4, 40, 0],
[10287, 16, 13.9, 40, 0.15],
[10287, 34, 11.2, 20, 0],
[10287, 46, 9.6, 15, 0.15],
[10288, 54, 5.9, 10, 0.1],
[10288, 68, 10, 3, 0.1],
[10289, 3, 8, 30, 0],
[10289, 64, 26.6, 9, 0],
[10290, 5, 17, 20, 0],
[10290, 29, 99, 15, 0],
[10290, 49, 16, 15, 0],
[10290, 77, 10.4, 10, 0],
[10291, 13, 4.8, 20, 0.1],
[10291, 44, 15.5, 24, 0.1],
[10291, 51, 42.4, 2, 0.1],
[10292, 20, 64.8, 20, 0],
[10293, 18, 50, 12, 0],
[10293, 24, 3.6, 10, 0],
[10293, 63, 35.1, 5, 0],
[10293, 75, 6.2, 6, 0],
[10294, 1, 14.4, 18, 0],
[10294, 17, 31.2, 15, 0],
[10294, 43, 36.8, 15, 0],
[10294, 60, 27.2, 21, 0],
[10294, 75, 6.2, 6, 0],
[10295, 56, 30.4, 4, 0],
[10296, 11, 16.8, 12, 0],
[10296, 16, 13.9, 30, 0],
[10296, 69, 28.8, 15, 0],
[10297, 39, 14.4, 60, 0],
[10297, 72, 27.8, 20, 0],
[10298, 2, 15.2, 40, 0],
[10298, 36, 15.2, 40, 0.25],
[10298, 59, 44, 30, 0.25],
[10298, 62, 39.4, 15, 0],
[10299, 19, 7.3, 15, 0],
[10299, 70, 12, 20, 0],
];
const columns = ['OrderId', 'ProductId', 'UnitPrice', 'Quantity', 'Discount'];
const table = dataManager.addTable('OrderDetails', {
data: records.map((x) => {
const record = {};
columns.forEach((c, i) => record[c] = x[i]);
return record;
})
});
table.fetch().then(() => {
table.columns.Sales = {
value: "=[@UnitPrice]*[@Quantity]*(1-[@Discount])",
caption: "Sales"
};
});
return table;
}
function createSalesTable(dataManager) {
const records = [
['2021', 'East', 'SunLin', 'Drinks', 'Apple Juice', 140, 9],
['2021', 'East', 'JinShiPeng', 'Drinks', 'Apple Juice', 290, 17],
['2021', 'East', 'ZhangShang', 'Drinks', 'Apple Juice', 300, 28],
['2021', 'East', 'SunYang', 'Drinks', 'Apple Juice', 120, 10],
['2021', 'East', 'YuanChengJie', 'Drinks', 'Apple Juice', 220, 15],
['2021', 'North', 'ZhangYing', 'Drinks', 'Apple Juice', 250.0, 23],
['2021', 'North', 'WangWei', 'Drinks', 'Apple Juice', 180.0, 17],
['2021', 'North', 'ZhangWu', 'Drinks', 'Apple Juice', 233.0, 23],
['2021', 'North', 'HanWen', 'Drinks', 'Apple Juice', 123.0, 12],
['2021', 'East', 'SunLin', 'Drinks', 'Milk', 431.0, 38],
['2021', 'East', 'JinShiPeng', 'Drinks', 'Milk', 635.0, 56],
['2021', 'East', 'ZhangShang', 'Drinks', 'Milk', 324.0, 33],
['2021', 'East', 'SunYang', 'Drinks', 'Milk', 644.0, 68],
['2021', 'East', 'YuanChengJie', 'Drinks', 'Milk', 343.0, 19],
['2021', 'North', 'ZhangYing', 'Drinks', 'Milk', 234.0, 13],
['2021', 'North', 'WangWei', 'Drinks', 'Milk', 666.0, 39],
['2021', 'North', 'ZhangWu', 'Drinks', 'Milk', 700.0, 77],
['2021', 'North', 'HanWen', 'Drinks', 'Milk', 111.0, 8],
['2021', 'East', 'SunLin', 'Drinks', 'Orange Juice', 176.0, 18],
['2021', 'East', 'JinShiPeng', 'Drinks', 'Orange Juice', 500.0, 20],
['2021', 'East', 'ZhangShang', 'Drinks', 'Orange Juice', 340.0, 19],
['2021', 'East', 'SunYang', 'Drinks', 'Orange Juice', 540.0, 45],
['2021', 'East', 'YuanChengJie', 'Drinks', 'Orange Juice', 563.0, 56],
['2021', 'North', 'ZhangYing', 'Drinks', 'Orange Juice', 300.0, 19],
['2021', 'North', 'WangWei', 'Drinks', 'Orange Juice', 490.0, 44],
['2021', 'North', 'ZhangWu', 'Drinks', 'Orange Juice', 233.0, 25],
['2021', 'North', 'HanWen', 'Drinks', 'Orange Juice', 760.0, 78],
['2021', 'East', 'SunLin', 'Dessert', 'Chocolate', 333.0, 32],
['2021', 'East', 'JinShiPeng', 'Dessert', 'Chocolate', 420.0, 46],
['2021', 'East', 'ZhangShang', 'Dessert', 'Chocolate', 318.0, 37],
['2021', 'East', 'SunYang', 'Dessert', 'Chocolate', 256.0, 21],
['2021', 'East', 'YuanChengJie', 'Dessert', 'Chocolate', 583.0, 54],
['2021', 'North', 'ZhangYing', 'Dessert', 'Chocolate', 352.0, 33],
['2021', 'North', 'WangWei', 'Dessert', 'Chocolate', 384.0, 39],
['2021', 'North', 'ZhangWu', 'Dessert', 'Chocolate', 435.0, 42],
['2021', 'North', 'HanWen', 'Dessert', 'Chocolate', 356.0, 36],
['2021', 'East', 'SunLin', 'Dessert', 'Beef Jerky', 789.0, 73],
['2021', 'East', 'JinShiPeng', 'Dessert', 'Beef Jerky', 156.0, 14],
['2021', 'East', 'ZhangShang', 'Dessert', 'Beef Jerky', 289.0, 23],
['2021', 'East', 'SunYang', 'Dessert', 'Beef Jerky', 562.0, 45],
['2021', 'East', 'YuanChengJie', 'Dessert', 'Beef Jerky', 546.0, 56],
['2021', 'North', 'ZhangYing', 'Dessert', 'Beef Jerky', 218.0, 17],
['2021', 'North', 'WangWei', 'Dessert', 'Beef Jerky', 541.0, 56],
['2021', 'North', 'ZhangWu', 'Dessert', 'Beef Jerky', 219.0, 21],
['2021', 'North', 'HanWen', 'Dessert', 'Beef Jerky', 345.0, 21],
];
const columns = ['Year', 'Region', 'Salesman', 'ProductCategory', 'Product', 'Sales', 'Return'];
return dataManager.addTable('Sales', {
data: records.map((x) => {
const record = {};
columns.forEach((c, i) => record[c] = x[i]);
return record;
})
});
}