Useful Options in Flexmonster Pivot Table & Charts

One of the big advantages of our component is its flexibility in ways you can tune it to your needs. When you first build Flexmonster into your app, it uses predefined options to look and work a certain way. But when you need more customization, create reports that truly fit your needs, you can change these options.

As part of our “Tips and Tricks” series, where our Tech team shares insights to help you get the most out of Flexmonster, we’ll show you some useful options and guide you on how to use them effectively.

Creating OptionsObject

To start, let’s create the OptionsObject, where we will define all the functionality.

var pivot = new Flexmonster({
  componentFolder: "https://cdn.flexmonster.com/",
  container: "pivot-container",
  toolbar: true,
  height: 640,
  report: {
options: { }
}

There are three subgroups of options:

1. Grid options – define the options that apply to the grid’s UI controls and functionality.
2. Chart options – define the options that apply to the chart’s UI controls and functionality.
3. Component-wide options – define the options that work regardless of the view type.

Now we’re ready to dive into examples.

Adding grid title

We will start simply by customizing the grid title. 

options: {
grid: {
  title: “Pivot grid title”
} 
}

By default, the title has no background color. However, you can style it with CSS to match your project’s design. Below you can see the applied styles for this tutorial:

.fm-grid-title {
  border-color: rgb(255, 205, 86);
  background-color: rgb(255, 205, 86, 0.8);
}

Although it’s the only grid property we will try out today, GridOptionsObject has much to offer. Check out our documentation to discover all the grid options you can play with.

Adding chart title

We can add and customize the chart title property as we did with the grid title. 

 options: {
grid: {
 title: “Pivot grid title”
} ,
chart: {
        title: "Pie chart title",
        type: "pie",
        position: "right",
      },
}

Since the chart type property’s default value is column, we decided to specify it and display the data with pie charts. Moreover, we also set up the position option, which defines where the charts are shown in relation to the grid. 
Our documentation provides the full list of available options for all ChartOptionsObject properties.

viewType option

We have briefly touched on position customization using the chart options property. However, there is a viewType option, which allows you to configure how to show your report. Since it’s a component-wide option, we set it directly in the OptionsObject.

options: {
      viewType: "grid_charts",
}

By default, the viewType option‘s value is grid.

fieldListPosition option

To specify where to show the Field List, use another component-wide option: fieldListPosition. 

options: {
fieldListPosition: "right",
}

Note that it allows you to position the Field List either on the right (right) or in the pop-up window (undefined).

configuratorActive option

For this tutorial, we wanted the Field List to always be opened, so we specified a configuratorActive option to true. 

options: {
configuratorActive: "true",
}

By default, it has the value of false.

showAggregationLabels option

Sometimes, having too many aggregations can make your report appear cluttered with numerous "sum of" and "average of" displayed on the grid. To simplify the view and hide these labels, set the showAggregationLabels option to false.

options: {
	showAggregationLabels: “false”,
}

Result

And that’s it for today! Check out the full OptionsObject below:

​​  options: {
      viewType: "grid_charts",
      fieldListPosition: "right",
      configuratorActive: true,
      showAggregationLabels: false,
      grid: {
        title: "Pivot grid title",
      },
      chart: {
        title: "Pie chart title",
        type: "pie",
        position: "right",
      },
    },

You can play with the JSFiddle demo to try other options and run the code to see the result.

For a detailed walkthrough on how each option transforms the appearance of Flexmonster Pivot Table & Charts, check out our video tutorial:

One more practical example of working with options is presenting date and types in your reports. In our pivot grid, you can customize dates pattern. To learn more, check our article, How to Manage Date Types in Flexmonster .  

The examples we’ve shared are just a starting point. There’s so much more you can do to set the features and look you need for your report with our pivot grid. Thank you for your attention, and don’t miss out on more valuable insights!