This article illustrates how to build a report based on an Elasticsearch data source.
If Flexmonster is not yet embedded, set up an empty component in your web page:
Complete the Quick start guide. Your code should look similar to the following example:
var pivot = new Flexmonster({
container: "pivotContainer",
toolbar: true
});
Complete the Integration with Angular guide. Your code should look similar to the following example:
<fm-pivot
[toolbar]="true">
</fm-pivot>
Complete the Integration with React guide. Your code should look similar to the following example:
<FlexmonsterReact.Pivot
toolbar={true}
/>
Complete the Integration with Vue guide. Your code should look similar to the following example:
<Pivot
ref="pivot"
toolbar>
</Pivot>
By default, the browser prevents JavaScript from making requests across domain boundaries. CORS allows web applications to make cross-domain requests. To enable CORS, open elasticsearch.yml
and add the following lines:
http.cors.enabled: true http.cors.allow-origin: "*" http.cors.allow-credentials: true http.cors.allow-headers: "X-Requested-With, Content-Type, Content-Length, Authorization"
To allow a connection to the Elasticsearch server from machines other than localhost, open an appropriate port in the firewall. The default port is 9200
, but it may be different depending on your configuration in the elasticsearch.yml
file.
Now it’s time to configure the pivot table on the web page. Let’s create a minimal report for this (replace the node
and index
parameters with your specific values):
var pivot = new Flexmonster({
container: "pivotContainer",
toolbar: true,
report: {
"dataSource": {
"type": "elasticsearch",
/* the host for the connection */
"node": "https://olap.flexmonster.com:9200",
/* the name of Elasticsearch index to connect */
"index": "fm-product-sales"
}
}
});
Launch the web page from a browser — there you go! A pivot table is embedded into your project. Check out the example on JSFiddle.
You may be interested in the following articles: