Need a special offer?Find out if your project fits.
+
List of all demos

Vue Pivot Table with Elasticsearch

Use our pivot grid component with Elasticsearch data source in Vue.js.


    <template>
      <Pivot
        height="600"
        toolbar
        v-bind:report="report"
        v-bind:shareReportConnection="{
          url: 'https://olap.flexmonster.com:9500',
        }"
        v-bind:beforetoolbarcreated="customizeToolbar"
      />
    </template>
    
    <script>
    import Pivot from "vue-flexmonster/vue3";
    import "flexmonster/flexmonster.css";
    
    export default {
      name: "PivotComponent",
      components: {
        Pivot,
      },
      data() {
        return {
          report: {
            dataSource: {
              type: "elasticsearch",
              node: "https://olap.flexmonster.com:9200",
              index: "australian_weather",
              mapping: {
                "Date": {
                  caption: "Date",
                  format: "yyyy",
                  interval: "1y",
                },
                "Location": {
                  caption: "Location",
                },
                "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",
                },
                "State.keyword": {
                  caption: "State",
                },
                "Location.keyword": {
                  caption: "Location",
                },
              },
            },
            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",
                  grandTotalCaption: "Min Temp",
                  format: "-10ws2q1oviodoa",
                },
                {
                  uniqueName: "Max Temperature",
                  aggregation: "max",
                  grandTotalCaption: "Max Temp",
                  format: "-10mkdp0yjbxs4e",
                },
                {
                  uniqueName: "Wind Speed",
                  aggregation: "average",
                  grandTotalCaption: "Wind Speed",
                  format: "-12d55123ugyhur",
                },
              ],
            },
            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: "-12d55123ugyhur",
                currencySymbol: " km/h",
                positiveCurrencyFormat: "1$",
                negativeCurrencyFormat: "-1$",
              },
              {
                name: "-10ws2q1oviodoa",
                currencySymbol: " °C",
                positiveCurrencyFormat: "1$",
                negativeCurrencyFormat: "-1$",
              },
              {
                name: "-10mkdp0yjbxs4e",
                currencySymbol: " °C",
                positiveCurrencyFormat: "1$",
                negativeCurrencyFormat: "-1$",
              },
            ],
          },
        };
      },
      methods: {
        customizeToolbar(toolbar) {
          toolbar.showShareReportTab = true;
        },
      },
    };
    </script>
    

    Smoothly connect your Vue pivot grid to Elasticsearch to get the aggregated data.

    We made it possible to see insights based on gigabytes of data just in a matter of seconds. And there is no need to load all the raw data into the pivot table to build the data cube – Flexmonster sends a sequence of queries to get the summarized data from Elasticsearch.

    For further details, check out how Elasticserach works with Flexmonster.