Our component includes built-in interactive charts that extend its visualization capabilities. Flexmonster Pivot Charts have pivoting functionality: you can visualize several fields, filter records, and drill through chart segments to see the raw data.
Flexmonster provides seven chart types:
You can try all of these chart types on the Pivot Charts demo.
If you need a chart type that is not on the list, we recommend using 3rd party charting libraries:
The component’s default view is the grid. Switching to charts can be done either using the Toolbar or through code:
To show the pivot charts using the Toolbar, hover over the Charts () tab and choose from the list of available chart types:
To show the pivot charts programmatically, set the options.viewType property to "charts":
report: {
dataSource: {
filename: "data.csv"
},
options: {
viewType: "charts"
}
}Column is the default chart type. To switch to another chart, set the charts.type the preferred chart type.
Here is how to show a bar chart:
report: {
dataSource: {
filename: "data.csv"
},
options: {
viewType: "charts",
chart: {
type: "bar_h"
}
}
}You can choose which data to display on charts the same way you do on the grid — using the Field List or through code.
To configure Flexmonster Pivot Charts, you can set:
Charts are configured using the options.charts object, which defines settings such as the chart type, visibility of the UI controls, etc. See the complete list of chart configurations: Chart options.
Here is an example of how the chart type can be set:
report: {
options: {
viewType: "charts",
charts: {
showLegend: false
}
}
}These configurations affect both the grid and charts. They manage settings such as date/time formatting, read-only mode, etc. See the complete list of component-wide configurations: Component-wide options.
Here is an example of how to hide the Field List button:
report: {
options: {
viewType: "charts",
configuratorButton: false
}
}The pivot charts' appearance can be customized and adjusted to the user’s needs. See our detailed guide: Customizing the pivot charts.
This section explains how different types of Flexmonster Pivot Charts work:
Flexmonster Pivot Charts include six XY charts:
One measure and one field in rows are enough for a basic XY chart. Row fields go to the X-axis (horizontal), and measures go to the Y-axis (vertical); it’s vice versa for a bar chart.
If rows contain several fields, you can expand members by clicking the necessary member name:
If the slice contains several measures, you can choose a chart measure using the options.chart.activeMeasure property or via UI:
If fields in columns are present, row members define main X-axis categories and column members — subcategories. In addition, the legend appears below the chart.
If columns have several fields, you can expand a chart segment by clicking the necessary legend item:
To build a stacked column chart, you need fields in columns and preferably in rows. Otherwise, the chart behaves like a column chart.
Each field member from rows is represented by a separate column. The column is divided into segments, where each segment is a value of a column member that intersects the member from rows. The column shows each column member’s contribution to the row total value:
This chart uses two measures: the first measure is a base for a column chart, and the second measure is used for a line chart.
Note The options.chart.activeMeasure property isn't supported for the column line chart. Active measures are the first two measures from the slice. To use other measures for the chart, move the needed measures to the top of the Values box in the Field List or to the beginning of the slice.measures.
For a basic pie chart, it is enough to have one measure and one field in rows. The row field will be a pie chart’s category, and the measure will be the chart’s numeric value.
When rows contain several fields, you can expand members by clicking the necessary legend item:
If the slice contains several measures, you can choose a chart measure using the options.chart.activeMeasure property or via UI:
When columns are defined in the slice, they are also used for the chart. By default, a pie chart is based on the data from the first member of the first column field. Sorting is considered as well.
You can select a column member for the chart using the options.chart.pieDataIndex property or via UI:
