データの連携
データチャートでは、データを効果的に表示するためにチャートをデータソースに接続することが不可欠です。このトピックでは、データチャートでデータソースからデータを連携する方法について説明します。SpreadJSでは、データソースは通常、データマネージャーが管理するテーブルとして表され、データマネージャーからテーブル情報を連携することでデータの可視化処理が完了します。
データチャートを作成および管理するには、GC.Spread.Sheets.DataCharts 名前空間のIDataChartConfigインターフェイスを使用します。このインターフェイスには、次のプロパティが含まれます。
プロパティ | 説明 |
|---|---|
plots | [必須] チャートでのデータの表示方法を定義します。 |
config | [オプション] データチャートの追加設定オプション。 |
tableName | [オプション] データ連携用のテーブルの名前。 |
データチャートでは、config.tableName を設定することで、連携されたフィールドの元となるテーブルを指定できます。
さらに、IPlotEncodingsOptionインターフェイスを使用すると、データチャート内のプロットのさまざまなエンコードオプションを定義できます。config.plots[0].encodingsで連携されたフィールド情報を設定し、データチャートにデータを表示できます。これには次のフィールドが含まれます。
フィールド | 説明 |
|---|---|
values | Y 軸に沿ってプロットするフィールドを指定し、複数のサブプロパティをサポートします。データチャートに値が設定されていない場合、SpreadJSが提供するデフォルトデータに連携されます。ユーザーは、特定の要件に基づいて、各フィールドに異なるサマリータイプを割り当てることができます。valuesプロパティに複数のフィールドが設定されている場合、凡例フィールドの設定は有効ではありません。代わりに、データチャートは、異なるvaluesフィールドに基づいて凡例を生成します 円チャートやドーナツチャートなどの一部のデータチャートタイプでは、valuesは1つのフィールドにしか連携できないことに注意してください。 |
category | 軸またはディメンションによってデータを定義し、グループ化します。データをさまざまなカテゴリに分割することで、ユーザーがデータ内の分布や傾向を理解しやすくなります。棒チャートや折れ線チャートでは、通常、時間 (年や月など) またはさまざまな分類 (地域や製品タイプなど) を表します。円チャートでは、円の各スライスが表すカテゴリを示します。 categoryフィールドを連携するときに、適用される並べ替え情報も設定できます。並べ替えオプションには、Field、Aggregate、Orderがあります。 |
details | データを複数のサブセクションに分割し、チャート内でクラスター化または積み重ねることができます。データチャートでは、サンバーストチャートを除くすべてのチャート種類は、最大で1つのdetailsフィールドにのみ連携できます。 |
color | さまざまなシンボルを持つチャート種類で色の凡例を表示します。Colorフィールドには、文字列、ブール値、日付、数値など、さまざまな値の種類を指定できます。 |
size | プロットと凡例に連続したサイズベースのスケールを適用するフィールドを決定します。色の凡例と同様に、サイズの凡例は、ディメンション (通常は3次元) データを数値スケールで視覚化するために使用されます。バブルチャートにのみ適用できます。 |
tooltip | ツールチップ内に表示されるフィールドを決定します。データチャートは、ツールチップエンコーディングを使用して、各データポイントのツールチップとして表示されるフィールドを決定します。マウスをデータチャートの上に移動してツールチップが表示されると、他のすべてのラベル (軸ラベルや参照線ラベルなど) は無視されます。 |
filter | フィルタはソースデータに適用されます。つまり、フィルタ処理はデータが集計される前に実行されます。このフィールドは、データチャートの2種類のフィルタ処理方法をサポートしています。1つは数値データ型用、もう1つは文字列データ型用です。 データチャートで提供されるフィルタは、複数のレベルにネストできます。論理演算を使用すると、同じレベル内でANDまたはOR関係を設定できます。 |
メモ: データチャートでは、複数のテーブルからデータを連携することもできますが、これらのテーブルには既存のリレーションシップがあり、関連フィールドを介して接続されている必要があります。
コードの使用
次のサンプルコードは、データマネージャーを取得し、単一および複数のテーブルを連携する方法を示しています。
//データマネージャーを取得します。
const dataManager = spread.dataManager();
//1. データバインディング
// データマネージャーにテーブルを追加します。
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: [ //Y軸に沿ってプロットするフィールドを指定します。
{
field: "Sales",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
],
category: { //データをカテゴリに分割し、ユーザーがデータの分布や傾向をよりよく理解できるようにします。
field: "Product",
},
details: [ //詳細フィールドはデータを複数のサブセクションに分割し、プロット内でクラスター化または積み重ねることができます。 {
field: "Region"
}
],
color: { //プロットと凡例の色の割り当てを決定します。
field: "Product"
},
filter: { //データが集計される前にフィルタ処理が実行されます。
field: 'Region',
operate: GC.Spread.Sheets.DataCharts.StringOperator.contains,
value: 'East',
}
}
}
]
});
// 2. 複数のテーブルを連携します。
//データチャートでは、複数のテーブルからデータを連携できますが、これらのテーブルには既存のリレーションシップがあり、関連するフィールドを介して接続されている必要があります。
//データマネージャーにテーブルを追加します。
const orderDetailsTable = createOrderDetails(dataManager);
await orderDetailsTable.fetch();
// テーブル間のリレーションシップを追加します。
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', //注文表
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [
{ field: 'orderDetailsTable.OrderId', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }, //orderDetailsTableフィールドを参照します。
],
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;
})
});
}