Flexmonster Pivot Charts

Flexmonster Pivot Charts — an alternative way to visualize aggregated data and highlight specific information.

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  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
      }
    ]
  }
});

function switchChart(type) {
  const pivotReport = pivot.getReport();

  pivotReport.options = {
    viewType: "charts",
    chart: {
      type: type
    }
  };

  switch (type) {
    case "column":
      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"
          }
        ]
      };
      break;
    case "bar_h":
      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"
          }
        ]
      };
      break;
    case "line":
      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"
            }
          }
        }
      };
      break;
    case "scatter":
      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"
          }
        ]
      };
      break;
    case "pie":
      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"
          }
        ]
      };
      pivotReport.formats.push({
        name: "currency",
        currencySymbol: "$",
        decimalPlaces: 2
      });
      break;
    case "column_line":
      pivotReport.slice = {
        rows: [
          {
            uniqueName: "Order Date.Year"
          }
        ],
        columns: [
          {
            uniqueName: "[Measures]"
          }
        ],
        measures: [
          {
            uniqueName: "Orders",
            aggregation: "sum"
          },
          {
            uniqueName: "Revenue",
            formula: "sum('Amount') * sum('Price')",
            individual: true,
            format: "currency"
          }
        ]
      };
      pivotReport.formats.push({
        name: "currency",
        currencySymbol: "$",
        decimalPlaces: 2
      });
      break;
    case "stacked_column":
      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"
            }
          }
        }
      };
      break;
    default:
      break;
  }

  pivot.setReport(pivotReport);
}

function showGrid() {
  const pivotReport = pivot.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,
        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.push({
    name: "currency",
    currencySymbol: "$",
    decimalPlaces: 2
  });
  pivot.setReport(pivotReport);
}

<button onclick="showGrid()">Grid</button>
<button onclick="switchChart('column')">Column</button>
<button onclick="switchChart('bar_h')">Bar</button>
<button onclick="switchChart('line')">Line</button>
<button onclick="switchChart('scatter')">Scatter</button>
<button onclick="switchChart('pie')">Pie</button>
<button onclick="switchChart('column_line')">Combo</button>
<button onclick="switchChart('stacked_column')">Stacked</button>

<div id="pivot-container"></div>

#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;
}

Their core feature is interactivity: end-users can filter, expand, collapse, drill up, and drill down the data hierarchies, drill through the chart segments, and control the legend's elements.

The web pivot charts are easily understood with convenient tooltips and legend information.

Our web 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 chart.

Moreover, our drillable pivot charts are built-in — end-users can toggle between chart and grid views via UI or using API calls.

One million rows Dashboard

Prev Next

Frequently asked questions

Can't find your answer here?
Visit the FAQ page

What is Flexmonster Pivot Table & Charts?

Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?

Changes to Flexmonster Software License Agreement

Flexmonster Pivot Charts

For the best experience

See our live examples

Frequently asked questions