Get Free Trial
List of all demos

Flexmonster Pivot Charts for React

Flexmonster Pivot Charts — another approach to the visualization of aggregated data using chart libraries.


    import React, { Component } from "react";
    import * as FlexmonsterReact from "react-flexmonster";
    
    class PivotTableDemo extends Component {
      render() {
        return (
          <>
            <button className="button-red" onClick={this.showGrid}>
              Grid
            </button>
            <button
              className="button-red"
              onClick={() => this.showColumnChart("column")}
            >
              Column
            </button>
            <button
              className="button-red"
              onClick={() => this.showBarChart("bar_h")}
            >
              Bar
            </button>
            <button
              className="button-red"
              onClick={() => this.showLineChart("line")}
            >
              Line
            </button>
            <button
              className="button-red"
              onClick={() => this.showScatterChart("scatter")}
            >
              Scatter
            </button>
            <button className="button-red" onClick={() => this.showPieChart("pie")}>
              Pie
            </button>
            <button
              className="button-red"
              onClick={() => this.showColumnLineChart("column_line")}
            >
              Combo
            </button>
            <button
              className="button-red"
              onClick={() => this.showStackedColumn("stacked_column")}
            >
              Stacked
            </button>
            <div className="App">
              <FlexmonsterReact.Pivot
                ref="pivot"
                componentFolder="https://cdn.flexmonster.com/"
                width="100%"
                height={500}
                report={{
                  dataSource: {
                    filename: "data/demos/pivot-charts-demo-data.json",
                  },
                  options: {
                    viewType: "charts",
                    chart: {
                      type: "column",
                    },
                    configuratorActive: false,
                  },
                  slice: {
                    rows: [
                      {
                        uniqueName: "Order Date.Month",
                      },
                    ],
                    columns: [
                      {
                        uniqueName: "City",
                        filter: {
                          measure: {
                            uniqueName: "Orders",
                            aggregation: "sum",
                          },
                          query: {
                            top: 5,
                          },
                        },
                      },
                      {
                        uniqueName: "[Measures]",
                      },
                    ],
                    measures: [
                      {
                        uniqueName: "Orders",
                        aggregation: "sum",
                      },
                    ],
                  },
                }}
              />
            </div>
          </>
        );
      }
    
      showGrid = () => {
        let pivotReport = this.refs.pivot.flexmonster.getReport();
        pivotReport.slice = {
          reportFilters: [
            {
              uniqueName: "Order Date.Year",
            },
            {
              uniqueName: "Order Date.Month",
            },
            {
              uniqueName: "Order Date.Day",
            },
          ],
          rows: [
            {
              uniqueName: "Payment Type",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
            {
              uniqueName: "Referring Site",
            },
          ],
          measures: [
            {
              uniqueName: "Revenue",
              formula: 'sum("Amount") * sum("Price")',
              individual: true,
              caption: "Revenue",
              format: "currency",
            },
          ],
        };
        pivotReport.conditions = [
          {
            formula: "#value < 45000",
            measure: "Revenue",
            format: {
              backgroundColor: "#df3800",
              color: "#fff",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
          {
            formula: "#value > 400000",
            measure: "Revenue",
            format: {
              backgroundColor: "#00a45a",
              color: "#fff",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
        ];
        pivotReport.options = {
          viewType: "grid",
        };
        this.refs.pivot.flexmonster.setReport(pivotReport);
      };
    
      showColumnChart = (type) => {
        let pivotReport = this.refs.pivot.flexmonster.getReport();
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Order Date.Month",
            },
          ],
          columns: [
            {
              uniqueName: "City",
              filter: {
                measure: {
                  uniqueName: "Orders",
                  aggregation: "sum",
                },
                query: {
                  top: 5,
                },
              },
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum",
            },
          ],
        };
        pivotReport.options = {
          viewType: "charts",
          chart: {
            type: type,
          },
        };
        this.refs.pivot.flexmonster.setReport(pivotReport);
      };
    
      showLineChart = (type) => {
        let pivotReport = this.refs.pivot.flexmonster.getReport();
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Order Date.Year",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
            {
              uniqueName: "Referring Site",
              filter: {
                measure: {
                  uniqueName: "Orders",
                  aggregation: "sum",
                },
                query: {
                  top: 2,
                },
              },
            },
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum",
            },
          ],
          sorting: {
            row: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Orders",
                aggregation: "sum",
              },
            },
          },
        };
        pivotReport.options = {
          viewType: "charts",
          chart: {
            type: type,
          },
        };
        this.refs.pivot.flexmonster.setReport(pivotReport);
      };
    
      showStackedColumn = (type) => {
        let pivotReport = this.refs.pivot.flexmonster.getReport();
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Payment Type",
              filter: {
                measure: {
                  uniqueName: "Orders",
                },
                query: {
                  top: 3,
                },
              },
            },
          ],
          columns: [
            {
              uniqueName: "Referring Site",
              filter: {
                measure: {
                  uniqueName: "Orders",
                },
                query: {
                  top: 3,
                },
              },
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum",
            },
          ],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Orders",
                aggregation: "sum",
              },
            },
          },
        };
        pivotReport.options = {
          viewType: "charts",
          chart: {
            type: type,
          },
        };
        this.refs.pivot.flexmonster.setReport(pivotReport);
      };
    
      showBarChart = (type) => {
        let pivotReport = this.refs.pivot.flexmonster.getReport();
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Referring Site",
              filter: {
                measure: {
                  uniqueName: "Orders",
                  aggregation: "sum",
                },
                query: {
                  top: 6,
                },
              },
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
            {
              uniqueName: "Payment Type",
              filter: {
                members: ["payment type.[debit card]", "payment type.[invoice]"],
              },
            },
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum",
            },
          ],
        };
        pivotReport.options = {
          viewType: "charts",
          chart: {
            type: type,
          },
        };
        this.refs.pivot.flexmonster.setReport(pivotReport);
      };
    
      showPieChart = (type) => {
        let pivotReport = this.refs.pivot.flexmonster.getReport();
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "City",
              filter: {
                measure: {
                  uniqueName: "Revenue",
                },
                query: {
                  top: 5,
                },
              },
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Revenue",
              formula: 'sum("Amount") * sum("Price")',
              individual: true,
              format: "currency",
              caption: "Revenue",
            },
          ],
        };
        pivotReport.options = {
          viewType: "charts",
          chart: {
            type: type,
          },
        };
        this.refs.pivot.flexmonster.setReport(pivotReport);
      };
    
      showScatterChart = (type) => {
        let pivotReport = this.refs.pivot.flexmonster.getReport();
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Order Date.Year",
            },
          ],
          columns: [
            {
              uniqueName: "City",
              filter: {
                measure: {
                  uniqueName: "Orders",
                  aggregation: "sum",
                },
                query: {
                  top: 3,
                },
              },
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum",
            },
          ],
        };
        pivotReport.options = {
          viewType: "charts",
          chart: {
            type: type,
          },
        };
        this.refs.pivot.flexmonster.setReport(pivotReport);
      };
    
      showColumnLineChart = (type) => {
        let pivotReport = this.refs.pivot.flexmonster.getReport();
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Order Date.Year",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum",
            },
            {
              uniqueName: "Revenue",
              formula: 'sum("Amount") * sum("Price")',
              individual: true,
              caption: "Revenue",
              format: "currency",
            },
          ],
        };
        pivotReport.options = {
          viewType: "charts",
          chart: {
            type: type,
          },
        };
        this.refs.pivot.flexmonster.setReport(pivotReport);
      };
    }
    
    export default PivotTableDemo;
    
    #fm-pivot-view .fm-chart .fm-circle {
      r: 8;
    }
    
    /* Charts Style  */
    .fm-charts-color-1 {
      fill: rgb(0, 164, 90) !important;
    }
    
    .fm-charts-color-2 {
      fill: rgb(223, 56, 0) !important;
    }
    
    .fm-charts-color-3 {
      fill: rgb(255, 184, 0) !important;
    }
    
    .fm-charts-color-4 {
      fill: rgb(109, 59, 216) !important;
    }
    
    .fm-charts-color-5 {
      fill: rgb(0, 117, 255) !important;
    }
    
    #fm-pivot-view .fm-bar,
    #fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
    #fm-pivot-view .fm-line,
    #fm-pivot-view .fm-arc path,
    #fm-pivot-view .fm-bar-stack,
    #fm-pivot-view .fm-scatter-point {
      opacity: 70% !important;
    }
    
    #fm-yAxis-label,
    #fm-xAxis>text,
    #fm-yAxis>text {
      display: none;
    }
    

    End-users can filter, expand, collapse, drill up, and drill down the data hierarchies, drill through the chart’s segments and control the legend’s elements. Embedding interactive charts to your React application will just take a few simple steps with helpful pivot charts tooltips.

    Our Flexmonster react pivot component supports the following chart types: column chart, bar chart, line chart, scatter chart, pie chart, stacked column chart, and a combination of column and line charts.

    Also you can jump from the grid view to the built-in charts with just one click on the Toolbar or you can use API calls to create the needed functionality