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

JavaScript Pivot Table with Elasticsearch

Flexmonster Pivot Table & Charts provides a seamless connection to Elasticsearch.


    new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      height: 600,
      toolbar: true,
      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$",
          },
        ],
      },
      shareReportConnection: {
        url: "https://olap.flexmonster.com:9500",
      },
      beforetoolbarcreated: function (toolbar) {
        toolbar.showShareReportTab = true;
      },
    });
    
    <div id="pivot-container"></div>
    

    With Flexmonster JavaScript library, Elasticsearch data visualization is made simple. You can get the insights based on gigabytes of data.

    Fetch summarized data from your index, display it on the pivot grid or pivot charts, and start revealing insights in an instant.

    Find more details on the principles of how Flexmonster works with Elasticsearch data and how to connect to Elasticsearch from the reporting tool.