Flexmonster provides a seamless connection of your Angular pivot table to Elasticsearch.
Play with the demo on a larger screen: save this link for later or watch the video review now.
import { Component } from "@angular/core";
import { FlexmonsterPivotModule } from "ngx-flexmonster";
@Component({
selector: "pivot-table-demo",
imports: [FlexmonsterPivotModule],
templateUrl: "./pivot-table-demo.component.html"
})
export class PivotTableDemo {
public report: Object = {
dataSource: {
type: "elasticsearch",
node: "https://olap.flexmonster.com:9200",
index: "australian_weather",
mapping: {
"Date": {
caption: "Date",
format: "yyyy",
interval: "1y"
},
"Min Temperature": {
caption: "Min Temp"
},
"Max Temperature": {
caption: "Max Temp"
},
"Rainfall": {
caption: "Rainfall"
},
"Evaporation": {
caption: "Evaporation"
},
"Sunshine": {
caption: "Sunshine"
},
"Wind Speed": {
caption: "Wind Speed"
},
"Rain Today": {
caption: "Rain Today"
},
"Rain Tomorrow": {
caption: "Rain Tomorrow"
},
"Location.keyword": {
caption: "Location"
},
"State.keyword": {
caption: "State"
}
}
},
slice: {
rows: [
{
uniqueName: "State.keyword"
},
{
uniqueName: "Location.keyword"
}
],
columns: [
{
uniqueName: "Date",
filter: {
query: {
after: "2008-12-31"
}
}
},
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Min Temperature",
aggregation: "min",
format: "temperature"
},
{
uniqueName: "Max Temperature",
aggregation: "max",
format: "temperature"
},
{
uniqueName: "Wind Speed",
aggregation: "average",
format: "windSpeed"
}
]
},
options: {
grid: {
showTotals: "off",
showGrandTotals: "off"
},
showAggregationLabels: false
},
conditions: [
{
formula: "#value > 42",
measure: "Max Temperature",
aggregation: "max",
format: {
backgroundColor: "#FFB74D",
color: "#000000",
fontFamily: "Arial",
fontSize: "12px"
}
},
{
formula: "#value < 0",
measure: "Min Temperature",
aggregation: "min",
format: {
backgroundColor: "#81D4FA",
color: "#000000",
fontFamily: "Arial",
fontSize: "12px"
}
}
],
formats: [
{
name: "",
decimalPlaces: 1
},
{
name: "temperature",
currencySymbol: " °C",
positiveCurrencyFormat: "1$",
negativeCurrencyFormat: "-1$"
},
{
name: "windSpeed",
currencySymbol: " km/h",
positiveCurrencyFormat: "1$",
negativeCurrencyFormat: "-1$"
}
]
};
customizeToolbar(toolbar: Flexmonster.Toolbar) {
toolbar.showShareReportTab = true;
}
}
<fm-pivot
[height]="600"
[toolbar]="true"
[report]="report"
(beforetoolbarcreated)="customizeToolbar($event)"
[shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
/>
Data visualization and web reporting with Angular and Elasticsearch have never been so fast: upload billions of rows of aggregated data and visualize them in one click.
Save time and load only the data you need: use the abilities of our Angular dynamic pivot table to expand the members you are interested in.
Get straight to using this data source with our Angular data grid: see our Elasticsearch connection guide.
Can't find your answer here?
Visit the FAQ page
Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.
Flexmonster works in plain JavaScript and TypeScript projects. It also integrates with React, Next.js, Angular, Vue, Blazor, and other technologies. See all integration options.
Flexmonster supports JSON and CSV files, SQL databases, MongoDB, Elasticsearch, and Microsoft Analysis Services (SSAS). You can also connect other data sources through your own backend. See supported data sources.
Flexmonster offers licenses for internal corporate use, SaaS products, and OEM distribution. Pricing varies by license and plan. SaaS projects can also use the free SaaS Entry license during development. Learn more on the pricing page.
Yes. Flexmonster offers a 30-day free trial that lets you evaluate all its features. No credit card is required. The trial version has a watermark.
To get started with Flexmonster, follow our integration guide.