Need a special offer?Find out if your project fits.
+
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 from "react";
    import * as FlexmonsterReact from "react-flexmonster";
    
    class PivotTableDemo extends React.Component {
      render() {
        return (
          <>
            <button onClick={this.showGrid}>Grid</button>
            <button onClick={() => this.showColumnChart("column")}>Column</button>
            <button onClick={() => this.showBarChart("bar_h")}>Bar</button>
            <button onClick={() => this.showLineChart("line")}>Line</button>
            <button onClick={() => this.showScatterChart("scatter")}>
              Scatter
            </button>
            <button onClick={() => this.showPieChart("pie")}>Pie</button>
            <button onClick={() => this.showColumnLineChart("column_line")}>
              Combo
            </button>
            <button onClick={() => this.showStackedColumn("stacked_column")}>
              Stacked
            </button>
            <div className="App">
              <FlexmonsterReact.Pivot
                ref="pivot"
                componentFolder="https://cdn.flexmonster.com/"
                height={500}
                report={{
                  dataSource: {
                    type: "json",
                    filename: "data/demos/pivot-charts-demo-data.json",
                  },
                  options: {
                    viewType: "charts",
                    chart: {
                      type: "column",
                    },
                  },
                  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",
                      },
                    ],
                  },
                  formats: [
                    {
                      name: "",
                      thousandsSeparator: ",",
                      decimalSeparator: ".",
                      decimalPlaces: 0,
                    },
                    {
                      name: "currency",
                      currencySymbol: "$",
                      decimalPlaces: 2,
                    },
                  ],
                }}
              />
            </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",
        };
        pivotReport.formats = [
          {
            name: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 0,
          },
          {
            name: "currency",
            currencySymbol: "$",
            decimalPlaces: 2,
          },
        ];
        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,
          },
        };
        pivotReport.formats = [
          {
            name: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 0,
          },
          {
            name: "currency",
            currencySymbol: "$",
            decimalPlaces: 2,
          },
        ];
        this.refs.pivot.flexmonster.setReport(pivotReport);
      };
    }
    
    export default PivotTableDemo;
    
    #fm-pivot-view .fm-chart .fm-circle {
      r: 8;
    }
    
    /* Chart 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